Echarts在线免费图表

 
            let dataPie2 = [
    {
        name: '早餐',
        value: 60,
    },
    {
        name: '午餐',
        value: 40,
    },
    {
        name: '晚餐',
        value: 10,
    },
];
let colorList = [ '#2BFEFE','#0EB7F7','#FBBC00']
let dataColor2 = [
    {
        type: 'linear',
        x: 0,
        x2: 0,
        y: 1,
        y2: 0,
        colorStops: [
            { offset: 0, color: '#2BFEFE' },
            { offset: 1, color: '#4BC2D3' },
        ],
    },
    {
        type: 'linear',
        x: 0,
        x2: 0,
        y: 1,
        y2: 0,
        colorStops: [
            { offset: 0, color: '#0EB7F7' },
            { offset: 1, color: '#0E7EF7' },
        ],
    },
    {
        type: 'linear',
        x: 0,
        x2: 0,
        y: 1,
        y2: 0,
        colorStops: [
            { offset: 0, color: '#FBBC00' },
            { offset: 1, color: '#F67126' },
        ],
    },
];
let legendData = [],
    seriesData = [],
    radiusValue = 60,
    total = 0;
let startAngle = [];

total = dataPie2.reduce((a,c)=>a+c.value,0)

dataPie2.reduce((a,c)=>{
    startAngle.push(a/total*360)
     return a+c.value
},0)
for (var i = 0; i < dataPie2.length; i++) {
    legendData.push(dataPie2[i].name);
    seriesData.push({
        type: 'pie',
        clockWise: true, //饼图的扇区是否是顺时针排布
        radius: [30+ 8* i + '%',30 + 8*i+4+'%'],
        center: ['30%', '50%'],
        label: {
            normal: {
                show: false, //隐藏引导线标识
            },
        },
        hoverAnimation: false, //关闭 hover 在扇区上的放大动画效果
        startAngle: 180+startAngle[i], //起始角度
        data: [
            {
                //透明伞形
                z: 1,
                value: total - dataPie2[i].value,
                tooltip: {
                    show: false,
                },
                itemStyle: {
                    //设置透明伞形
                    color: 'rgba(60, 79, 154, 0)', //伞形颜色
                    // borderWidth: 10,
                    // borderColor: 'rgba(60, 79, 154, 0.2)',
                    label: {
                        show: false,
                    },
                },
            },
            {
                z: 2,
                value: dataPie2[i].value,
                name: dataPie2[i].name,
                itemStyle: {
                    borderRadius: '30%',
                    color: dataColor2[i],
                    shadowBlur: 15,
                    shadowColor: colorList[i],
                },
            },
        ],
    });
}
option = {
    backgroundColor: 'rgba(4, 11, 27, 1)',
    tooltip: {
        trigger: 'item',
        show: false,
        formatter: '{b} : <br/>{d}%',
        backgroundColor: 'rgba(0,0,0,0.7)', // 背景
        padding: [8, 10], //内边距
        extraCssText: 'box-shadow: 0 0 3px rgba(255, 255, 255, 0.4);', //添加阴影
    },
    legend: {
        data: legendData,
        icon: 'circle',
        orient: 'vertical',
        right:100,
        top:'center',
        itemGap: 10,
        formatter: function (name) {
            let target, percent;
            for (let i = 0; i < dataPie2.length; i++) {
                if (dataPie2[i].name === name) {
                    target = dataPie2[i].value;
                    percent = ((target / total) * 100).toFixed(2);
                }
            }
            let arr = [' {blue|' + name + '} {white|' + target + '}'];
            return arr
        },
        textStyle: {
            lineHeight: 20,
            color: '#a5dbff',
            align: 'right',
            rich: {
                white: {
                    color: '#e9e9e9',
                    align: 'right',
                    width: 30,
                },
                blue: {
                    color: '#a5dbff',
                    align: 'left',
                    width: 50,
                },
            },
        },
    },
    series: seriesData,
};