vue中用echarts 动态刷新数据没变化解决

Posted 2023-03-02

参考技术A     <v-chart :options="options" :auto-resize="true" style="height: 500px; width: 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