![17d69360c341e67b72da3afcda5a2cde.png](https://i-blog.csdnimg.cn/blog_migrate/f24a5fe1ed6b48fee76958d43c595a91.png)
![1b23c61c313728825e517c6331812bea.png](https://i-blog.csdnimg.cn/blog_migrate/0ae2f59984f0572a767265c8f948adf0.png)
目标是使用echarts画一个上方的饼图。
任务拆解
主要包含以下几块内容:
- 基础饼图
- 环形饼图
- 各部分标签优化
- 鼠标移动到饼图上时的提示
- 标题
- 总量
基础饼图
![4cff2631d012f9087fbf3ac6ca6d7a16.png](https://i-blog.csdnimg.cn/blog_migrate/111c602ea242635cab652fc9a01635e6.png)
this.chart.setOption({
series: [
{
name: this.title,
type: 'pie', // 设置统计图类型
selectedMode: 'single', // 一次只能选中一个模块
radius: [0, '70%'], // 圆的大小为父类的70%
clockwise: false, // 逆时针开始排序
data: [
{
value: 65, name: '使用' },
{
value: 15, name: '未使用' }
]
}
]
})