微信小程序 圖表組件化

參考： github : wx-charts

1. 扇形圖

參考：繪製圖表

1. 數據

  chartData: [
	    {data: 15,name: '成交量1',color: '#7cb5ec'},
	    {data: 35,name: '成交量2',color: '#f7a35c'},
	    {data: 63,name: '成交量3',color: '#41affc'},
	    {data: 78,name: '成交量4',color: '#434348'},
	    {data: 63,name: '成交量5',color: '#90ed7d'},
    ]

2. 計算比例和開始的角度

    calPieAngle(chartData, process) {
      // 計算數據總和
      let count = 0;
      chartData.forEach((item) => {
        count += item.data;
      });
      // 計算出開始的弧度和所佔比例
      let startAngle = 0;
      return chartData.map((item) => {
        item.proportion = item.data / count * process;
        item.startAngle = startAngle;
        startAngle += 2 * Math.PI * item.proportion;
        return item;
      });
    },

3. 開始繪製

drawPieChart(chartData) {
      let pieChartData = this.calPieAngle(chartData);
      const { pieRadius } = this.data
      const context = wx.createCanvasContext('chartpie', this) // 組件中使用cnavas需要指定this
      context.setLineWidth(2);
      context.setStrokeStyle('#ffffff');
      pieChartData.forEach((item) => {
        context.beginPath();
        // 設置填充顏色
        context.setFillStyle(item.color);
        // 移動到原點
        context.moveTo(pieRadius, pieRadius);
        // 繪製弧度
        context.arc(pieRadius, pieRadius, pieRadius, item.startAngle, item.startAngle + 2 * Math.PI * item.proportion);
        context.closePath();
        context.fill();
        context.stroke(); // 畫白線
      });
      context.draw();
    },

4. 效果
   
   地址：github 添加動畫