echarts饼图pie应用之一--多个环形图叠加

  echarts中饼图主要用于表现不同类目的数据在总和中的占比。每个弧度表示数据数量的比例。

如下图：

 下面具体说下上述环形图的实现步骤：

1.hoverAnimation——是否开启 hover 在扇区上的放大动画效果

hoverAnimation: false,//默认为true

2.clockWise——饼图的扇区是否是顺时针排布

clockWise: false,//默认为true

3.radius设置饼图的半径

radius: [65 - i * 15 + '%', 57 - i * 15 + '%'],
//多组数据，遍历data值，半径不同
for (let i = 0; i < data.length; i++) {
        res.series.push({
            name: '学历',
            type: 'pie',
            clockWise: false, //1.饼图的扇区是否是顺时针排布
            hoverAnimation: false, //2.是否开启 hover 在扇区上的放大动画效果
            radius: [65 - i * 15 + '%', 57 - i * 15 + '%'], //3.设置饼图的半径
        )}
           
    }

4.data系列中的数据项可以为单个数值的数组

  如果需要在数据中加入其它维度给 visualMap 组件用来映射到颜色等其它图形属性。每个数据项也可以是数组，如：

[[12, 14], [34, 50], [56, 30], [10, 15], [23, 10]]

需要指定每个数据项的名称，这时候每个数据项为一个对象：

data: [{//data值
        value: data[i].value,
        name: data[i].name
    }, {//环形图剩余值所占背景色不同
        value: sumValue - data[i].value,
        name: '',
        itemStyle: {
            color: "rgba(0,0,0,0)",
            borderWidth: 0
        },
        tooltip: {
            show: false
        },
        hoverAnimation: false
}]

5.两种同心饼图叠加,实现3/4底图灰色效果

3/4底色实现效果的代码

data: [{ //灰色饼图默认值
        value: 7.5,
        itemStyle: {
            color: "#E3F0FF",
            borderWidth: 0
        },
        tooltip: {
            show: false
        },
        hoverAnimation: false
    }, { //灰色饼图显示4/3，使其剩余部分隐藏
        value: 2.5,
        name: '',
        itemStyle: {
            color: "rgba(0,0,0,0)", //饼图颜色透明，隐藏4/1部分
            borderWidth: 0
        },
        tooltip: {
            show: false
        },
        hoverAnimation: false
    }]

6.整个实例代码

data = [{
        name: "本科及以上",
        value: 13211
    },
    {
        name: "高中",
        value: 42111
    },
    {
        name: "初中及以下",
        value: 81711
    },
    {
        name: "其他",
        value: 121711
    }
];
arrName = getArrayValue(data, "name");
arrValue = getArrayValue(data, "value");
sumValue = eval(arrValue.join('+'));
objData = array2obj(data, "name");
optionData = getData(data);

function getArrayValue(array, key) {
    var key = key || "value";
    var res = [];
    if (array) {
        array.forEach(function(t) {
            res.push(t[key]);
        });
    }
    return res;
}

function array2obj(array, key) {
    var resObj = {};
    for (var i = 0; i < array.length; i++) {
        resObj[array[i][key]] = array[i];
    }
    return resObj;
}

function getData(data) {
    var res = {
        series: [],
        yAxis: []
    };
    for (let i = 0; i < data.length; i++) {
        res.series.push({
            name: '学历',
            type: 'pie',
            clockWise: false, //1.饼图的扇区是否是顺时针排布
            hoverAnimation: false, //2.是否开启 hover 在扇区上的放大动画效果
            radius: [65 - i * 15 + '%', 57 - i * 15 + '%'], //3.设置饼图的半径
            center: ["30%", "55%"],
            label: {
                show: false
            },
            itemStyle: {
                label: {
                    show: false,
                },
                labelLine: {
                    show: false
                },
                borderWidth: 5,
            },
            data: [{
                value: data[i].value,
                name: data[i].name
            }, {
                value: sumValue - data[i].value,
                name: '',
                itemStyle: {
                    color: "rgba(0,0,0,0)",
                    borderWidth: 0
                },
                tooltip: {
                    show: false
                },
                hoverAnimation: false
            }]
        });
        res.series.push({
            name: '',
            type: 'pie',
            silent: true,
            z: 1,
            clockWise: false, //顺时加载
            hoverAnimation: false, //鼠标移入变大
            radius: [65 - i * 15 + '%', 57 - i * 15 + '%'],
            center: ["30%", "55%"],
            label: {
                show: false
            },
            itemStyle: {
                label: {
                    show: false,
                },
                labelLine: {
                    show: false
                },
                borderWidth: 5,
            },
            data: [{ //灰色饼图默认值
                value: 7.5,
                itemStyle: {
                    color: "#E3F0FF",
                    borderWidth: 0
                },
                tooltip: {
                    show: false
                },
                hoverAnimation: false
            }, { //灰色饼图显示4/3，使其剩余部分隐藏
                value: 2.5,
                name: '',
                itemStyle: {
                    color: "rgba(0,0,0,0)", //饼图颜色透明，隐藏4/1部分
                    borderWidth: 0
                },
                tooltip: {
                    show: false
                },
                hoverAnimation: false
            }]
        });
        res.yAxis.push((data[i].value / sumValue * 100).toFixed(2) + "%");
    }
    return res;
}

option = {
    backgroundColor: '#fff',
    color: [
        
        new echarts.graphic.LinearGradient(0, 0, 0, 1, [ //右，下，左，上
            {
                offset: 0,
                color: 'rgba(155,157,255,1)'
            },
            {
                offset: 1,
                color: 'rgba(236,213,163,1)'
            },
        ], false),
        new echarts.graphic.LinearGradient(0, 0, 0, 1, [ //右，下，左，上
            {
                offset: 0,
                color: 'rgba(155,157,255,1)'
            },
            {
                offset: 1,
                color: 'rgba(154,192,255,1)'
            },
        ], false),
        new echarts.graphic.LinearGradient(0, 0, 0, 1, [ //右，下，左，上
            {
                offset: 0,
                color: 'rgba(127,193,251,1)'
            },
            {
                offset: 1,
                color: 'rgba(132,231,245,1)'
            },
        ], false),
        new echarts.graphic.LinearGradient(0, 0, 0, 1, [ //右，下，左，上
            {
                offset: 0,
                color: 'rgba(152,231,235,1)'
            },
            {
                offset: 1,
                color: 'rgba(236,213,163,1)'
            },
        ], false)
    ],
    grid: {
        top: '20%',
        bottom: '48%',
        left: "30%",
        containLabel: false
    },
    yAxis: [{
        type: 'category',
        axisLine: {
            show: false
        },
        axisTick: {
            show: false
        },
        axisLabel: {
            interval: 0,
            inside: true,
            textStyle: {
                color: "#000",
                fontSize: 10,
            },
            // show: true
        },
        data: optionData.yAxis
    }],
    xAxis: [{
        show: false
    }],
    series: optionData.series
};