vue使用echarts的一些注意事项

刚开始写echarts，总结了一些注意事项，欢迎补充。

1. 页面中渲染不止一个echarts图表，故全局设置一个数组用来保存所有的echarts实例对象。这样，在页面销毁的时候，可以通过遍历该列表逐一销毁所有的图表实例；
2. 页面销毁时，记得通过dispose销毁实例；
3. 一般我们的图表数据都是异步获取的，有可能数据是空，所以需要占位图替代echarts图表。
   3.1 这样的话，先在接口返回逻辑中判断是否有数据，没有的话直接展示占位图，不用再执行实例化echarts的逻辑。算是一个优化操作。
   3.2 页面上通过v-if写两块展示逻辑，默认展示占位图，这样防止页面出现闪现echarts的问题。
   3.4 如果有数据，那么展示echarts图表。但是由于我们一开始默认v-if展示占位图，导致页面图表部分的dom可能还没挂载，因此获取到数据后，需要nextTick()更新dom，然后再init echarts。
4. 监听页面的 resize 事件

更新：

1. 页面卸载销毁echarts图表，放在vue生命周期的unBeforeMount()中。
2. 页面上存在多个图表，使用数组保存，数组变量无需使用响应式数组。

<template>
<div>
    <template v-if="hasNoData">
        // 占位图
    </template>
     <template v-else>
        <div ref="ref1"> </div>
        <div ref="ref2"> </div>
    </template>
</div>
</template>

// 默认展示占位图
const hasNoData = ref(true)

const chartList = []
const initEcharts = (dom, option) => {
  const myChart = echarts.init(dom)
  chartList.push(myChart)
  myChart.setOption(option)
}

 const getChartData = () => {
    getChart().then(async res => {
      // 没有数据直接展示占位图
      if (!res.data.secure_score) {
        hasNoData.value = true
        return
      }
      hasNoData.value = false
      // 刷新dom
      await nextTick()
      initEcharts(ref1, option1)
      initEcharts(ref2, option1)
    })    
}

// 监听页面的 `resize` 事件
window.addEventListener('resize', function () {
  chartList.value.forEach(chart => {
    chart.resize()
  })
})

// 请求
onMounted(() => {
  getChartData()
})

// 卸载
unBeforeMount(() => {
  if (chartList.value.length === 0) return
  chartList.value.forEach(chart => {
    chart.dispose
  })
})