ECharts饼图技巧：打造断开的环形图

ECharts饼图技巧：打造断开的环形图

效果预览

在数据可视化中，饼图是一种常用的展示不同类别占比的方式。而断开的环形图，又称为甜甜圈图或圆环图，提供了一种新颖的展示方法，它允许用户通过断开部分扇区来突出显示某些数据或增加图表的可读性。

代码思路

实现断开的环形图，关键在于理解ECharts中饼图的data属性和itemStyle属性的配置。通过添加额外的扇区数据项，并将它们的值设置为0或适当较小的数值，可以创建出断开的效果。同时，通过itemStyle中的borderWidth和shadowBlur属性，可以增强图表的视觉效果。

核心实现步骤

1. 初始化图表和数据

首先，初始化ECharts图表，并准备需要展示的数据。

function init() {
    var myChart = echarts.init(document.getElementById('ECharts'));
    var scaleData = [
        // ... 数据项
    ];
    // ...
}

2. 配置数据项和样式

为每个数据项添加样式配置，包括渐变色、边框宽度、阴影等。

var data = [];
for (var i = 0; i < scaleData.length; i++) {
    data.push({
        value: scaleData[i].value,
        name: scaleData[i].name,
        itemStyle: {
            normal: {
                borderWidth: 5,
                shadowBlur: 30,
                // 渐变色配置
                borderColor: new echarts.graphic.LinearGradient(...),
                shadowColor: 'rgba(142, 152, 241, 0.6)'
            }
        }
    }, {
        // 添加一个值为4的空白扇区，用于断开环形
        value: 4,
        name: '',
        itemStyle: placeHolderStyle
    });
}

3. 配置系列和图表选项

设置饼图的系列选项，包括名称、类型、半径等，并配置图表的其它选项。

var seriesObj = [{
    name: '',
    type: 'pie',
    clockWise: false,
    radius: [195, 200],
    hoverAnimation: false,
    itemStyle: {
        normal: {
            label: {
                show: true,
                position: 'outside',
                // 标签格式化函数
                formatter: function (params) {
                    // ...
                },
                rich: rich
            },
            labelLine: {
                show: false
            }
        }
    },
    data: data
}];
var option = {
    backgroundColor: '#04243E',
    tooltip: {
        show: false
    },
    legend: {
        show: false
    },
    toolbox: {
        show: false
    },
    series: seriesObj
};
myChart.setOption(option);

总结

通过上述步骤，我们可以实现一个具有断开效果的环形图。这种图表不仅可以提供传统饼图的所有功能，还可以通过断开部分扇区来吸引观众的注意力或展示更多的数据信息。

完整代码

完整代码下载

其他说明

• 断开环形图的实现依赖于对ECharts配置项的深入理解，特别是data和itemStyle属性。
• 在实际应用中，可以根据需要调整断开扇区的大小和位置，以达到最佳的视觉效果。
• 本文提供的代码示例需要根据实际的数据和需求进行调整和完善。

通过本文的介绍，你应该能够掌握在ECharts中实现断开环形图的方法，并能够将其应用到你的数据可视化项目中，以创造出更加吸引人的图表。