场景描绘

咱们在项目中，许多时分都会运用echarts进行数据展现。
当没有数据的时分，echarts的展现就会特别的难看。
这个时分咱们就会优化界面的显现，在echarts中展现暂无数据。
有许多中方法：
1.只设置echarts中的title选项，其他挑选都不进行设置
2.在页面中运用v-show或许v-if。有数据的时分展现echarts，没有数据的时分运用其他作为提示
现在咱们运用第1种方法来看下，会呈现什么样的状况？

运用echarts中的title选项来处理暂无数据

代码功用描绘：
开始的时分是有数据的，点击按钮后会显现暂无数据。
然后再次点击，会有数据。以此循环

<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: ['卿卿日常', '琅琊榜', '仙剑奇侠传三', '射雕英雄传', '伪装者', '聊斋志异', '县委大院'],
        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 = {}
      //通过操控 indexOrder 来实现是否展现数据
      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: '暂无数据',
            x: 'center',
            y: 'center',
            textStyle: {
              fontSize: 16,
              fontWeight: 'normal',
            }
          }
        }
      }
      myChart1.setOption(option)
    },
  }
}
</script>

echarts设置暂无数据没有你想的那样简单

实际上遇见的状况

当咱们第2次点击按钮的时分。尽管视图上显现了"暂无数据"。
可是依然有图表展现的信息。与咱们开始的想法是相违背的。
它呈现了数据和"暂无数据"一起呈现了。咱们只期望呈现一种。
怎么会呈现这样的状况呢？不是应该只展现其中一种状况吗？

处理问题的三种方法

代码中的 myChart1.setOption(option)
默认状况ECharts 会兼并新的参数和数据，然后刷新图表。
当它兼并之后，就会呈现数据和"暂无数据"一起显现在界面中。
如何处理这样的状况呢？
1.运用 echarts中setOption(option,notMerge)的第二个参数来处理
chart.setOption(option, notMerge:boolean, lazyUpdate:boolean);
option 图表的装备项和数据
notMerge 可选，是否不跟之前设置的 option 进行兼并，默认为 false (即兼并)。
lazyUpdate 可选，在设置完 option 后是否不当即更新图表，默认为 false(即当即更新)。
2.echarts.clear() 清空当前实例，会移除实例中所有的组件和图表。
咱们能够在渲染图标前，先清空一下实例.
let myChart1 = echarts.init(document.getElementById('myChart1'))
myChart1.clear()
3.echarts.dispose()毁掉实例，毁掉后实例无法再被运用。
let myChart1 = echarts.init(document.getElementById('myChart1'))
myChart1.dispose()

echarts.clear() 与 echarts.dispose()的区别

echarts.clear()是清空实例，实例任然是存在的，类似于v-show
echarts.dispose()是毁掉，毁掉后实例不存在，类似于v-if

运用 echarts 中setOption(option,notMerge)的第二个参数来处理

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: '暂无数据',
        x: 'center',
        y: 'center',
        textStyle: {
          fontSize: 16,
          fontWeight: 'normal',
        }
      }
    }
  }
  //不进行兼并
  myChart1.setOption(option,true)
},

echarts设置暂无数据没有你想的那样简单

本文正在参与「金石计划 . 分割6万现金大奖」