仪表3

描述:当前是关于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,
                            [{
                                offset: 0,
                                color: '#41CDCD'
                            },
                            {
                                offset: 0.5,
                                color: '#F3E92E'
                            },{
                                offset: 1,
                                color: '#41CDCD'
                            }]
                        )
                    }
                },
                pointer: {
                    show: false
                },
                axisLine: {
                    // show: false,
                    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 + '.0分';
                    },
                    valueAnimation: true,
                    fontSize: 30,
                    offsetCenter: [0, '0%'],
                    color: "#fff"
                },
                data: [{
                    value: 3.0,
                }]
            }]
        };