vue中使用仪表盘，定时器及时更新数据

<!-- 仪表盘  定义 div -->
 <div id="studyEcharts" style="width:450px; height:450px;position: relative;"></div>

//  指针赋值是数字  data里定义变量    percentage: 0

// 仪表盘  事件
drawMemoryTop() {
    this.myECharts = this.$echarts.init(document.getElementById('studyEcharts'));
    this.setOptions()
},
setOptions(val = 1) {
    this.myECharts.setOption({
        tooltip: {
            formatter: '{a} <br/>{b} : {c}%'
        },
        toolbox: {
            feature: {
                restore: {},
                saveAsImage: {}
            }
        },
        series: [
            {
                name: '',
                type: 'gauge',
                detail: { formatter: '{value}%' },
                data: [
                    {
                        value: val,
                        name: ''
                    }
                ],
                axisLine: {
                    show: true,
                    lineStyle: {
                        color: [
                            [1, new echarts.graphic.LinearGradient(0, 0, 1, 0, [
                                {
                                    offset: 0,
                                    color: '#009393'
                                },
                                {
                                    offset: 1,
                                    color: '#0080ff'
                                }
                            ])
                            ]
                        ]
                    }
                }
            }]
    })
},

 

// 项目中轮循是一直走的  所以在watch里监听变量的变化  及时赋值给仪表盘

watch: {
    percentage: {
        handler(newValue, oldValue) {
            this.percentage = newValue
            this.setOptions(newValue)
        },
        deep: true// 对象内部的属性监听，也叫深度监听
    }
}

踩坑：1.仪表盘不显示，仪表盘在页面中的显示隐藏  用了v-if，这里使用v-show。2.重新刷新页面  给仪表盘传的数据 val  会打印一个undefined，导致控制台报错，这里过滤掉undefined，所以设置了默认值1.

注：此为简单的记录，本人提升空间还很大，欢迎多多指点