echarts label固定位置_Echarts圆形进度条效果

最新推荐文章于 2024-08-16 18:21:02 发布

泷小渊

最新推荐文章于 2024-08-16 18:21:02 发布

阅读量581

点赞数

文章标签： echarts label固定位置

本文链接：https://blog.csdn.net/weixin_32184669/article/details/112411995

版权

本文介绍了如何使用Echarts创建类似圆形进度条的图形，通过数据格式化、配置项设置和坐标轴添加，实现了环形饼图与坐标轴的叠加效果。通过调整系列配置和透明度，产生圆环差一截的视觉效果。

摘要由CSDN通过智能技术生成

类似这种效果的图形，一般都是多种图形堆叠的效果，比如这个图就是：多个环形饼图和一个坐标轴叠加而成。

一、首先获取到需要展示的数据，根据需求，格式化出需要的数据格式：

// 需要展示的数据let resData = [{
    name:'数据1',value:80},{
    name:'数据2',value:40},{
    name:'数据3',value:60}]let name = resData.map((item)=>item.name) // 获取名称let value = resData.map((item)=>item.value) // 获取数值let sum = value.reduce((pre,cur)=>pre+=cur,0) // 总和let color = [ // 颜色    ['#6fc1fb','#1