【组件模板】扩展环形图
本帖最后由 @Martin.Zhang 于 2024-2-4 15:27 编辑显示效果：
实现步骤：
1.使用Echarts图表
2.绑定数据
3.属性中调整自定义属性
代码内容：
const chartData = option.series.data;
const colorList = ['#115FEA', '#10EBE3', '#10A9EB', '#EB9C10', '#2E10EB', '#9B10EB']
const sum = chartData.reduce((per, cur) => per + cur.value, 0)
const gap = (1 * sum) / 100
const pieData1 = []
const pieData2 = []
const legendData=[]
for (let i = 0; i < chartData.length; i++) {
// 第一圈数据
pieData1.push({
...chartData,
itemStyle: {
borderRadius: 10
}
})
// 第二圈数据
pieData2.push({
...chartData,
itemStyle: {
color: colorList,
opacity: 0.21
}
})
legendData.push(chartData.name)
}
const _option = {
tooltip: {
show: true
},
legend:{
...option.legend,
data:legendData
},
grid: option.grid,
color: colorList,
series: [
{
name: '消息来源',
type: 'pie',
roundCap: true,
radius: ['66%', '70%'],
center: ['36%', '45%'],
label: {
show: false
},
labelLine: {
show: false
},
data: pieData1
},
{
type: 'pie',
radius: ['66%', '54%'],
center: ['36%', '45%'],
gap: 1.71,
label: {
show: false
},
labelLine: {
show: false
},
silent: true,
data: pieData2
},
{
type: 'pie',
center: ['36%', '45%'],
radius: ,
label: {
show: false
},
labelLine: {
show: false
},
itemStyle: {
color: 'rgba(75, 126, 203,.1)'
},
silent: true,
data: [
{
value: 100
}
]
}
]
}
return _option;
运行，浏览效果。
示例案例：
页:
[1]