vue使用echarts中遇到的问题及解决方法

最近在做demo的过程中用到了echarts，在过程中也踩了好多坑，所以专门记录一下遇到的问题及解决方案。

遇到的问题

1. 安装完echarts依赖后表格示例无法显示
2. 示例图标显示后格式异常
3. 再次进入业务事件后提示dom已加载并展示异常

解决方案

安装完echarts依赖后表格示例无法显示

解决方案：这种问题一般会是两种情况：一是版本不对应的问题，npm install echarts --save默认的是最新的版本(5.1x)，直接安装最新版本的echarts可能会出现上述问题，所以需要降低版本安装echarts。二是安装echarts后未成功挂载到vue上。我是第二种情况，解决代码如下

// 安装echarts依赖
npm install echarts --save

// 在main.js文件中添加
import * as echarts from 'echarts'
Vue.prototype.$echarts = echarts 

// 实际业务处理文件中使用echarts
<div ref="xxxx" />

this.$echarts.init(this.$refs.xxxx).setOption({
 ...
})

示例图标显示后格式异常

解决方案: 我当时出现的情况是示例只在很窄的区域展示，所以要给对应的dom-div设置宽高，解决如下

<div ref="xxxx" style="width: 45vh; height: 300px" />

再次进入业务事件后提示dom已加载并展示异常

解决方案: 这个问题确实有点恶心，当我再次调用对应的echarts时，控制台会报dom已加载的警告，并且页面的示例图表会展示异常，解决方法是每次重新调用echarts时都需要先判断是否dom上已经存在，若存在则需要销毁对应的dom结构，这样处理过后就不会再有上述提示警告并且echarts图表能够正常展示，解决代码如下：

// 关键代码
	let myChart = this.$echarts.getInstanceByDom(
      this.$refs.xxxx
    )
    if (myChart == null) {
	  myChart = this.$echarts.init(this.$refs.xxxx).setOption({
        ...
      })
    }

// 举例
    // 账单类型
    noteTypeBarEcharts() {
      const finalArr = this.sortArr(this.tableInfo)
      console.log('分类后的数组', finalArr)
      // 检测是否已经存在echarts实例，如果不存在，则不再去初始化
      let myChart = this.$echarts.getInstanceByDom(
        this.$refs.barSecond
      )
      if (myChart == null) {
        myChart = this.$echarts.init(this.$refs.barSecond).setOption({
          title: {
            text: '账单类型',
            subtext: '(单位/元)',
            left: 'center'
          },
          tooltip: {
            trigger: 'item',
            formatter: '{b}:{c} ({d}%)'
          },
          toolbox: {
            feature: {
              saveAsImage: {}
            }
          },
          legend: {
            orient: 'vertical',
            left: 'left'
          },
          series: [
            {
              type: 'pie',
              radius: '50%',
              data: finalArr
            }
          ]
        })
      }
    }

至此，我们就可以在vue项目中随意使用echarts啦