<template>
  <div>
    <el-button @click="showEcharts">切換</el-button>
    <div id="myChart1"></div>
  </div>
</template>

<script>
import echarts from 'echarts'
export default {
  data() {
    return {
      backData: {
        dataX: ['卿卿日常', '瑯琊榜', '仙劍奇?zhèn)b傳三', '射雕英雄傳', '偽裝者', '聊齋志異', '縣委大院'],
        dataY:[820, 932, 901, 934, 1290, 1330, 1320]
      },
      indexOrder:1,   
    }
  },
  mounted() {
    this.showEcharts()
  },
  methods: {
    showEcharts() {
      this.indexOrder++
      let myChart1 = echarts.init(document.getElementById('myChart1'))
      let option = {}
      //通過(guò)控制 indexOrder 來(lái)實(shí)現(xiàn)是否展示數(shù)據(jù)
      if (this.indexOrder % 2 ==0) {
        option = {
          xAxis: {
            type: 'category',
            data: this.backData.dataX
          },
          yAxis: {
            type: 'value'
          },
          series: [
            {
              data: this.backData.dataY,
              type: 'line',
              smooth: true
            }
          ]
        }
      } else {
        option = {
          title: {
            text: '暫無(wú)數(shù)據(jù)',
            x: 'center',
            y: 'center',
            textStyle: {
              fontSize: 16,
              fontWeight: 'normal',
            }
          }
        }
      }
      myChart1.setOption(option)
    },
  }
}
</script>

echarts.clear()是清空實(shí)例，實(shí)例任然是存在的，類似于v-show
echarts.dispose()是銷毀，銷毀后實(shí)例不存在，類似于v-if

showEcharts() {
  this.indexOrder++
  let myChart1 = echarts.init(document.getElementById('myChart1'))
  let option = {}
  if (this.indexOrder % 2 ==0) {
    option = {
      xAxis: {
        type: 'category',
        data: this.backData.dataX
      },
      yAxis: {
        type: 'value'
      },
      series: [
        {
          data: this.backData.dataY,
          type: 'line',
          smooth: true
        }
      ]
    }
  } else {
    option = {
      title: {
        text: '暫無(wú)數(shù)據(jù)',
        x: 'center',
        y: 'center',
        textStyle: {
          fontSize: 16,
          fontWeight: 'normal',
        }
      }
    }
  }
  //不進(jìn)行合并
  myChart1.setOption(option,true)
},