微信小程序 图表组件化_小程序扇形组件怎么做

参考： 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'},
    ]
1
2
3
4
5
6
7

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;
      });
    },
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15

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();
    },
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20

4. 效果
   
   地址：github 添加动画