some completed

src/components/columnChart/index.vue

@@ -24,7 +24,22 @@ export default {
     return {
       ref: `radar-chart-${(new Date()).getTime()}`,
 
-      axisType: 'column'
+      axisType: 'column',
+
+      defaultColumnType: 'butt',
+      defaultBGColor: 'rgba(250, 250, 250, 0.2)',
+      defaultMulItemDrawType: 'link',
+      defaultShowColumnBG: false,
+
+      columnType: '',
+      columnWidth: '',
+      columnItemREPos: [],
+      mulItemDrawType: '',
+      showColumnBG: false,
+      bgColor: '',
+      bgColorMul: false,
+      mulItemDrawType: '',
+      columnData: []
     }
   },
   props: ['data', 'colors'],
@@ -37,7 +52,7 @@ export default {
       data && draw()
     },
     draw () {
-      const { clearCanvas, initColors, initAxis, drawAxis } = this
+      const { clearCanvas, initColors, initAxis, drawAxis, calcColumnConfig, drawColumnBG } = this
 
       clearCanvas()
 
@@ -46,7 +61,124 @@ export default {
       initAxis()
 
       drawAxis()
-    }
+
+      const { calcBGConfig, drawColumn, calcColumnData } = this
+
+      calcBGConfig()
+
+      calcColumnConfig()
+
+      calcColumnData()
+
+      drawColumnBG()
+
+      drawColumn()
+    },
+    calcColumnConfig () {
+      const { horizon, data, labelTagGap, valueTagGap, defaultMulItemDrawType, defaultColumnType } = this
+
+      const { data: td, columnType, mulItemDrawType } = data
+
+      const halfGap = labelTagGap / 2
+
+      const columnWidth = this.columnWidth = labelTagGap / (td.length + 1)
+
+      const halfColumnWidth = columnWidth / 2
+
+      this.columnItemREPos = new Array(td.length).fill(0).map((t, i) =>
+        i * columnWidth + halfColumnWidth).map(pos => pos - halfGap)
+
+      this.columnType = columnType || defaultColumnType
+
+      this.mulItemDrawType = mulItemDrawType || defaultMulItemDrawType
+    },
+    calcBGConfig () {
+      const { data, defaultBGColor, drawColors, defaultShowColumnBG } = this
+
+      const { showColumnBG, bgColor } = data
+
+      this.showColumnBG = showColumnBG || defaultShowColumnBG
+
+      let trueBGColor = bgColor || defaultBGColor
+
+      trueBGColor === 'colors' && (trueBGColor = drawColors)
+
+      this.bgColor = trueBGColor
+
+      this.bgColorMul = trueBGColor instanceof Array
+    },
+    calcColumnData () {
+      const { labelTagPos, horizon, defaultMulItemDrawType, data } = this
+
+      const { getAxisPointsPos, axisMaxMin, axisOriginPos, axisWH } = this
+
+      const { mulItemDrawType, data: td } = data
+
+      this.mulItemDrawType = mulItemDrawType || defaultMulItemDrawType
+
+      const columnData = td.map(({ data: values }, i) => {
+        const beginPos = []
+
+        values.map((v, j) => {
+          if (!v) return
+
+          if (v instanceof Array) {
+            return v.map()
+          } else {
+            return getAxisPointsPos(axisMaxMin, v, axisOriginPos, axisWH, labelTagPos[j], horizon)
+          }
+        })
+      })
+    },
+    drawColumnBG () {
+      const { ctx, showColumnBG, columnWidth, columnItemREPos, axisWH } = this
+
+      const { labelTagPos, bgColor, bgColorMul, horizon, axisOriginPos } = this
+
+      const { columnType, data } = this
+
+      if (!showColumnBG) return
+
+      !bgColorMul && (ctx.strokeStyle = bgColor)
+
+      const bgColorNum = bgColor.length
+
+      const bgColumnWidth = columnWidth * data.data.length
+
+      ctx.lineWidth = bgColumnWidth
+
+      ctx.setLineDash([10, 0])
+
+      ctx.lineCap = columnType
+
+      const halfColumnWidth = bgColumnWidth  / 2
+
+      labelTagPos.forEach(([x, y], i) => {
+        const movePos = horizon ? [axisOriginPos[0], y] : [x, axisOriginPos[1]]
+        const endPos = horizon ? [axisOriginPos[0] + axisWH[0], y] : [x, axisOriginPos[1] - axisWH[1]]
+
+        if (columnType === 'round') {
+          if (horizon) {
+            movePos[0] += halfColumnWidth
+            endPos[1] -= halfColumnWidth
+          } else {
+            movePos[1] -= halfColumnWidth
+            endPos[1] += halfColumnWidth
+          }
+        }
+
+        bgColorMul && (ctx.strokeStyle = bgColor[i % bgColorNum])
+
+        ctx.beginPath()
+
+        ctx.moveTo(...movePos)
+        ctx.lineTo(...endPos)
+
+        ctx.stroke()
+      })
+    },
+    drawColumn () {
+    },
   },
   mounted () {
     const { init } = this