some optmization

src/components/pointChart/index.vue

@@ -5,6 +5,10 @@
     <div class="canvas-container">
       <canvas :ref="ref" />
     </div>
+
+    <label-line :label="data.labelLine" :colors="drawColors" />
+
+    <for-slot><slot></slot></for-slot>
   </div>
 </template>
 
@@ -26,22 +30,103 @@ export default {
       // axis base config
       boundaryGap: true,
       horizon: false,
-      mulValueAdd: true
+      mulValueAdd: false,
+
+      defaultPointRadius: 2,
+
+      valuePointPos: []
     }
   },
   methods: {
     async init () {
-      const { initCanvas, initColors, initAxis } = this
+      const { initCanvas, initColors, data, draw } = this
 
       await initCanvas()
 
       initColors()
 
+      data && draw()
+    },
+    draw () {
+      const { clearCanvas } = this
+
+      clearCanvas()
+
+      const { initAxis, drawAxis, calcValuePointPos } = this
+
       initAxis()
 
-      const { drawAxis } = this
-
       drawAxis()
+
+      calcValuePointPos()
+
+      const { drawPoints } = this
+
+      drawPoints()
+    },
+    calcValuePointPos () {
+      const { data: { data }, valueAxisMaxMin, getAxisPointsPos } = this
+
+      const { axisOriginPos, axisWH, labelAxisTagPos } = this
+
+      this.valuePointPos = data.map(({ data: td }, i) =>
+        getAxisPointsPos(
+          valueAxisMaxMin,
+          td,
+          axisOriginPos,
+          axisWH,
+          labelAxisTagPos,
+          false
+        ))
+    },
+    drawPoints () {
+      const { data: { data }, drawSeriesPoint, ctx } = this
+
+      ctx.setLineDash([10, 0])
+
+      data.forEach((series, i) => drawSeriesPoint(series, i))
+    },
+    drawSeriesPoint ({ color: cr, edgeColor, fillColor, radius, opacity }, i) {
+      const { drawColors, defaultPointRadius, valuePointPos, drawPoint } = this
+
+      const { color: { hexToRgb }, data: { radius: outerRadius } } = this
+
+      const drawColorsNum = drawColors.length
+
+      const baseColor = drawColors[i % drawColorsNum]
+
+      const trueEdgeColor = edgeColor || cr || baseColor
+
+      let trueFillColor = fillColor || cr || baseColor
+
+      opacity && (trueFillColor = hexToRgb(trueFillColor, opacity))
+
+      const trueRadius = radius || outerRadius || defaultPointRadius
+
+      valuePointPos[i].forEach(cp => {
+        if (!cp && cp !== 0) return
+
+        const isSeries = cp[0] instanceof Array
+
+        isSeries && cp.forEach(p => (p || p === 0) && drawPoint(p, trueEdgeColor, trueFillColor, trueRadius))
+
+        !isSeries && drawPoint(cp, trueEdgeColor, trueFillColor, trueRadius)
+      })
+    },
+    drawPoint (pos, edgeColor, fillColor, radius) {
+      const { ctx } = this
+
+      ctx.beginPath()
+
+      ctx.arc(...pos, radius, 0, Math.PI * 2)
+
+      ctx.closePath()
+
+      ctx.strokeStyle = edgeColor
+      ctx.fillStyle = fillColor
+
+      ctx.fill()
+      ctx.stroke()
     }
   },
   mounted () {
@@ -56,6 +141,7 @@ export default {
 .point-chart {
   position: relative;
   display: flex;
+  flex-direction: column;
 
   .canvas-container {
     flex: 1;

src/plugins/methodsExtend.js

@@ -108,6 +108,8 @@ export function getAxisPointsPos ([max, min], values, axisOriginPos, axisWH, tag
 }
 
 export function getAxisPointPos ([max, min], value, axisOriginPos, axisWH, tagPos, horizon) {
+  if (!value && value !== 0) return false
+
   const minus = max - min
 
   const percent = (value - min) / minus

src/views/demo/chart/pointChartDemo.vue

@@ -11,6 +11,72 @@
 
         <highlight-code>
 data: {
+  data: [
+    {
+      data: [
+        '', '',
+        [280, 265, 240, 200, 180],...
+      ]
+    },
+    {
+      data: [
+        '', '', '', '', '',
+        '', '', '', '', '',
+        [357, 222, 82, 355],...
+      ]
+    }
+  ],
+  x: {
+    data: [ '', '',
+      '西峡', '', '', '周口', '', '',
+      '南阳', '', '', '驻马店', '', '',
+      '郑州', '', '', '洛阳', '', ''
+    ],
+    grid: true,
+    gridLineType: 'dashed',
+    gridLineDash: [2, 2]
+  },
+  y: {
+    min: 0,
+    num: 6,
+    max: 500
+  }
+}
+        </highlight-code>
+      </div>
+    </border-box-7>
+
+    <border-box-7 class="chart-item">
+      <point-chart :data="pointChartData2" :colors="colors" class="chart" />
+
+      <div class="config-info">
+        <div class="title">Point-Chart</div>
+        <highlight-code>
+&lt;point-chart :data="data" :colors="colors" /&gt;
+        </highlight-code>
+
+        <highlight-code>
+// 相同配置不再赘述
+data: {
+  data: [
+    {
+      data: ...,
+      // 非必须 设置该项 点内部自动透明
+      // 如果设置了fillColor 其应该为16进制色 否则无法进行透明计算
+      opacity: 0.5
+    },
+    {
+      data: ...,
+      // 非必须 设置局部点半径
+      radius: 5,
+      // 非必须 设置边线颜色
+      edgeColor: '#ff5ca9',
+      // 非必须 设置点内部填充色
+      fillColor: 'rgba(0, 186, 255, 0.5)'
+    }
+  ],
+  // 非必须 设置全局点半径
+  radius: 4
 }
         </highlight-code>
       </div>
@@ -27,35 +93,121 @@ export default {
     return {
       pointChartData1: {
         data: [
-          {
-            data: [123, 156, 290, 400, 169, 435]
-          },
           {
             data: [
-              [230, 123, 56],
+              '', '',
-              [111, 22, 66],
+              [280, 265, 240, 200, 180],
-              [56, 25, 156],
+              [320, 200, 190, 255, 260],
-              [79, 52, 40],
+              [330, 222, 190, 255, 270],
-              [60, 56, 56],
+              [325, 260, 220, 190, 255],
-              [23, 45, 78]
+              [300, 245, 215, 255, 270],
+              [280, 250, 190, 255, 270]
             ]
           },
           {
-            data: [15, 20, 27, 35, 27, 17],
+            data: [
-            againstAxis: true
+              '', '',
+              '', '',
+              '', '',
+              '', '',
+              '', '',
+              [357, 222, 82, 355],
+              [56, 25, 156],
+              [70, 251, 425, 300, 278, 315],
+              [79, 52, 40, 250, 160],
+              [70, 251, 425, 300, 278, 315],
+              [79, 52, 40, 180, 240],
+              [79, 52, 40],
+              [60, 56, 56],
+              '', ''
+            ]
           }
         ],
         x: {
-          data: ['西峡', '周口', '南阳', '驻马店', '郑州', '洛阳']
+          data: [ '', '',
+            '西峡', '', '',
+            '周口', '', '',
+            '南阳', '', '',
+            '驻马店', '', '',
+            '郑州', '', '',
+            '洛阳', '', ''
+          ],
+          grid: true,
+          gridLineType: 'dashed',
+          gridLineDash: [2, 2]
         },
         y: {
+          min: 0,
+          num: 6,
+          max: 500
         },
-        ax: {
+        labelLine: {
-        },
+          data: ['同期', '环期'],
-        ay: {
+          type: 'rectangle'
         }
       },
 
+      pointChartData2: {
+        data: [
+          {
+            data: [
+              '', '',
+              [280, 265, 240, 200, 180],
+              [320, 200, 190, 255, 260],
+              [330, 222, 190, 255, 270],
+              [325, 260, 220, 190, 255],
+              [300, 245, 215, 255, 270],
+              [280, 250, 190, 255, 270]
+            ],
+            opacity: 0.5
+          },
+          {
+            data: [
+              '', '',
+              '', '',
+              '', '',
+              '', '',
+              '', '',
+              [357, 222, 82, 355],
+              [56, 25, 156],
+              [70, 251, 425, 300, 278, 315],
+              [79, 52, 40, 250, 160],
+              [70, 251, 425, 300, 278, 315],
+              [79, 52, 40, 180, 240],
+              [79, 52, 40],
+              [60, 56, 56],
+              '', ''
+            ],
+            radius: 5,
+            edgeColor: '#ff5ca9',
+            fillColor: 'rgba(0, 186, 255, 0.5)'
+          }
+        ],
+        x: {
+          data: [ '', '',
+            '西峡', '', '',
+            '周口', '', '',
+            '南阳', '', '',
+            '驻马店', '', '',
+            '郑州', '', '',
+            '洛阳', '', ''
+          ],
+          grid: true,
+          gridLineType: 'dashed',
+          gridLineDash: [2, 2]
+        },
+        y: {
+          min: 0,
+          num: 6,
+          max: 500
+        },
+        labelLine: {
+          data: ['同期', '环期'],
+          type: 'rectangle'
+        },
+        radius: 4
+      },
+
       colors: ''
     }
   }