【组件模板】扩展环形图

收藏

本帖最后由 @Martin.Zhang 于 2024-2-4 15:27 编辑

显示效果：
image.png679718322.png

实现步骤：
1.使用Echarts图表
image.png612948913.png

2.绑定数据

3.属性中调整自定义属性
image.png382216796.png

代码内容：

const chartData = option.series[0].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[i],
itemStyle: {
borderRadius: 10
}
})
// 第二圈数据
pieData2.push({
...chartData[i],
itemStyle: {
color: colorList[i],
opacity: 0.21
}
})
legendData.push(chartData[i].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: [0, '45.6%'],
label: {
show: false
},
labelLine: {
show: false
},
itemStyle: {
color: 'rgba(75, 126, 203,.1)'
},
silent: true,
data: [
{
value: 100
}
]
}
]
}
return _option;

复制代码

运行，浏览效果。
示例案例：

wyn-export-20240204152540.zip (398.41 KB, 下载次数: 12)

		自动登录	找回密码
密码			立即注册

0 个回复