【echarts】图表清空，重新渲染数据

需求：

笔者在echarts图型中，随着点击不同按钮，echarts图型里的数值随着变化

问题

点击不同按钮，echarts图型里的数值进行了替换，奇怪的是，有的按钮可以，有的就不行（点击按钮后，获取的数据为空时，图型不会清空，存在显示之前的数据）

排查分析

经过排查返回的数据是没问题的，只能是渲染问题，发现出现这种问题，刷新就好了，不能老是刷浏览器吧，只能重新渲染才可以。那我们重新渲染DOM不就行了么，尝试用了this.$nextTick(() => { 渲染事件 })方法，发现是无效的。该方法只对DOM有效，对echarts是无效的。

解决方案

chart.clear(); 销毁图标
option &mycharts.option(option, true); 重新渲染图标数值
chart.restore(); 恢复之前的数值
//

详细说明

var chartDom = document.getElementById('echarts');
var myChart = echarts.init(chartDom);
var option = {
	......
}
option && myChart.setOption(option, true);

chart.clear()
// 清空图标，重新渲染加载
option &mycharts.option(option, false)
// option &mycharts.option(option, false) 渲染效果为将之前图表数值和本次渲染数值合并（新旧数值合并）；
option &mycharts.option(option, true)
// option &mycharts.option(option, true) 渲染效果为  只展示本次数值，旧数值会清空；

写法1：myChart.clear();

var chartDom = document.getElementById('echarts');
var myChart = echarts.init(chartDom);
myChart.clear();  // 清空图表，重新渲染图表
var option = {
	......
}
option && myChart.setOption(option);

写法2：option && myChart.setOption(option, true);

var chartDom = document.getElementById('echarts');
var myChart = echarts.init(chartDom);
var option = {
	......
}
option && myChart.setOption(option, true);  // 这里只是重新渲染图表数值