Vue中使用echarts实现仪表盘

实现效果：

echarts使用说明请查看：Vue中使用echarts实现常用图表总结

option配置：

option = {
    tooltip: {
        formatter: '{a} <br/>{b} : {c}%'
    },
    toolbox: {
        feature: {
            restore: {},
            saveAsImage: {}
        }
    },
    series: [
        {
            axisLine:{
                show: true,
                lineStyle: {
                    color: [
                    [1, new echarts.graphic.LinearGradient(0, 0, 1, 0, [
                      {
                        offset: 0.1,
                        color: "#4ed6b3"
                      },
                      {
                        offset: 0.5,
                        color: "#b2df6b"
                      }
                    ])
                  ]
                ],
                width: 23
                }
            },
            name: '温度',
            type: 'gauge',
            radius: '40%',
            max: 50,
            startAngle: 180, //开始角度 左侧角度
            endAngle: 0, //结束角度 右侧
            splitNumber: 6,
            axisTick: {
              show: false
            },
            axisLabel: {
              show: false
            },
            pointer: {
                length: '45%',
                width: 3
            },
            itemStyle: {
                color: '#2adff1'
            },
            detail: 
                {
                    formatter: '{value}°C',
                    offsetCenter: [0, '-120px'],
                    fontSize: 30,
                    lineHeight: 24,
                    color: 'auto'
                },
            data: [
                {
                    value: 26.3, 
                }]
        }
    ]
};

setInterval(function () {
    option.series[0].data[0].value = (Math.random() * 100).toFixed(2) - 0;
    myChart.setOption(option, true);
},2000);

如果大家想一起交流学习，共同进步，欢迎搜索公众号“是日前端”，输入关键词如：前端基础，获取资料，资料刚开始整理，目前还在完善中，点击交流群按钮进交流群，群里仅限技术交流、面试交流等，需要其它相关资料可以群里说，后续交流群人数增多会考虑特色内容，再次感谢大家的支持~