三分之一圆echarts 饼配置项内容和展示

三分之一圆

配置项如下
      var data = [
    { type: '钢卷库', value: 6.62, name: '钢商品材' },
    { type: '钢卷库', value: 6.07, name: '上工序' },
    { type: '钢卷库', value: 1.04, name: '余材' },
    { type: '钢卷库', value: 0, name: '占位' },
    { type: '板坯库', value: 40, name: '商品材' },
    { type: '板坯库', value: 20, name: '上工序' },
    { type: '板坯库', value: 32, name: '余材' },
    { type: '板坯库', value: 0, name: '占位' },
];

var getchartdata = function (data, type) {
    //让另外4分之3圆隐藏
    var chartdata = [];
    let num = 0;
    for (var i = 0; i < data.length; i++) {
        if (data[i].type == type) {
            num += data[i].value;
            if (data[i].name === '占位') {
                data[i].value = num * 3;
                data[i].label = { show: false };
                data[i].labelLine = { show: false };
                data[i].itemStyle = { show: false, normal: { color: 'rgba(0,0,0,0)', borderWidth: 0 } };
            }
            chartdata.push(data[i]);
        }
    }
    return chartdata;
};

var option = {
    series: [
        {
            name: '钢卷库',
            type: 'pie',
            radius: '60%',
            top: '20%',
            left: '-10%',
            startAngle: 180,
            data: getchartdata(data, '钢卷库'),
            itemStyle: {
                normal: {
                    borderColor: '#2b2a38',
                    borderWidth: 1,
                },
            },
            label: {
                formatter: '{sm|{b}}\n{hr|}\n{xm|{c}}',
                rich: {
                    sm: {
                        fontSize: 16,
                        padding: [0, 0, 5, 0],
                        //color: "#1ab4b8",
                    },
                    xm: {
                        fontSize: 14,
                        padding: [5, 0, 0, 0],
                    },
                    hr: {
                        height: 0,
                        borderWidth: 1,
                        width: '100%',
                        borderColor: '#d3d3d3',
                    },
                },
            },
            labelLine: {
                normal: {
                    show: true,
                    length: 10,
                    length2: 30,
                    smooth: 0.2,
                    lineStyle: {
                        color: '#d3d3d3',
                    },
                },
            },
        },
        {
            name: '板坯库',
            type: 'pie',
            radius: '60%',
            top: '20%',
            startAngle: 0,
            clockwise: false,
            left: '10%',
            data: getchartdata(data, '板坯库'),
            itemStyle: {
                normal: {
                    borderColor: '#2b2a38',
                    borderWidth: 1,
                },
            },
            label: {
                formatter: '{sm|{b}}\n{hr|}\n{xm|{c}}',
                rich: {
                    sm: {
                        fontSize: 16,
                        padding: [0, 0, 5, 0],
                        //color: "#1ab4b8",
                    },
                    xm: {
                        fontSize: 14,
                        padding: [5, 0, 0, 0],
                    },
                    hr: {
                        height: 0,
                        borderWidth: 1,
                        width: '100%',
                        borderColor: '#d3d3d3',
                    },
                },
            },
            labelLine: {
                normal: {
                    show: true,
                    length: 10,
                    length2: 30,
                    smooth: 0.2,
                    lineStyle: {
                        color: '#d3d3d3',
                    },
                },
            },
        },
    ],
};

myChart.setOption(option);

    
截图如下