vue使用echarts图表不显示问题

在update(){}中调用setOption即可解决问题

<template>
    <div id="chart" ref="histChart"></div>
</template>

<script>
import * as echarts from 'echarts'
export default {
  name: 'EchartMcHist',
  data() {
    return {
      chart: null,
      seriveData: [
        { district: '徐汇', A级: 43.3, B级: 85.8, C级: 93.7, D级: 100 },
        { district: '静安', A级: 83.1, B级: 73.4, C级: 55.1, D级: 100 },
        { district: '黄浦', A级: 86.4, B级: 65.2, C级: 82.5, D级: 100 },
        { district: '浦东新区', A级: 72.4, B级: 53.9, C级: 39.1, D级: 100 },
        { district: '宝山', A级: 83.1, B级: 73.4, C级: 55.1, D级: 100 }
      ]
    }
  },
  watch: {
    seriveData: {
      deep: true,
      handler() {
        this.updateChartView()
      }
    }
  },
  mounted() {
    this.chart = echarts.init(this.$refs.histChart)
    console.log(this.chart)
    this.updateChartView()
    window.addEventListener('resize', this.handleWindowResize)
  },
  updated() {
    this.updateChartView()
  },
  beforeDestroy() {
    window.removeEventListener('resize', this.handleWindowResize)
  },
  methods: {
    assembleDataToOption() {
      const option = {
        color: ['#5470c6', '#91cc75', '#fac858', '#ee6666'],
        grid: {
          left: 0,
          top: 35,
          bottom: 0,
          right: 0,
          containLabel: true,
        },
        legend: { right: 0, padding: 0 },
        tooltip: {},
        dataset: {
          dimensions: ['district', 'A级', 'B级', 'C级', 'D级'],
          source: []
        },
        xAxis: { type: 'category' },
        yAxis: {
          splitLine: {
            show: true,
            lineStyle: {
              type: 'dashed'
            }
          }
        },
        series: [{ type: 'bar', barWidth: 32, }, { type: 'bar', barWidth: 32, }, { type: 'bar', barWidth: 32, }, { type: 'bar', barWidth: 32, }]
      }
      option.dataset.source = this.seriveData
      return option
    },

    /**
     * 更新echart视图
     */
    updateChartView() {
      if (!this.chart) return
      const fullOption = this.assembleDataToOption()
      console.log(fullOption)
      this.chart.setOption(fullOption, true)
    },

    /**
     * 当窗口缩放时，echart动态调整自身大小
     */
    handleWindowResize() {
      if (!this.chart) return
      this.chart.resize()
    }
  }
}
</script>

<style scoped>
#chart {
  width: 100%;
  height: 100%;
}
</style>