Vue整合Echart时异步调用热力图不显示

Question

Vue整合Echart时异步调用也不显示结果
前端代码：

<template>
  <div class="app-container">
    <div :id="id" style="width :1000px;height:800px;" />
  </div>
</template>

<script>
import { getDrillImg } from '@/api/echart'

export default {
  data() {
    return {
      chart: null,
      list: [],
      id: 'heatmap'
    }
  },
  mounted() {
    this.fetchData()
  },
  beforeDestroy() {
    if (!this.chart) {
      return
    }
    this.chart.dispose()
    this.chart = null
  },
  methods: {
    initChart() {
      this.chart = this.$echarts.init(document.getElementById(this.id))
      this.chart.setOption({
        tooltip: {},
        xAxis: {
          type: 'category',
          data: [0, 30, 230, 430, 630, 830, 1030, 1230, 1430, 1630, 1830]
        },
        yAxis: {
          type: 'category',
          data: [0, 200, 400, 600, 800, 1000, 1200, 1400, 1600, 1800]
        },
        visualMap: {
          min: 0,
          max: 15000,
          calculable: true,
          realtime: false,
          inRange: {
            color: ['#313695', '#4575b4', '#74add1', '#abd9e9', '#e0f3f8', '#ffffbf', '#fee090', '#fdae61', '#f46d43', '#d73027', '#a50026']
          }
        },
        series: [{
          name: 'Gaussian',
          type: 'heatmap',
          data: this.list,
          emphasis: {
            itemStyle: {
              borderColor: '#333',
              borderWidth: 1
            }
          },
          progressive: 1000,
          animation: false
        }]
      })
      console.log(this.chart.getOption())
    },
    fetchData() {
      getDrillImg().then(res => {
        this.list = res.data
        console.log(this.list)
        this.initChart()
      })
    }
  }
}
</script>

现象：

Answer 1

可能数据有问题，你取=去官网找一个示例，把他的数据复制进来看看你可不可以