echart多个扇形图圈

最新推荐文章于 2023-10-24 12:10:03 发布

原创

最新推荐文章于 2023-10-24 12:10:03 发布 · 798 阅读

0 ·

CC 4.0 BY-SA版权

本文介绍如何利用Echarts库绘制多个扇形图，并通过调整扇区角度和透明度实现重叠效果。示例代码展示了数据处理、配置项设定，包括饼图类型、半径、中心位置、标签显示、以及透明伞形图的设置。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

let dataPie2 = [{
name: ‘其他井’,
value: 100
},
{
name: ‘占用’,
value:20
},
{
name: ‘占用’,
value:15
},
{
name: ‘占用’,
value:1
},

];
let dataColor2 = [

 {
    os1: '#ffffff',
    os2: '#ffffff',
},

 {
    os1: '#fcb713',
    os2: '#fcb713',
},
 {
    os1: '#00eeff',
    os2: '#00eeff',
},
 {
    os1: '#ffff3b',
    os2: '#ffff3b',
},

];
let legendData = [],
seriesData = [],
radiusValue = 80,total = 0;

dataPie2.forEach(function(val, idx, arr) {
total += val.value;
})
for (var i = 0; i < dataPie2.length; i++) {
legendData.push(dataPie2[i].name);
seriesData.push({
type: ‘pie’,
clockWise: false, //饼图的扇区是否是顺时针排布
radius: [radiusValue - 8 * i + ‘%’, radiusValue - 8 * i + 1 + ‘%’],
center: [‘50%’, ‘50%’],
label: {
normal: {
show: false