Echarts在线免费图表

 
            var data = {
    name: '维修任务进度',
    value: 95.2
}
option = {
    backgroundColor: '#07202A',
    title: {
        show: false,
        bottom: 0,
        textStyle: {
            color: '#fff',
            fontSize: 12
        }
    },
    series: [
        {
            name: '',
            type: 'gauge',
            splitNumber: 15, //刻度数量
            min: 0,
            max: 100,
            radius: '85%', //图表尺寸
            center: ['50%', '50%'],
            startAngle: 220,
            endAngle: -40,
            axisLine: {
                show: false,
                lineStyle: {
                    width: 0,
                    color: [
                        [data.value / 100, 'rgba(96, 244, 194, 1)'],
                        [1, '#104655']
                    ]
                }
            },
            axisTick: {
                show: true,
                lineStyle: {
                    width: 2,
                    shadowBlur: 0,
                    color: 'auto'
                },
                length: 10,
                splitNumber: 3
            },
            splitLine: {
                show: false,
                length: 20,
                lineStyle: {
                    color: 'auto'
                }
            },
            axisLabel: {
                show: false
            },
            pointer: { //仪表盘指针
                show: 0,
            },
            detail: {
                show: 0,
            },
            data: data
        },
        {
            name: '',
            type: 'gauge',
            splitNumber: 130, //刻度数量
            min: 0,
            max: 100,
            radius: '70%', //图表尺寸
            center: ['50%', '50%'],
            startAngle: 220,
            endAngle: -40,
            axisLine: {
                show: false,
                lineStyle: {
                    width: 0,
                    color: [
                        [data.value / 100, 'rgba(12, 40, 68, 1)'],
                        [1, 'rgba(12, 40, 68, 1)']
                    ]
                }
            },
            axisTick: {
                show: true,
                lineStyle: {
                    width: 2,
                    shadowBlur: 0,
                    color: 'auto'
                },
                length: 10,
                splitNumber: 3
            },
            splitLine: {
                show: false,
                length: 20,
                lineStyle: {
                    color: 'auto'
                }
            },
            axisLabel: {
                show: false
            },
            pointer: { //仪表盘指针
                show: 0,
            },
            detail: {
                borderColor: '#fff',
                shadowColor: '#fff', //默认透明
                shadowBlur: 2,
                offsetCenter: [0, '20%'], // x, y，单位px
                textStyle: { // 其余属性默认使用全局文本样式，详见TEXTSTYLE
                    color: 'rgba(96, 244, 194, 1)',
                    fontSize: 44,
                },
                formatter: function(){
                    return data.value + '\n{a|%}'
                },
                rich:{
                    a:{
                        color: "#fff",
                        fontSize: 16,
                        lineHeight: 40
                    }
                }
            },
            data: data
        }
    ]
};