Vue中ECharts的视图刷新

问题描述

在Vue中使用ECharts作为数据可视化的时候会出现数据改变但ECharts并没有更新视图，于是就需要我们手动进行更新。

解决方法

最简单的方法就是重新进行绘制。

代码实现

Echarts.vue

<template>
  <div id="myChart" style="width: 95%; height: 400px" />
</template>

<script>
const echarts = require('echarts/lib/echarts')
// 引入柱状图
require('echarts/lib/chart/bar')
// 引入提示框和标题组件
require('echarts/lib/component/tooltip')
require('echarts/lib/component/title')

export default {
  name: 'Echarts',
  props: {
    chartData: {
      type: Object
    }
  },
  mounted() {
    this.drawLine()
  },
  methods: {
    drawLine() {
      // 基于准备好的dom，初始化echarts实例
      const myChart = echarts.init(document.getElementById('myChart'))
      const option = {
        color: ['#3398DB'],
        backgroundColor: '#fff',
        tooltip: {
          trigger: 'axis',
          axisPointer: { // 坐标轴指示器，坐标轴触发有效
            type: 'shadow' // 默认为直线，可选为：'line' | 'shadow'
          }
        },
        grid: {
          left: '3%',
          right: '4%',
          bottom: '3%',
          width: '90%',
          containLabel: true
        },
        xAxis: [
          {
            type: 'category',
            data: this.chartData.date,
            axisTick: {
              alignWithLabel: true
            }
          }
        ],
        yAxis: [
          {
            type: 'value'
          }
        ],
        series: [
          {
            name: this.chartData.title,
            type: 'bar',
            barWidth: '60%',
            data: this.chartData.data
          }
        ]
      }
      // 绘制图表
      myChart.setOption(option, true)
    }
  }
}
</script>

<style scoped>

</style>

父组件

<template>
	<!--H5代码-->
	<echarts ref="chart" :chart-data="chartData" />
	<!--H5代码-->
</template>

<script>
	import echarts from './module/echarts'
	data() {
    	return {
    		chartData: {
        		title: '', //标题
        		date: [], //x轴名称，
        		data: [] //数据
      		}
		}
	}，
	methods: {
		changeData() {
			this.$refs.chart.drawLine() //调用ECharts的方法重新绘制
		}
	}
</script>