Echarts在线免费图表

 
            let ValueData = [
    { "name": "工单数", "value": [0, 0], targetValue: 10 },
    { "name": "开工数", "value": [0, 1], targetValue: 10 },
    { "name": "上工人数", "value": [0, 2], targetValue: 10 },
];
let Ydata = [1, 2, 3];

option = {
    backgroundColor: '#0d1e1a',

    grid:{
        left:'90%',
        top: '20%',
        bottom: '20%'
    },
    yAxis: [
        {
            type: 'category',
            boundaryGap: false,
            show: false,
            //这里按照同一工序有多个子工序的最大值取个数
            data: [1, 2, 3],
        },
    ],
    xAxis: {
        type: 'category',
        show: false,
        data: [],
    },
    series: [
        {
            type: 'gauge',
            center: ['45%', '50%'],
            radius: '60%',
            min: 0,
            max: 100,
            splitNumber: 20,
            startAngle: 220,
            endAngle: -40,
            axisLine: {
                show: true,
                lineStyle: {
                    width: 1,
                    color: [
                        [1, 'rgba(0,0,0,0)']
                    ]
                }
            },
            axisLabel: {
                show: true,
                color: '#4d5bd1',
                textStyle: {
                    fontWeight: 'bold',
                    fontSize: 18,
                    color: '#7789AA',
                },
                distance: 25,
                formatter: function (value) {
                    return value % 10 == 0 ? value : '';
                }
            },
            axisTick: {
                show: true,
                splitNumber: 1,
                lineStyle: {
                    color: '#4673B6',
                    width: 25,
                },
                length: -5
            },
            splitLine: {
                show: false,
                length: -15,
            },
            detail: {
                show: false
            },
            pointer: {
                show: false
            }
        },
        {
            type: "gauge",
            radius: '80%',
            center: ['45%', '50%'],
            startAngle: 220,
            endAngle: -40,
            axisLine: {
                show: true,
                lineStyle: {
                    width: 50,
                    color: [
                        [
                            1, new echarts.graphic.LinearGradient(
                                0, 0, 1, 0, [{
                                    offset: 0,
                                    color: '#F3CE52',
                                },
                                {
                                    offset: 0.25,
                                    color: '#50B05C'
                                },
                                {
                                    offset: 0.5,
                                    color: '#3DBBD2',
                                },
                                {
                                    offset: 0.75,
                                    color: '#48AA3A'
                                },
                                {
                                    offset: 1,
                                    color: '#F4E349'
                                }
                            ]
                            )
                        ],
                    ],
                },
            },
            //分隔线样式。
            splitLine: {
                show: false,
            },
            axisLabel: {
                show: false,
            },
            axisTick: {
                show: false,
            },
            pointer: {
                show: true,
                length: "80%",
                width: "2%",
            },
            //仪表盘详情，用于显示数据。
            detail: {
                show: true,
                offsetCenter: [0, "40%"],
                color: "#ffffff",
                textStyle: {
                    fontSize: 60,
                    color: "#F8E44E"
                },
            },
            data: [{
                value: 30,
            },],
        },
        {
            type: 'graph',
            layout: 'none',
            coordinateSystem: 'cartesian2d',
            symbolKeepAspect: false,
            symbol: 'rect',
            symbolSize: [130, 120],
            gridIndex: 0,
            label: {
                show: true,
                formatter: (params) => {
                    return `{title|${params.name}}\n{value|${ValueData[params.dataIndex].targetValue}}`
                },
                rich: {
                    title: {
                        color: '#3DBBD3',
                        align: 'center'
                    },
                    value: {
                        color: '#F3E953',
                        align: 'center'
                    },
                }
            },
            edgeSymbol: ['circle', 'arrow'],
            edgeSymbolSize: [2, 5],
            data: ValueData,
            links: [],
            lineStyle: {
                normal: {
                    color: '#2f4554',
                },
            },
            itemStyle: {
                color: "rgba(16,39,70,0.8)"
            }
        },
    ],
};