仪表1

描述:当前是关于Echarts图表中的 仪表盘 示例。
 
            option = {
            series: [{
                type: 'gauge',
                // 仪表最小值
                min: 0,
                // 仪表最大值
                max: 4,
                // 仪表开始角度
                startAngle: 200,
                // 仪表结束角度
                endAngle: -20,
                // 数据进程
                progress: {
                    show: true,
                    // 有数据的仪表宽度
                    width: 35,
                    itemStyle: {
                        // 有进度的仪表颜色
                        color: new echarts.graphic.LinearGradient(
                            0, 0, 1, 0,
                            [{
                                // 0%的时候
                                offset: 0,
                                color: '#04CBFD'
                            },
                            {   
                                // 100%的时候
                                offset: 1,
                                color: '#01AFF3'
                            }]
                        )
                    }
                },
                pointer: {
                    show: false
                },
                axisLine: {
                    show: true,
                    lineStyle: {
                        // 仪表的宽度
                        width: 35,
                        color: [
                            [1, {
                                // 仪表背景颜色
                                type: 'linear',
                                x: 0.5,
                                y: 0.5,
                                r: 0.5,
                                colorStops: [{
                                    offset: 0, color: '#1970CE' // 0% 处的颜色
                                }, {
                                    offset: 1, color: '#1970CE' // 100% 处的颜色
                                }],
                                globalCoord: false // 缺省为 false
                            }]
                        ]
                    }
                },
                axisTick: {
                    show: false
                },
                splitLine: {
                    show: false,
                    length: 15,
                    lineStyle: {
                        width: 2,
                        color: '#999'
                    }
                },
                // 仪表盘的刻度
            axisLabel: {
                show: true,
                color: "#fff",
                // 只显示最大刻度和最小刻度
                formatter: function (value) {
                    if (value == 0 || value == 4) {
                        return  value;
                    }else{
                        return null
                    }
                },
                distance: -30,
                padding: [20, 20, 20, 20],
            },
                anchor: {
                    show: false,
                    showAbove: true,
                    size: 25,
                    itemStyle: {
                        borderWidth: 10
                    }
                },
                title: {
                    show: false
                },
                detail: {
                    formatter: function (value) {
                    return  value + '分';
                },
                    valueAnimation: true,
                    fontSize: 30,
                    offsetCenter: [0, '0%'],
                    color:"#fff"
                },
                data: [{
                    value: 4
                }]
            }]
        };