Echar

Candy_Seven

已于 2022-07-28 14:33:07 修改

阅读量1.2k

点赞数

分类专栏： echarts 文章标签： echarts

于 2022-07-28 14:31:53 首次发布

本文链接：https://blog.csdn.net/Candy_Seven/article/details/126034100

版权

本文档详细介绍了如何根据UI设计图，利用Echarts库创建一款独特的外圈齿轮图表。通过JavaScript代码展示了如何填充数据，并定义itemStyle以实现特定的颜色渐变和阴影效果。最终实现的效果图呈现了动态的视觉体验。

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

根据ui图，创建Echar图表

UI图：

外圈齿轮

function _pieTwo() {//外圈齿轮
let dataArr = [];
for (var i = 0; i < 100; i++) {
if (i % 2 === 0 || i > data.value[0]) {
//data.value[0],表示外圈显示比例
dataArr.push({
value: 2,
itemStyle: {
normal: {
color: "rgba(0,0,0,0)",
shadowBlur: 100,
shadowColor: "rgba(53, 235, 251, 0.9)",
},
},
});
} else {
dataArr.push({
value: 2,
itemStyle: {
normal: {
color: "rgba(53, 235, 251, 0.9)",
shadowBlur: 100,
shadowColor: "rgba(53, 235, 251, 0.9)",
},
},
});
}
}
return dataArr;
}

{//齿轮

type: "pie",

radius: ["53%", "57%"],