学习图表框架-uPlot（vue项目）第三篇 散点图

散点图相比于折线图要复杂一点，需要多加一个方法

一组数据需要一个series配置

1、多组散点图

数据格式  [null, [[1,2],[9,0]], [[2,4],[8,6]] ]  三维数组

第一个元素是null，其余的每一个元素表示一组

比如 [[1,2],[9,0]]表示x轴1，2，对应y轴9，0

const drawPoints = (u, seriesIdx, idx0, idx1) => {
        const size = 5 * this.scatterNum

        uPlot.orient(u, seriesIdx, (series, dataX, dataY, scaleX, scaleY, valToPosX, valToPosY, xOff, yOff, xDim, yDim, moveTo, lineTo, rect, arc) => {
          let d = u.data[seriesIdx]

          u.ctx.fillStyle = series.stroke()

          let deg360 = 2 * Math.PI

          // console.time("points");
          let p = new Path2D()

          for (let i = 0; i < d[0].length; i++) {
            let xVal = d[0][i]
            let yVal = d[1][i]

            if (xVal >= scaleX.min && xVal <= scaleX.max && yVal >= scaleY.min && yVal <= scaleY.max) {
              let cx = valToPosX(xVal, scaleX, xDim, xOff)
              let cy = valToPosY(yVal, scaleY, yDim, yOff)

              p.moveTo(cx + size / 2, cy)
              //	arc(p, cx, cy, 3, 0, deg360);
              arc(p, cx, cy, size / 2, 0, deg360)
            }
          }

          // console.timeEnd("points");

          u.ctx.fill(p)
        })
        return null
      }
       let pxRatio
       
      function setPxRatio() {
        pxRatio = devicePixelRatio
      }

      setPxRatio()

      window.addEventListener('dppxchange', setPxRatio)

      this.scatterSeries = [{}]

      for (var i = 0; i < color.length; i++) {
        this.scatterSeries.push({
          stroke: color[i].color,
          // fill: "rgba(255,0,0,0.1)",
          spanGaps: true,
          paths: drawPoints
        })
      }
      const opts = {
        title: title,//标题
        mode: 2,
        width: this.width,
        height: this.height,
        scales: {
          x: {
            time: false
          }
        },
        series: this.scatterSeries
      }
      if (this.myChart) {
        this.myChart.destroy()
      }
      this.myChart = new uPlot(opts, data, document.getElementById('hi'))
    },

paths: drawPoints是生成散点的关键

2、一组散点图

数据格式  [null,[[1,2,3],[4,3,6]]]