对于Echarts实例化与销毁的一些运用

本篇文章比较浅显，主要写给想要快速直接上手数据可视化带Echarts图表项目的新人们。

1、实例化图表：setOption(Object option)

Object类型的参数 option，表示图表数据结构 ，形如：

var option  = {
               title: {
                  text: "我的第一个ECharts图表示例"
                },
                tooltip: {
                    trigger: 'axis'
                }
              };

在option里填好图表的各种参数，如type（图表类型，折现或柱状或饼图等等），data（图表数据）等等，这些具体参考官方文档。

然后将option注入图表中

let myChart.setOption(option)

---

2、清除或销毁图表，方法较多，列举几个：

①、refresh()

描述：刷新图表，图例选择、数据区域缩放，拖拽状态均保持。

myChart.refresh();

②、restore()

描述：还原图表，各种状态均被清除，还原为最初展现时的状态。

myChart.restore();

③、clear()

描述：清空绘画内容，清空后实例可用，因为并非释放示例的资源，释放资源我们需要dispose()

myChart.clear();

④、dispose()

描述：释放图表实例，释放后实例不再可用。

myChart.dispose();

---

我个人比较常用的是第③和第④种，类似我上篇文章提到的需要销毁/清空图表数据，使新注入的图表数据从0过渡到新数据，就可以用这种方法。
如果要不停清空再绘制，则用③，对浏览器负载小一些。
如果是直接销毁不需要重新绘制，则用④直接释放图表实例

// 重置水球图
upsetCharts() {
      if (this.myChart) {
        this.myChart.clear();
        // this.myChart.dispose();
      }
    });
}


mounted() {
  let self = this;
...
  self.upsetCharts(); // 加载前重置一下
  self.myChart.setOption(option)
}

---

3、根据标签的新宽高重新制定Echarts大小：resize()

运用在需要图表完成自适应的场景，比如浏览器页面窗口宽高改变时让图表自适应放大缩小。
这个在我上上篇文章已详细提到过，不再赘述。
传送门：https://blog.csdn.net/vvv3171071/article/details/122113138

---

4、最后附赠一个Echarts设置数据变化时过渡动画时长的属性
既然你点进了这篇文章，就说明你想完成销毁图表再重新实例化的操作，而伴随着这一系列操作，当然还需要美化一下图表过渡动画才能让用户体验更好呀~
以下是官方文档：

其中animationEasing是用来设置动画缓冲效果的，这个削微高级了写，可以参考这篇：

https://blog.csdn.net/ghj1976/article/details/5389086

如果只是想设置过渡动画时长，只设置animationDuration就可以了

option = {
          series: [
            {
              type: "liquidFill", // 高贵的水球图
              radius: "80%",
              data: [item.data],
              animationDuration: 1000, // 过渡动画时长，单位ms
            }
          ]
        }

---

最近调到新项目组后要接手好一阵子的数据可视化工程，估计最近出关于Echarts的文章会比较多吧。THX~