仪表盘

描述:当前是关于Echarts图表中的 仪表盘 示例。
 
            var value = 100; // 0-100之间
option = {
    title: {
        show: false,
        text: value+'%',
        x: '49%',
        y: '50%',
        z: 8,
        textAlign: 'center',
        textStyle: {
            color: ' rgb(147,169,205) ',
            fontSize: 26,
        }
    },
    series: [{
        name: "原图",
        type: "gauge",
        radius: '60%',
        center: ['50%', '70%'],
        startAngle: 200,
        endAngle: -20,
        splitNumber: 10,
        axisLine: {
            lineStyle: {
                color: [
                    [value / 100, '#FFF4DD'],
                    [1, "transparent"]
                ],
                width: 14,
                shadowColor:'rgb(0, 90, 160, 0.52)',
                shadowBlur:10,
            }
        },
        axisLabel: {
            show: false,
        },
        axisTick: {
            show: false,

        },
        splitLine: {
            show: false,
        },
        detail: {
            show: false
        },
        pointer: {
                show:true,
                width:  10,
                length: '70%',
                itemStyle: {
                    color: '#DE585D',
                }
            },
        data: [{
                value: value,
                //name: '两区面积'
            }],
        itemStyle: {
                color: '#BAF6FF',
                shadowColor: 'rgb(0, 90, 160, 0.52)',
                shadowBlur: 10,
                shadowOffsetX: 2,
                shadowOffsetY: 2
            },
    },{
        name: "外图",
        type: "gauge",
        radius: '64%',
        center: ['50%', '70%'],
        startAngle: -20,
        endAngle: -60,
        splitNumber: 10,
        axisLine: {
            lineStyle: {
                color: [
                    [3 / 100, '#FFF4DD'],
                    [1, "transparent"]
                ],
                width: 50,
                shadowColor:'rgb(0, 90, 160, 0.52)',
                shadowBlur:10,
            }
        },
        axisLabel: {
            show: false,
        },
        axisTick: {
            show: false,

        },
        splitLine: {
            show: false,
        },
        detail: {
            show: false
        },
        pointer: {
            show: false,
        },
    }
    ]
}