optmization

src/components/columnChart/index.vue

@@ -515,38 +515,62 @@ export default {
       return echelonPoint
     },
     drawValueText () {
-      const { data: { showValueText }, horizon, columnItemOffset, getOffsetPoints } = this
+      const { data: { showValueText }, horizon } = this
 
       if (!showValueText) return
 
-      const { data: { valueTextFontSize, valueTextColor, valueTextOffset, data } } = this
+      const { data: { valueTextFontSize, valueTextOffset, data } } = this
 
-      const { ctx, defaultValueColor, defaultValueFontSize, valuePointPos, drawTexts } = this
+      const { ctx, defaultValueFontSize } = this
 
       const offset = horizon ? [5, 0] : [0, -5]
 
       const trueOffset = valueTextOffset || offset
 
-      ctx.fillStyle = valueTextColor || defaultValueColor
-
       ctx.font = `${valueTextFontSize || defaultValueFontSize}px Arial`
 
       ctx.textAlign = horizon ? 'left' : 'center'
       ctx.textBaseline = horizon ? 'middle' : 'bottom'
 
-      data.forEach(({ data }, i) => {
+      const { drawSeriesTextValue } = this
-        if (data[0] instanceof Array) {
-          data.forEach((td, j) =>
-            drawTexts(ctx,
-              td,
-              getOffsetPoints(valuePointPos[i][j], columnItemOffset[i]),
-              trueOffset))
 
-          return
+      data.forEach((series, i) => drawSeriesTextValue(series, i, trueOffset))
-        }
+    },
+    drawSeriesTextValue ({ data, valueTextColor, fillColor, lineColor }, i, trueOffset) {
+      const { ctx, valuePointPos, columnItemOffset, drawTexts, getOffsetPoints, drawColors } = this
 
-        drawTexts(ctx, data, getOffsetPoints(valuePointPos[i], columnItemOffset[i]), trueOffset)
+      const { data: { valueTextColor: outerValueTC }, defaultValueColor } = this
-      })
+
+      const drawColorsNum = drawColors.length
+
+      let currentColor = valueTextColor
+      currentColor === 'inherit' && (currentColor = fillColor || lineColor || drawColors[i % drawColorsNum])
+      const mulColor = currentColor instanceof Array
+      const colorNum = mulColor ? currentColor.length : 0
+
+      const currentPos = valuePointPos[i]
+      const currentOffset = columnItemOffset[i]
+
+      const mulSeries = data[0] instanceof Array
+
+      if (mulSeries) {
+        data.forEach((item, j) => {
+          const pointPos = getOffsetPoints(currentPos[j], currentOffset)
+
+          item.forEach((v, l) => {
+            !currentColor && (ctx.fillStyle = defaultValueColor)
+            currentColor && (ctx.fillStyle = mulColor ? currentColor[l % colorNum] : currentColor)
+            drawTexts(ctx, [item[l]], [pointPos[l]], trueOffset)
+          })
+        })
+      }
+
+      if (!mulSeries) {
+        mulColor && (currentColor = currentColor[0])
+
+        ctx.fillStyle = currentColor || outerValueTC || defaultValueColor
+        drawTexts(ctx, data, getOffsetPoints(currentPos, currentOffset), trueOffset)
+      }
     },
     drawTexts (ctx, values, points, [x, y] = [0, 0]) {
       values.forEach((v, i) => {

src/components/polylineChart/index.vue

@@ -192,27 +192,37 @@ export default {
       drawPFun(ctx, points, defaultPointRadius, color)
     },
     drawValues () {
-      const { ctx, data: { data, showValueText, valueTextColor, valueTextOffset, valueTextFontSize } } = this
+      const { ctx, data: { data, showValueText, valueTextOffset, valueTextFontSize } } = this
 
       if (!showValueText) return
 
-      const { defaultValueFontSize, defaultValueColor, valuePointPos, drawValue } = this
+      const { defaultValueFontSize, drawValue } = this
 
       const offset = valueTextOffset || [0, -5]
 
-      ctx.fillStyle = valueTextColor || defaultValueColor
-
       ctx.font = `${valueTextFontSize || defaultValueFontSize}px Arial`
 
       ctx.textAlign = 'center'
       ctx.textBaseline = 'bottom'
 
-      data.forEach((line, i) => drawValue(line, valuePointPos[i], offset))
+      data.forEach((line, i) => drawValue(line, i, offset))
     },
-    drawValue ({ data }, points, offset) {
+    drawValue ({ data, valueTextColor, lineColor, pointColor, fillColor }, i, offset) {
-      const { ctx, getOffsetPoints } = this
+      const { ctx, getOffsetPoints, valuePointPos, drawColors, defaultValueColor } = this
 
-      getOffsetPoints(points, offset).forEach((pos, i) => {
+      const { data: { valueTextColor: outerValueTC } } = this
+
+      const drawColorsNum = drawColors.length
+
+      let currentColor = valueTextColor
+      currentColor === 'inherit' && (currentColor = pointColor || lineColor || fillColor || drawColors[i % drawColorsNum])
+      currentColor instanceof Array && (currentColor = currentColor[0])
+
+      ctx.fillStyle = currentColor || outerValueTC || defaultValueColor
+
+      const pointsPos = valuePointPos[i]
+
+      getOffsetPoints(pointsPos, offset).forEach((pos, i) => {
         if (!data[i] && data[i] !== 0) return
 
         ctx.fillText(data[i], ...pos)

src/components/radarChart/index.vue

@@ -36,6 +36,9 @@ export default {
       defaultLabelColor: '#fff',
       defaultLabelFS: 10,
 
+      defaultValueFontSize: 10,
+      defaultValueColor: '#999',
+
       drawColors: '',
       radius: '',
       ringType: '',
@@ -132,6 +135,10 @@ export default {
       caclValuePointData()
 
       fillRadar()
+
+      const { fillValueText } = this
+
+      fillValueText()
     },
     calcRadarRadius () {
       const { canvasWH, data: { radius }, defaultRadius } = this
@@ -471,6 +478,43 @@ export default {
         ctx.fill()
       })
     },
+    fillValueText () {
+      const { data: { data, showValueText, valueTextFontSize } } = this
+
+      if (!showValueText) return
+
+      const { ctx, defaultValueFontSize } = this
+
+      ctx.font = `${valueTextFontSize || defaultValueFontSize}px Arial`
+
+      const { fillSeriesText } = this
+
+      data.forEach((item, i) => fillSeriesText(item, i))
+    },
+    fillSeriesText ({ valueTextColor, lineColor, fillColor, data }, i) {
+      const { ctx, drawColors, valuePointData, drawTexts } = this
+
+      const { data: { valueTextOffset, valueTextColor: outerValueTC }, defaultValueColor } = this
+
+      const trueOffset = valueTextOffset || [5, -5]
+
+      const drawColorsNum = drawColors.length
+
+      let currentColor = valueTextColor
+      currentColor === 'inherit' && (currentColor = lineColor || fillColor || drawColors[i % drawColorsNum])
+      currentColor instanceof Array && (currentColor = currentColor[0])
+
+      ctx.fillStyle = currentColor || outerValueTC || defaultValueColor
+
+      drawTexts(ctx, data, valuePointData[i], trueOffset)
+    },
+    drawTexts (ctx, values, points, [x, y] = [0, 0]) {
+      values.forEach((v, i) => {
+        if (!v && v !== 0) return
+
+        ctx.fillText(v, points[i][0] + x, points[i][1] + y)
+      })
+    },
     reDraw (d) {
       const { draw } = this