Echarts在线免费图表

 
            data = [
        {
            value: 100,
            name: '在库数量',
        },
        {
            value: 100,
            name: '使用中',
        },
        {
            value: 90,
            name: '报废处理',
        },
        {
            value: 90,
            name: '维修数量',
        },
    ],
    option = {
        backgroundColor: '#022457',
        color: ['#2BFEFE', '#00F788', '#F3BE07','#F47F53'],
        
        legend: {
            top: 'center',
            right: 100,
            icon: 'circle',
            orient: 'vertical',
            itemWidth:8,
            itemGap: 30,
            formatter: (name) => {
                const item = data.filter((item) => item.name === name)[0];
                option.legend.textStyle.rich.value.color = '#1fe5ea';
                    return '{title|' + name + '}{value|' + item.value + '}';
            },
            textStyle: {
                rich: {
                    title: {
                        color: '#CBEAFF',
                        fontSize: 20,
                        padding:[3,0],
                        width:100,
                        fontSize:14
                    },
                    value: {
                        fontSize: 22,
                        lineHeight: 20,
                        width:40,
                         align: 'right',
                        color: '#fff',
                        fontSize:18
                    },
                },
            },
            data: data,
        },
        series: [
            //环形
            {
                name: '基础饼图',
                type: 'pie',
                clockwise:false,
                startAngle:0,
                radius: ['45%', '52%'],
                center: ['25%', '50%'],
                hoverAnimation: false,
                label: {
                    normal: {
                        show: false,
                    },
                    emphasis: {
                        show: false,
                    },
                },
                zlevel: 1,
                labelLine: {
                    normal: {
                        show: false,
                    },
                },
                data: data,
            },
            //环形分割线
            {
                name: '分割线',
                type: 'gauge',
                radius: '55%',
                clockwise: true,
                startAngle: '90',
                center: ['25%', '50%'],
                startAngle:0,
                endAngle: '-360',
                splitNumber: 50,
                zlevel: 2,
                detail: {
                    offsetCenter: [10, 20],
                    formatter: ' ',
                },
                axisLine: {
                    lineStyle: {
                        width: 0,
                        opacity: 0,
                    },
                },
                axisTick: {
                    show: false,
                },
                markArea: {
                    itemStyle: {
                        color: '#0f0',
                    },
                },
                splitLine: {
                    show: true,
                    length: 32,
                    padding: [0, 0, 0],
                    lineStyle: {
                        color: '#022457',
                        width: 3,
                    },
                },
                axisLabel: {
                    show: false,
                },
            },
        ],
    };