iview-admin首页的图表数据渲染问题

news2024/11/19 7:40:55

iview-admin的首页有几个图表，应该是作者自己封装的，有个问题是在mounted时，从后台获取数据，应该把图表根据数据重新渲染一下。

<chart-bar id="myChart" style="height: 260px;" :value="barData" text="每周会员活跃量"/>

<script>
	mounted () {
	getActiveMemberData().then(res => {
	      this.barData= Array.from(res.data.body)
	    })
	}
</script>

以这个柱状图为例，在mounted赋值时，barData的值可以更新为新的，但是图表还是旧数据。
网上的解决方法包括使用this.set，但其实我试了，这是不生效的。也有用新增watch监听数据变化的方法，我用了，但是关键似乎也不在这里，所以我也pass了。

这是我的解决方法吧，抛砖引玉


<template>
	<div>
		<chart-bar id="myChart" style="height: 300px;" :value="barData" text="每周会员活跃量"/>
	</div>
</template>

<script>
data () {
    return {
    	barData: {
	        Mon: 10,
	        Tue: 52,
	        Wed: 200,
	        Thu: 334,
	        Fri: 390,
	        Sat: 330,
	        Sun: 220
      	},//原来的示例数据
      	activeDataa: [],//新数据放这里
	}
}  
methods: {  
	changeData () {
      this.$nextTick(() => {
        let xAxisData = Object.keys(this.value)
        let option = {
          title: {
            text: '每周会员活跃量',
            subtext: this.subtext,
            x: 'center'
          },
          xAxis: {
            type: 'category',
            data: xAxisData
          },
          yAxis: {
            type: 'value'
          },
          series: [{
            data: this.activeDataa,//赋值操作
            type: 'bar'
          }]
        }
        this.dom = echarts.init(document.getElementById('myChart'))//根据id获取dom
        this.dom.setOption(option, true)//这个true不要遗漏
        on(window, 'resize', this.resize)
      })
    },
},
mounted () {
	//这里是从后台获取数据
	getActiveMemberData().then(res => {
      this.activeDataa = Array.from(res.data.body)//根据自己情况处理后台返回来的数据
      this.changeData ()
    })
},
beforeDestroy () {
    off(window, 'resize', this.resize)
  }

</script>