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'},
]
- 计算比例和开始的角度
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;
});
},
- 开始绘制
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();
},
- 效果
地址:github 添加动画