【无标题】

Initialize failed: invalid dom.

dom对象还未被创建

1.使用mounted生命周期
2.用this.$nextTick(()=>{}) 

3.setTimeout(()=>{}) 

There is a chart instance already initialized on the dom.

其实dom已经存在了，但是我们在每次数据发生改变的时间都重新进行了一次渲染，导致出现警告

let myChart = echarts.getInstanceByDom(this.$refs['picChart'])

if (myChart == null) {

  myChart = echarts.init(this.$refs['picChart']);

}

 示例：

import * as echarts from 'echart5/core'
import { TitleComponent, TooltipComponent, LegendComponent } from 'echart5/components'
import { PieChart } from 'echart5/charts'
import { LabelLayout } from 'echart5/features'
import { CanvasRenderer } from 'echart5/renderers'

mounted() {
  echarts.use([
    TitleComponent,
    TooltipComponent,
    LegendComponent,
    PieChart,
    CanvasRenderer,
    LabelLayout
  ])

  this.loadData()
},

loadChart() {
  let myChart = echarts.getInstanceByDom(this.$refs['picChart'])
  if (myChart == null) {
    myChart = echarts.init(this.$refs['picChart']);
  }
  const dataName = []
  let total = 0
  this.dataList.forEach(x => {
    dataName.push(x.name)
    total += parseFloat(x.value)
  })
  const option = {
    legend: {
      icon: 'circle',
      orient: 'vertical',
      right: '0',
      top: 'center',
      padding: [0, 20, 0, 0], // 可设定图例[距上方距离，距右方距离，距下方距离，距左方距离]
      formatter: (name) => {
        let total = 0
        let target
        const value = this.dataList.filter(x => x.name == name)[0].value
        for (let i = 0, l = this.dataList.length; i < l; i++) {
          total += this.dataList[i].value
          if (this.dataList[i].name == name) {
            target = this.dataList[i].value
          }
        }
        const arr = [
          '{name|' + name +
          '}{value|' + value +
          '}{percentage|' + (target > 0 ? ((target / total) * 100).toFixed(2) : 0) + '%}'
        ]
        return arr.join('\n')
      },
      textStyle: {
        rich: {
          name: {
            fontSize: 20,
            align: 'left',
            padding: [20, 0, 20, 20],
            lineHeight: 40,
            width: 100
          },
          value: {
            fontSize: 20,
            align: 'right',
            padding: [20, 0, 20, 20]
          },
          percentage: {
            fontSize: 20,
            align: 'right',
            padding: [20, 0, 20, 20]
          }
        }
      }
    },
    title: {
      zlevel: 0,
      text: [
        '{value|' + (total / 1000 > 1 ? (total / 1000).toFixed(2) + '万' : total) + '}',
        '{name|总数}'
      ].join('\n'),
      top: 'center',
      left: '27%',
      textAlign: 'center',
      textStyle: {
        rich: {
          value: {
            color: '#303133',
            fontSize: 40,
            fontWeight: 'bold',
            lineHeight: 50
          },
          name: {
            color: '#303133',
            fontSize: 18,
            lineHeight: 28
          }
        }
      }
    },
    color: [
      '#37D4CF',
      '#F76560',
      '#4080FF',
      '#F99057',
      '#B5E241',
      '#E13EDB',
      '#8D4EDA',
      '#A9AEB8'
    ],
    tooltip: {
      trigger: 'axis',
      axisPointer: {
        type: 'cross',
        label: {
          backgroundColor: '#6a7985'
        }
      }
    },
    series: [
      {
        type: 'pie',
        center: ['28%', '50%'],
        radius: ['45%', '60%'],
        avoidLabelOverlap: false,
        hoverAnimation: false, // 取消掉环形图鼠标移上去时自动放大
        itemStyle: { // 图形外文字上下显示
          normal: {
            label: {
              show: false
            },
            labelLine: {
              show: false
            }
          }
        },
        label: {
          show: false,
          position: 'center'
        },
        emphasis: {
          label: {
            show: false,
            fontSize: '20'
          }
        },
        labelLine: {
          show: false
        },
        data: this.dataList
      }
    ]
  }
  option && myChart.setOption(option)
}