echarts实现环形进度图 图如下
echarts吧
全部回复
仅看楼主
level 1
DQPHP 楼主
2018年05月14日 02点05分 1
level 1
实现啦吗?自己用canvas写的好丑,我刚好也有类似需求,可以分享下源码吗?
2018年06月23日 01点06分 2
level 1
你好在吗
2021年07月19日 01点07分 3
level 2
这个type是pie,要设置两个data数据,考虑你这个是没过100%,需要把data值处理75%左右
2021年08月27日 06点08分 4
你好 ,可以写个demo嘛
2021年09月07日 01点09分
level 2
回复 泪妆D :这是我以前项目中用的,能不能写出来看你会不会举一反三了:
{name:data.name,type:"pie",radius:["40%","60%"],center:["50%","40%"],startAngle:225,,hoverAnimation:true,legendHoverLink:false,z:10,},data:[{value:(75*data.value)/100},{value:100-(75*data.value)/100}]},
2021年09月11日 08点09分 5
level 2
let option = { // backgroundColor: "#fff", title: { text: "{num|" + data.value + "}{key| %}", subtext: this.$t(`kpiSummary.${data.name}`), x: "50%", y: "61%", textAlign: "center", textStyle: { rich: { num: { fontWeight: "bold", color: "#333", fontFamily: "微软雅黑", fontSize: 25 }, key: { fontWeight: "bold", color: "#333", fontFamily: "微软雅黑", fontSize: 15 } } }, subtextStyle: { lineHeight: 20, fontSize: 15 } }, data: [ { name: data.name } ], // tooltip: { // trigger: "item", // formatter: `{a} <br/> rate: ${data.value} %` // }, // 原生图形元素组件 graphic: [ { type: "image", id: "logo", left: data.left, top: data.top, // eslint-disable-next-line no-dupe-keys z: -10, // 图高度 bounding: "raw", rotation: 0, //旋转 origin: [50, 50], //中心点 scale: [1.0, 1.0], //缩放 style: { image: data.url, // width: 129, // height: 65, opacity: 1 } } ], series: [ { // 主圆环 name: data.name, type: "pie", radius: ["40%", "60%"], center: ["50%", "40%"], startAngle: 225, color: [ { // 线性渐变 type: "linear", x: 1, y: 0, x2: 0, y2: 0, colorStops: [ { offset: 0, color: "#37D7B3" // 0% 处的颜色 }, { offset: 1, color: "#1FB5AD" // 100% 处的颜色 } ] }, "transparent" ], hoverAnimation: true, // 是否开启 hover 在 box 上的动画效果。 legendHoverLink: false, // 图例经过时是否显示高亮 z: 10, labelLine: { normal: { show: false } }, data: [ { value: (75 * data.value) / 100 }, { value: 100 - (75 * data.value) / 100 } ] }, { // 背景圆环 name: "", type: "pie", radius: ["40%", "60%"], center: ["50%", "40%"], silent: true, // 坐标轴是否是静态无法交互。 startAngle: 225, // 起始刻度的角度,默认为 90 度,即圆心的正上方。0 度为圆心的正右方。 labelLine: { // 标签的视觉引导线配置。 normal: { show: false } }, z: 5, data: [ { value: 75, itemStyle: { color: "#F0F0F0" } }, { value: 25, itemStyle: { color: "transparent" } } ] } ] }; eg.setOption(option);
2021年09月11日 08点09分 6
1