echarts仪表盘完整代码

var option = { backgroundColor: '#00162a', title: [{ x: "40%", y: "53%", text: '主干道平均车速:36km/h', textStyle: { fontWei...

attachments-2020-06-ETbFXWeE5ef316a393ec0.png


var option = {
    backgroundColor: '#00162a',
    title: [{
        x: "40%",
        y: "53%",
        text: '主干道平均车速:36km/h',
        textStyle: {
            fontWeight: 'normal',
            fontSize: 16,
            color: "#fff"
        },
    }],
    series: [
        {
            name: "",
            type: 'gauge',
            min: 0,
            max: 10,
            radius: "80%",
            splitNumber: 1, //刻度数量
            startAngle: 180,
            endAngle: 0,
            axisLine: { // 坐标轴线
                lineStyle: { // 属性lineStyle控制线条样式
                    width: 60,
                    color: [
                        [1, new echarts.graphic.LinearGradient(0, 0, 1, 0, [{
                            offset: 0,
                            color: '#3aa600'
                        }, {
                            offset: 1,
                            color: '#f70700'
                        }])]
                    ],
                }
            },
            splitLine: {
                show: false,
            },
            axisLabel: {
                show: true,
                color: "#fff",
                formatter: "{value}",
                distance: 40,
                padding: [-20, 0, 0, 0],
                fontSize: 16
            },

            axisTick: {
                show: false
            },
            pointer: {
                show: true,
                length: '82%',
                width: 2,
            },
            itemStyle: {
                color: '#0782f9'
            },
            title: {
                show: false,
            },
            detail: {
                offsetCenter: [0, '-35%'],
                textStyle: {
                    color: '#8bd100',
                    fontSize: 48,
                    fontWeight: 500
                }
            },
            data: [{
                value: 3.5, //指针数值
            }]

        },
        {
            name: '拥堵程度',
            type: 'gauge',
            z: 2,
            min: 0,
            max: 10,
            splitNumber: 25,
            startAngle: 0,
            endAngle: 180,
            radius: '80%',
            axisLine: {
                show: false,
                lineStyle: {
                    width: 0
                }
            },
            axisTick: {
                show: false,
            },
            axisLabel: {
                show: true,
                color: '#ffffff',
                fontSize: 14,
                rotate: '40',
                formatter: function(e) {
                    switch (e + "") {
                        case "0.8":
                            return "畅";
                        case "1.2":
                            return "通";
                        case "2.4":
                            return "轻";
                        case "2.8":
                            return "度";
                        case "3.2":
                            return "拥";
                        case "3.6":
                            return "堵";
                        case "4.4":
                            return "中";
                        case "4.8":
                            return "度";
                        case "5.2":
                            return "拥";
                        case "5.6":
                            return "堵";
                        case "6.4":
                            return "中";
                        case "6.8":
                            return "度";
                        case "7.2":
                            return "拥";
                        case "7.6":
                            return "堵";
                        case "8.4":
                            return "严";
                        case "8.8":
                            return "重";
                        case "9.2":
                            return "拥";
                        case "9.6":
                            return "堵";
//                                    default:
//                                        return e;
                    }
                },
            },
            splitLine: { // 分隔线
                show: false,
                length: 19,
                lineStyle: { // 属性lineStyle(详见lineStyle)控制线条样式
                    color: 'blue',
                    width: 1
                }

            },
            detail: {
                show: false,
            },
            data: [],
            clockwise: false
        },
        {
            name: '刻度',
            type: 'gauge',
            radius: "80%",
            startAngle: 144,
            endAngle: 36,
            center: ['50%', '50%'],
            min: 2,
            max: 8,
            splitNumber: 3,
            axisLine: { // 坐标轴线
                lineStyle: { // 属性lineStyle控制线条样式
                    width: 60,
                    color: [
                        [1, 'rgba(0,0,0,0)']
                    ]
                }
            },
            axisLabel: {
                show: true,
                fontSize: 18,
                color: '#ffffff'
            },
            axisTick: {
                show: false,
                splitNumber: 10,
                lineStyle: {
                    color: '#707070', //用颜色渐变函数不起作用
                    width: 1
                },
                length: -10
            },
            splitLine: {
                show: true, //改1
                length: 62,
                lineStyle: { // 属性lineStyle(详见lineStyle)控制线条样式
                    color: '#ffffff',
                    width: 1
                }
            },
            pointer: {
                show: false
            }
        },
        {
            "name": '指针小圆形', //装饰作用
            "type": 'pie',
            "hoverAnimation": false,
            "legendHoverLink": false,
            "radius": ['0%', '1%'],
            "center": ['50%', '50%'],
            "z": 10,
            "label": {
                "normal": {
                    "show": false,
                    "position": 'center'
                },
                "emphasis": {
                    "show": false
                }
            },
            "labelLine": {
                "normal": {
                    "show": false
                }
            },
            "data": [{
                "value": 0,
                "name": '1',
                itemStyle: {
                    normal: {
                        color: "red"
                    }
                }
            }, {
                "value": 100,
                "name": '2',
                itemStyle: {
                    normal: {
                        color: "#0782f9"
                    },
                    emphasis: {
                        color: "#0782f9"
                    }
                }
            }]
        },
        {
            name: '外层辅助线',
            type: 'gauge',
            z: 1,
            min: 0,
            max: 10,
            splitNumber: 5,
            startAngle: 0,
            endAngle: 180,
            radius: '85%',
            axisLine: { // 坐标轴线
                lineStyle: { // 属性lineStyle控制线条样式
                    width: 4,
                    color: [
                        [1, '#0666c9']
                    ],
                    opacity: 1
                }
            },
            axisTick: {
                show: false
            },
            axisLabel: {
                show: false,
            },
            splitLine: { // 分隔线
                show: false,
                length: 15,
            },
            detail: {
                show: false,
            },
            data: [],
            clockwise: false
        },
        {
            "name": '背景',
            "type": 'pie',
            "hoverAnimation": false,
            "legendHoverLink": false,
            radius: '66%',
            center: ['50%', '50%'],
            "z": 0,
            "startAngle": 180,
            "label": {
                "normal": {
                    "show": false,
                    "position": 'center'
                },
                "emphasis": {
                    "show": false,

                }
            },
            "labelLine": {
                "normal": {
                    "show": false
                }
            },
            "data": [{
                "value": 50,
                "name": '1',
                itemStyle: {
                    normal: {
                        color: "#021a30"
                    },
                }
            }, {
                "value": 50,
                "name": '2',
                itemStyle: {
                    normal: {
                        color: "rgba(0,0,0,0)"
                    }
                }
            }]
        },
    ]
};


你可能感兴趣的文章

相关问题

0 条评论

请先 登录 后评论
admin
admin

578 篇文章

作家榜 »

  1. admin 578 文章
  2. 粪斗 185 文章
  3. 王凯 92 文章
  4. 廖雪 78 文章
  5. 牟雪峰 12 文章
  6. 李沁雪 9 文章
  7. 全易 2 文章
  8. quanyi 0 文章