ECharts：显示暂无数据

        ECharts 是一个使用 JavaScript 实现的开源可视化库，涵盖各行业图表，满足各种需求，实现各种炫酷的统计图表效果。

        如上图所示，有数据的时候固然好看，但是当它没有数据的时候，就是光秃秃的一片，所以很多时候会有显示“暂无数据”的需求。具体如何实现呢？

实现思路

逻辑误区

在结合Vue、React等前端框架开发时，很容易陷入到v-show/v-if解决这种条件渲染的思维逻辑中，所以很容易会想到，使用两个DOM元素，一个作为ECharts图表的绘制容器；另一个作为“暂无数据”文字的承载容器，然后将两者的CSS样式设置为相同的，最后使用v-show或者v-if进行“条件渲染”即可。

        这种思路其实是不可取的，先来分析一下存在的问题：

【1】v-show：底层是对display:“none”的实现，只是简单的基于CSS的条件渲染，并没有真正意义上的销毁DOM元素，换句话说：DOM元素依旧还占据着原来的位置，从页面布局上来讲就是不合理的；

【2】v-if：底层是基于DOM API对元素本身的添加append和卸载remove操作，存在一个局部性的装载/卸载的过程，逻辑上是行得通的；但是DOM元素来回的加载和卸载，存在更高的性能消耗。并且，v-if和echarts图表一起使用，稍有不慎就会遇到找不到DOM容器的报错。

ECharts：借助setOption()万能接口实现

在进行ECharts的数据替换或者说是图表刷新时，我们经常性的回去重置options配置对象。

        以上操作的可借鉴之处在于：options本身就决定了图表本身显示的内容，可以直接替换掉原来的options，让它只显示四个文字“暂无数据”即可。

        ECharts称setOption方法为“万能方法”，

(option: Object, notMerge?: boolean, lazyUpdate?: boolean)
or
(option: Object, opts?: {
    notMerge?: boolean;
    replaceMerge?: string | string[];
    lazyUpdate?: boolean;
})

        有一个关键的注意点：ECharts图标实例会自动合并前后设置进去的options对象，所以，我们还要想办法让它不合并。

设置图表实例的配置项以及数据，万能接口，所有参数和数据的修改都可以通过 setOption 完成，ECharts 会合并新的参数和数据，然后刷新图表。如果开启动画的话，ECharts 找到两组数据之间的差异然后通过合适的动画去表现数据的变化。

setOption可选参数

 

        ECharts官网文档给出了解释：

①notMerge：设置为true，就可以避免多个options配置项之间的自动合并。

②lazyUpdate：避免同步更新，延迟到下一帧画面采取更新，暂时将其归属到性能优化的范畴。

示例代码：

        整理完思路之后，我们来写一个示例代码，

const dataList = [];
const flag = Array.isArray(dataList) && dataList.length != 0;
const containerDom = document.getElementById(containerId);
if (!!containerDom === false) return;
var myChart = echarts.init(containerDom);
//options配置项
let options = {}
if(flag){
    //如果有数据,设置options（可以在data里面定义一个全局的模板,只做局部替换即可）
    options = {
        //TODO:图表配置,略...
    }
}else{
    //没有数据或者数据不合法,显示暂无数据
    option = {
          title: {
            text: '暂无数据',
            x: 'center',
            y: 'center',
            textStyle: {
              fontFamily: 'Manteka',
              fontSize: '12',
              fontWeight: 'normal',
              color: '#fff'
            }
          }
        }
      }
}       
// 使用刚指定的配置项和数据显示图表-参数2设置为true,避免多个版本的options自动合并
myChart.setOption(option, true);