饼图+仪表盘echarts gauge配置项内容和展示

饼图+仪表盘

      
let total = 66
let data1 = [
    {value: 23, name: 'test1'},
    {value: 33, name: 'test2'},
]
option = {
    backgroundColor: "#1e3756",
    tooltip: {
        trigger: 'item',
    },
    title: {
        zlevel: 0,
        text: total,
        subtext: '总数',
        top: '40%',
        left: '40%',
        textAlign: 'center',
        textStyle: {
            color: '#FFA042',
            fontSize: 80,
        },
        subtextStyle: {
            fontSize: 60,
            color: '#fff',
        },
    },
    legend: {
        orient: 'vertical',
        right: 10,
        top: 20,
        bottom: 20,
        itemWidth: 15, // 图例图形的宽度
        itemHeight: 10, // 图例图形的高度
        itemGap: 30,
        textStyle: {
            color: '#fff',
            fontSize: 14,
            marginTop: 60,
        },
    },
    series: [
        {
            color: ['#163d59'],
            type: 'gauge',
            center: ['40%', '50%'],
            startAngle: 150,
            endAngle: -209.999,
            splitNumber: 12,
            radius: '70%',
            pointer: {
                show: false,
            },
            progress: {
                show: false,
                roundCap: true,
                width: 1,
            },
            axisLine: {
                show: false,
                lineStyle: {
                    width: 10,
                    color: [
                        [0, '#163d59'],
                        [0.5, '#163d59'],
                        [1, '#163d59'],
                    ],
                },
            },
            axisTick: {
                distance: -25,
                length: 10,
                splitNumber: 10,
                lineStyle: {
                    width: 1,
                    color: '#099fe4',
                },
            },
            splitLine: {
                distance: -35,
                length: 10,
                lineStyle: {
                    width: 2,
                    color: '#099fe4',
                },
            },
            axisLabel: {
                show: false,
            },
            anchor: {
                show: false,
            },
            title: {
                show: false,
            },
            detail: {
                show: false,
            },
            data: [],
        },
        {
            color: ['#15e1fc', '#12b795', '#1d8ac4', '#1cadfe'],
            name: '',
            type: 'pie',
            radius: ['50%', '65%'],
            center: ['40%', '50%'],
            startAngle: 150,
            avoidLabelOverlap: false,
            itemStyle: {
                // borderColor: '#122227',
                borderColor: 'transparent',
                borderWidth: 3,
            },
            labelLine: {
                length: 30,
            },
            label: {
                bleedMargin: 5,
                alignTo: 'labelLine',
                position: 'outer',
                formatter: '{a|{c}({d}%)}\n {per|{b}} ',
                backgroundColor: 'rgba(0, 0, 0, 0)',
                borderColor: 'rgba(0, 0, 0, 0)',
                borderWidth: 1,
                borderRadius: 4,

                rich: {
                    a: {
                        color: '#fff',
                        lineHeight: 26,
                        align: 'center',
                        fontSize: 12,
                    },
                    hr: {
                        borderColor: 'auto',
                        width: '100%',
                        borderWidth: 1,
                        height: 0,
                    },
                    per: {
                        color: '#1ef0ed',
                        backgroundColor: 'rgba(0, 0, 0, 0)',
                        padding: [5, 5],
                        borderRadius: 4,
                        fontSize: 12,
                    },
                },
            },
            data: [],
        },
    ],
};

option.series[1].data = data1