请选择 进入手机版 | 继续访问电脑版

echarts圆环进度条效果

[复制链接]
时间苍白了等待 发表于 2020-12-31 20:24:15 | 显示全部楼层 |阅读模式 打印 上一主题 下一主题

雷同这种效果的图形,一般都是多种图形堆叠的效果,比如这个图就是:多个环形饼图和一个坐标轴叠加而成

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

  1.         // 需要展示的数据    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','#1971e7'],        ['#983fff','#2c23ff'],        ['#fff582','#59f9d2']    ]
复制代码
二、遍历生成图形设置所需的设置项

[code]        let series = []    let yAxis = []    for(let i=0;i
回复

使用道具 举报

您需要登录后才可以回帖 登录 | 立即注册

本版积分规则

发布主题

专注素材教程免费分享
全国免费热线电话

18768367769

周一至周日9:00-23:00

反馈建议

27428564@qq.com 在线QQ咨询

扫描二维码关注我们

Powered by Discuz! X3.4© 2001-2013 Comsenz Inc.( 蜀ICP备2021001884号-1 )