Vue中多实例echarts渲染问题

如果在同一个页面有多个 VulnerabilityEvolution 组件实例，ECharts 可能会因为 this.myChart 变量的覆盖或 DOM id 重复导致问题。

echarts渲染容器

<template>
  <div ref="chartContainer" id="chartContainer" style="width: 100%; height: 100%;" />
</template>

使用getElementById()获取dom实例

当页面中有多个容器时，只会获取到第一个实例，这样会导致数据只会渲染到第一个实例上，导致数据无法正常渲染，所以这种方法不推荐

 initChart() {
      const chartDom = document.getElementById('VulnerabilityEvolution')
      // 设置图表
      this.myChart.setOption(this.convertToEChartsOption(this.vulnTrendData))
    }
 initChart() {
      const chartOption = {//图表参数}
      // 使用getElementById()获取dom实例
      const chartDom = document.getElementById('chartContainer')
      const chart = echarts.init(chartDom)
      // 设置图表
      chart.setOption(chartOption)
    }

使用$refs获取dom实例

完美解决上面的问题

 initChart() {
      const chartOption = {//图表参数}
      // 使用$refs获取dom实例
      const chartDom = this.$refs.chartContainer
      const chart = echarts.init(chartDom)
      // 设置图表
      chart.setOption(chartOption)
    }