echarts实现多层环图（复制粘贴即可）

原创

已于 2023-07-31 15:12:31 修改 · 3.7k 阅读

8 ·

CC 4.0 BY-SA版权

文章标签：

#echarts #echarts实现多层环图 #vue2中多层环图实现

于 2023-07-31 15:11:47 首次发布

这篇文章展示了如何使用Echarts库创建一个具有多个层次的环形图。配置中详细定义了颜色、图例、标签和数据值，用于展示不同类别间的比例关系，以及提供了计算每个类别百分比的方法。

该文章已生成可运行项目，

data里面参数配置：

// 多重环图
            optionCircle: {
                tooltip: {
                    show: false,
                    trigger: 'item',
                    formatter: "{a} : {c} ({d}%)"
                },
                color: ['#3AB1EB', '#D48B6A', '#5B41C8', '#FE7E02'],
                legend: {
                    orient: 'horizontal',
                    itemWidth: 30,   // 图例标记的图形宽度。
                    itemHeight: 10, // 图例标记的图形高度。
                    itemGap: 15,  //图例每项之间的间隔
                    right: 20,
                    top: 70,
                    icon: 'circle',
                    textStyle: {
                        fontSize: 12,
                        color: '#fff',
                    },
                    formatter: (name) => {
                        console.log(name)
                        var data = this.optionCircle.series;
                        var total = 0;
                        var tarValue = 0;
                        for (var i = 0, l = data.length; i < l; i++) {
                            console.log(data[i])
                            total += data[i].data[0].value;
                            if (data[i].data[0].name == name) {
                                tarValue = data[i].data[0].value;
                            }
                        }
                        var p = ((tarValue / total) * 100).toFixed(0);
                        return name + "    " + "  " + p + '%'
                    },
                },
                series: [
                    {
                        name: '及格',
                        type: 'pie',
                        radius: ['20%', '25%'],
                        center: ['35%', '50%'],
                        //环的位置
                        label: {

本文章已经生成可运行项目