Echarts在线免费图表

 
            

let colorList = ['#00C164', '#F59E2A', '#E12234'];

// 公用调整
let itemStyle = {
    normal: {
        borderColor: '#09141e',
        borderWidth: 8,
        color: function (params) {
            return colorList[params.dataIndex];
        },
    },
};

sum = 80
// 公用调整-end
const rich = {
    white: {
        fontSize: 50,
        color: '#fff',
        fontWeight: '500',
        padding: [-150, 0, 0, 0]
    },
    bule: {
        fontSize: 120,
        fontFamily: 'DINBold',
        color: '#fff',
        fontWeight: '700',
        padding: [-120, 0, 0, 0],
    },
    size: {
        height: 400,
        padding: [100, 0, 0, 0]
    }
}
const option = {
    backgroundColor: '#000',
    tooltip: {
        trigger: 'item',
    },
    title: {
        text: `{a|${sum}}{b|家}\n{c|检查企业}`,
        x: 'center',
        y: 'center',
        textStyle: {
            rich: {
                a: {
                    color: '#FFFFFF',
                    fontSize: '40',
                    fontFamily: 'OPPOSans-M'
                },
                b: {
                    fontSize: '16',
                    fontFamily: 'OPPOSans-R',
                    color: '#FFFFFF',
                    padding: [10, 0, 0, 10]
                },
                c: {
                    fontSize: '30',
                    fontFamily: 'SourceHanSansCN-Normal',
                    color: '#BDE7FA',
                    padding: [10, 0, 6, 0]
                }
            }
        }
    },

    series: [
        {
            // 数据
            type: 'pie',
            zlevel: 3,
            radius: ['45%', '60%'],
            center: ['50%', '50%'],
            itemStyle: itemStyle,
            emphasis: {
                //5.x版本使用悬浮放大
                scale: true,
                label: {
                    show: false /* 5.x版本是label.emphasis */,
                },
            },
            label: {
                show: false,
            },
            title: {
                show: true,
                color: '#fff',
                fontStyle: 'normal',
                fontWeight: 'normal',
                fontFamily: '微软雅黑',
                fontSize: 20,
            },
            data: [{ name: '红码', value: '20' }, { name: '黄码', value: '30' }, { name: '绿码', value: '30' },],

        },

        {
            name: '阴影圈',
            type: 'pie',
            radius: ['40.5%', '54%'],
            center: ['50%', '50%'],
            hoverAnimation: false,
            tooltip: {
                show: false
            },
            itemStyle: {
                normal: {
                    color: 'rgba(0, 0, 0, 0.6)',
                },
            },
            zlevel: 4,
            labelLine: {
                show: false,
            },
            data: [100],
        },
        //环形分割线
        {
            name: '分割线',
            type: 'gauge',
            radius: '42%', //配合splitLine里的length一起调
            clockwise: true,
            startAngle: 180, //刻度起始
            endAngle: -180, //刻度结束
            splitNumber: 40,
            center: ['50%', '50%'],
            zlevel: 2,
            axisLine: {
                lineStyle: {
                    width: 0,
                    opacity: 0,
                },
            },
            axisTick: {
                show: false,
            },
            splitLine: {
                show: true,
                length: 20, //配合radius一起调
                padding: [0, 0, 0],
                lineStyle: {
                    color: '#193759',
                    width: 2,
                },
            },
            axisLabel: {
                show: false,
            },
        },
    ],
};