JCSS / jcss-miniprogram

<template>
  <view class="uni-charts">
    <canvas
        v-if="type !== 'map'"
        class="charts-canvas"
        :style="{width: width + 'px', height: height + 'px'}"
        canvas-id="uni-charts"
        @touchstart="touchStart"
        @touchmove="touchMove"
        @touchend="touchEnd"
    ></canvas>
    <view v-else class="map-container" :style="{width: width + 'px', height: height + 'px'}">
      <slot name="map"></slot>
    </view>
  </view>
</template>

<script>
export default {
  name: 'uniCharts',
  props: {
    type: {
      type: String,
      default: 'line'
    },
    data: {
      type: Array,
      default () {
        return []
      }
    },
    categories: {
      type: Array,
      default () {
        return []
      }
    },
    option: {
      type: Object,
      default () {
        return {
          yAxis: {
            tickCount: 5 // 默认5个刻度，可通过option自定义，无上限
          }
        }
      }
    },
    width: {
      type: [Number, String],
      default: 375
    },
    height: {
      type: [Number, String],
      default: 200
    }
  },
  data () {
    return {
      ctx: null,
      chartData: {},
      touchInfo: {}
    }
  },
  watch: {
    data: {
      deep: true,
      handler () {
        this.initChart()
      }
    },
    categories: {
      deep: true,
      handler () {
        this.initChart()
      }
    },
    option: {
      deep: true,
      handler () {
        this.initChart()
      }
    }
  },
  mounted () {
    this.initChart()
  },
  methods: {
    initChart () {
      if (this.type === 'kline') {
        this.drawKline()
      } else if (this.type === 'line') {
        this.drawLine()
      }
    },
    // 核心：自适应计算Y轴整数刻度（无任何数值限制）
    calculateYAxisTicks (minVal, maxVal, tickCount = 5) {
      // 1. 确保是整数，且最大值>最小值（无数值范围限制）
      minVal = parseInt(minVal, 10)
      maxVal = parseInt(maxVal, 10)

      // 边界处理：极值相等时自动扩展范围（避免刻度重复）
      if (maxVal <= minVal) {
        maxVal = minVal + tickCount // 扩展范围，保证刻度不重复
      }

      // 2. 动态计算整数步长（完全自适应，无固定值限制）
      const totalRange = maxVal - minVal
      let step = Math.ceil(totalRange / (tickCount - 1)) // 关键：按刻度数算步长
      step = step < 1 ? 1 : step // 步长至少为1，保证整数刻度

      // 3. 生成连续不重复的整数刻度（无数值上限）
      const ticks = []
      for (let i = 0; i < tickCount; i++) {
        ticks.push(minVal + i * step)
      }

      // 4. 确保最大值能覆盖数据（无限制）
      if (ticks[ticks.length - 1] < maxVal) {
        ticks.push(maxVal)
      }

      return {
        ticks: ticks, // 最终刻度数组（纯整数、不重复、无限制）
        min: minVal,
        max: Math.max(...ticks),
        step: step
      }
    },
    // 折线图绘制（无限制版）
    drawLine () {
      if (!this.data.length || !this.categories.length) return;

      const ctx = uni.createCanvasContext('uni-charts', this)
      this.ctx = ctx
      const { width, height } = this
      const {
        grid = {},
        xAxis = {},
        yAxis = {},
        legend = {},
        color = ['#25AF69', '#B34C17']
      } = this.option

      // 清空画布
      ctx.clearRect(0, 0, width, height)

      // Grid布局（自适应，无固定值）
      const gridTop = grid.top ? (typeof grid.top === 'string' ? parseFloat(grid.top) / 100 * height : grid.top) : 60
      const gridLeft = grid.left ? (typeof grid.left === 'string' ? parseFloat(grid.left) / 100 * width : grid.left) : 70
      const gridRight = grid.right ? (typeof grid.right === 'string' ? parseFloat(grid.right) / 100 * width : grid.right) : 20
      const gridBottom = grid.bottom ? (typeof grid.bottom === 'string' ? parseFloat(grid.bottom) / 100 * height : grid.bottom) : 50

      const drawWidth = width - gridLeft - gridRight
      const drawHeight = height - gridTop - gridBottom

      // 收集所有Y轴数据（无数值限制）
      let allValues = []
      this.data.forEach(series => {
        allValues = allValues.concat(series.data)
      })
      if (allValues.length === 0) return;

      // 基础极值（完全按数据来，无任何限制）
      const rawMaxVal = Math.max(...allValues)
      const rawMinVal = Math.min(...allValues)
      // 用户可通过yAxis.min/max自定义极值，否则用数据极值（无限制）
      const maxVal = yAxis.max !== undefined ? yAxis.max : rawMaxVal
      const minVal = yAxis.min !== undefined ? yAxis.min : rawMinVal
      // 刻度数量自定义（默认5个，可传任意数，无上限）
      const tickCount = yAxis.tickCount || 5

      // 核心：计算无限制、不重复的整数刻度
      const yAxisConfig = this.calculateYAxisTicks(minVal, maxVal, tickCount)
      const { ticks: yTicks, min: alignedMinVal, max: alignedMaxVal } = yAxisConfig
      const valRange = alignedMaxVal - alignedMinVal || 1

      // X轴步长（自适应）
      const xStep = drawWidth / (this.categories.length - 1 || 1)

      // X轴标签防拥挤（自适应，无限制）
      const minLabelWidth = 30
      const maxShowLabels = Math.floor(drawWidth / minLabelWidth)
      const labelInterval = maxShowLabels < this.categories.length
          ? Math.ceil(this.categories.length / maxShowLabels)
          : 1

      // 绘制网格线 + Y轴整数刻度（无数值限制）
      ctx.setStrokeStyle(yAxis.splitLine?.lineStyle?.color || '#f5f5f7')
      ctx.setLineWidth(1)

      yTicks.forEach((tickVal, i) => {
        const y = gridTop + drawHeight - (i * drawHeight / (yTicks.length - 1))
        // 绘制网格线
        ctx.beginPath()
        ctx.moveTo(gridLeft, y)
        ctx.lineTo(width - gridRight, y)
        ctx.stroke()

        // Y轴显示纯整数（无小数点、无任何数值限制）
        ctx.setFillStyle(yAxis.axisLabel?.color || '#666')
        ctx.setFontSize(yAxis.axisLabel?.fontSize || 12)
        const valText = tickVal.toString() // 纯整数，直接转字符串
        const textWidth = ctx.measureText(valText).width
        ctx.fillText(valText, gridLeft - 10 - textWidth, y + 5)
      })

      // 绘制X轴标签（自适应）
      ctx.setFillStyle(xAxis.axisLabel?.color || '#666')
      ctx.setFontSize(xAxis.axisLabel?.fontSize || 12)
      this.categories.forEach((text, index) => {
        if (index % labelInterval === 0) {
          const x = gridLeft + index * xStep
          let labelText = text
          if (text.length > 6) {
            labelText = text.slice(0, 6) + '...'
          }
          const textLines = labelText.split('\n')
          textLines.forEach((line, lineIdx) => {
            const textWidth = ctx.measureText(line).width
            ctx.fillText(line, x - textWidth / 2, height - gridBottom + 20 + (lineIdx * 12))
          })
        }
      })

      // 绘制图例（核心修复：颜色块和文字垂直居中对齐）
      if (legend.show) {
        // 获取图例文字大小（统一基准）
        const legendFontSize = legend.textStyle?.fontSize || 12
        ctx.setFontSize(legendFontSize)
        // 定义颜色块尺寸（和文字高度匹配）
        const legendBlockSize = legendFontSize * 0.8 // 颜色块大小 = 文字大小的80%，视觉更协调
        const legendBlockMargin = 5 // 颜色块和文字的间距
        let legendX = gridLeft + 10
        // 计算垂直居中基准线
        const legendYBase = gridTop - 30

        this.data.forEach((series, idx) => {
          let seriesName = series.name || `系列${idx + 1}`
          if (seriesName.length > 8) {
            seriesName = seriesName.slice(0, 8) + '...'
          }
          const textWidth = ctx.measureText(seriesName).width

          // 核心：计算颜色块和文字的垂直居中位置
          // 颜色块Y坐标 = 基准线 - 颜色块高度/2（居中）
          const legendBlockY = legendYBase - legendBlockSize / 2
          // 文字Y坐标 = 基准线 + 文字高度/4（canvas文字居中的黄金比例）
          const legendTextY = legendYBase + legendFontSize / 4

          // 绘制颜色块（居中对齐）
          ctx.setFillStyle(series.color || color[idx % color.length])
          ctx.fillRect(legendX, legendBlockY, legendBlockSize, legendBlockSize)

          // 绘制文字（和颜色块垂直居中）
          ctx.setFillStyle('#666')
          ctx.fillText(seriesName, legendX + legendBlockSize + legendBlockMargin, legendTextY)

          // 更新下一个图例的X坐标（包含间距）
          legendX += legendBlockSize + legendBlockMargin + textWidth + 10
        })
      }

      // 绘制折线（纯直线，无数值限制）
      this.data.forEach((series, seriesIdx) => {
        const seriesColor = series.color || color[seriesIdx % color.length]

        ctx.setStrokeStyle(seriesColor)
        ctx.setLineWidth(2)
        ctx.beginPath()

        series.data.forEach((value, index) => {
          const x = gridLeft + index * xStep
          // 自适应计算Y坐标（无数值限制）
          const y = gridTop + drawHeight - ((value - alignedMinVal) / valRange) * drawHeight

          if (index === 0) {
            ctx.moveTo(x, y)
          } else {
            ctx.lineTo(x, y)
          }
        })

        ctx.stroke()
      })

      ctx.draw()
    },
    // K线图绘制（同步无限制逻辑 + 图例对齐修复）
    drawKline () {
      const ctx = uni.createCanvasContext('uni-charts', this)
      this.ctx = ctx
      const { width, height } = this
      const { grid = {}, xAxis = {}, yAxis = {}, color = ['#B34C17', '#25AF69'] } = this.option

      ctx.clearRect(0, 0, width, height)

      // Grid布局（自适应）
      const gridTop = grid.top ? (typeof grid.top === 'string' ? parseFloat(grid.top) / 100 * height : grid.top) : 50
      const gridLeft = grid.left ? (typeof grid.left === 'string' ? parseFloat(grid.left) / 100 * width : grid.left) : 70
      const gridRight = grid.right ? (typeof grid.right === 'string' ? parseFloat(grid.right) / 100 * width : grid.right) : 20
      const gridBottom = grid.bottom ? (typeof grid.bottom === 'string' ? parseFloat(grid.bottom) / 100 * height : grid.bottom) : 40

      const drawWidth = width - gridLeft - gridRight
      const drawHeight = height - gridTop - gridBottom

      // 收集所有Y轴数据（无限制）
      let allValues = []
      this.data.forEach(item => {
        allValues = allValues.concat([item.open, item.high, item.low, item.close])
      })
      if (allValues.length === 0) return;

      // 基础极值（无限制）
      const rawMaxVal = Math.max(...allValues)
      const rawMinVal = Math.min(...allValues)
      const maxVal = yAxis.max !== undefined ? yAxis.max : rawMaxVal
      const minVal = yAxis.min !== undefined ? yAxis.min : rawMinVal
      const tickCount = yAxis.tickCount || 5

      // 核心：无限制整数刻度计算
      const yAxisConfig = this.calculateYAxisTicks(minVal, maxVal, tickCount)
      const { ticks: yTicks, min: alignedMinVal, max: alignedMaxVal } = yAxisConfig
      const valRange = alignedMaxVal - alignedMinVal || 1

      const xStep = drawWidth / (this.data.length || 1)

      // 绘制网格线和Y轴刻度（无限制）
      ctx.setStrokeStyle('#f5f5f7')
      ctx.setLineWidth(1)

      yTicks.forEach((tickVal, i) => {
        const y = gridTop + drawHeight - (i * drawHeight / (yTicks.length - 1))
        ctx.beginPath()
        ctx.moveTo(gridLeft, y)
        ctx.lineTo(width - gridRight, y)
        ctx.stroke()

        // 纯整数显示（无限制）
        ctx.setFillStyle(yAxis.axisLabel?.color || '#666')
        ctx.setFontSize(yAxis.axisLabel?.fontSize || 12)
        const valText = tickVal.toString()
        const textWidth = ctx.measureText(valText).width
        ctx.fillText(valText, gridLeft - 10 - textWidth, y + 5)
      })

      // X轴标签（自适应）
      ctx.setFillStyle(xAxis.axisLabel?.color || '#666')
      ctx.setFontSize(xAxis.axisLabel?.fontSize || 12)
      const minLabelWidth = 30
      const maxShowLabels = Math.floor(drawWidth / minLabelWidth)
      const labelInterval = maxShowLabels < this.categories.length
          ? Math.ceil(this.categories.length / maxShowLabels)
          : 1

      this.categories.forEach((text, index) => {
        if (index % labelInterval === 0) {
          const x = gridLeft + index * xStep + xStep / 2
          let labelText = text
          if (text.length > 6) labelText = text.slice(0, 6) + '...'
          ctx.fillText(labelText, x - ctx.measureText(labelText).width / 2, height - gridBottom + 20)
        }
      })

      // 绘制K线（无数值限制）
      this.data.forEach((item, index) => {
        const { open, high, low, close } = item
        const x = gridLeft + index * xStep + xStep / 2
        // 自适应坐标计算
        const yOpen = gridTop + drawHeight - ((open - alignedMinVal) / valRange) * drawHeight
        const yClose = gridTop + drawHeight - ((close - alignedMinVal) / valRange) * drawHeight
        const yHigh = gridTop + drawHeight - ((high - alignedMinVal) / valRange) * drawHeight
        const yLow = gridTop + drawHeight - ((low - alignedMinVal) / valRange) * drawHeight

        // 绘制高低线
        ctx.setStrokeStyle(close >= open ? color[0] : color[1])
        ctx.setLineWidth(1)
        ctx.beginPath()
        ctx.moveTo(x, yHigh)
        ctx.lineTo(x, yLow)
        ctx.stroke()

        // 绘制实体
        const rectWidth = xStep / 3
        ctx.setFillStyle(close >= open ? color[0] : color[1])
        const rectY = Math.min(yOpen, yClose)
        const rectHeight = Math.abs(yClose - yOpen) || 2
        ctx.fillRect(x - rectWidth / 2, rectY, rectWidth, rectHeight)
      })

      ctx.draw()
    },
    touchStart (e) {
      this.touchInfo = {
        x: e.changedTouches[0].x,
        y: e.changedTouches[0].y,
        time: Date.now()
      }
    },
    touchMove (e) {
      this.touchInfo.x = e.changedTouches[0].x
      this.touchInfo.y = e.changedTouches[0].y
    },
    touchEnd (e) {
      // 可扩展交互逻辑，无限制
    }
  }
}
</script>

<style scoped>
.uni-charts {
  position: relative;
}
.charts-canvas {
  display: block;
}
.map-container {
  position: relative;
}
</style>