vue.js中使用echarts实现数据动态刷新功能

在vue使用echarts时，可能会遇到这样的问题，就是数据变化时，echarts不更新

这是因为Echarts是数据驱动的，这意味着只要我们重新设置数据，那么图表就会随之重新渲染

如果想要支持数据的自动刷新，必然需要一个监听器能够实时监听到数据的变化然后告知Echarts重新设置数据。

Vue提供了“watch”：

    <v-chart :options="options" :auto-resize="true" style="height: 500pxwidth: 100%">

export default {

// 父组件传递过来的数据 （两种方式声明：1.数组 2.对象）

  props: {

titleText: {

type:String,

      default: () =>{

return '2019 前三季度达标率统计'

      }

}, // 图表名称

    isPercentage: {

type:Boolean

    }, // 是否是%

    xAxisData: {

type:Array,

      default: () =>{

return ['兰州市', '嘉峪关市', '金昌市', '白银市', '天水市', '威武市', '庆阳市']

}

},

    seriesData: {

type:Array,

      default: () =>{

return [100, 100, 17, 100, 100, 100, 17]

}

}

},

  // 数据

  data() {

return {

title:'',

      options: {}

}

},

  // 要用到哪些子组件

  components: {},

  // 计算属性

  computed: {},

  // 监听

  watch: {

seriesData: {

handler(newName, oldName) {

if (oldName) {

this.setOptions()

}

},

      immediate:true,

      deep:true

    }

},

  // 生命周期钩子：实例初始化之后，数据观测(data observer) 和 event/watcher 事件配置之前被调用

  created() {

},

  // 生命周期钩子：组件实例渲染完成时调用

  mounted() {

this.setOptions()

},

  // 函数集，

  methods: {

setOptions() {

this.options = {

title: {

text:this.titleText,

          left:'center'

        },

        color:this.$config.chartsColor,

        tooltip: {

trigger:'axis',

          axisPointer: {// 坐标轴指示器，坐标轴触发有效

            type:'shadow' // 默认为直线，可选为：'line' | 'shadow'

          }

},

        grid: {

left:'3%',

          right:'4%',

          bottom:'3%',

          containLabel:true

        },

        xAxis: [

{

type:'category',

            data:this.xAxisData,

            axisTick: {

alignWithLabel:true

            }

}

],

        yAxis: [

{

type:'value',

            axisLabel: {

formatter:this.isPercentage ?'{value} %' :'{value}'

            }

}

],

        series: [

{

name:'直接访问',

            type:'bar',

            barWidth:'38%',

            data:this.seriesData,

            label: {

show:true,

              position:'inside',

              formatter: (params) =>{

return `${params.value}%`

              }

}

}

]

}

}

}

}

主要在watch中监听事件，发生变化时，setOptions

---