vue中使用echarts5

记录一些要点：

1. 导入方式

import * as echarts from 'echarts'   // 正确的导入方式

import  echarts  from 'echarts'   // 错误的导入方式，此时导入了undefined

2. resize
   注意设置父组件的宽高

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

import * as echarts from 'echarts'
import { addListener, removeListener } from 'resize-detector'
import debounce from 'lodash/debounce'

export default {
  created() {
    this.resize = debounce(this.resize, 300)
  },
  mounted() {
    // 基于准备好的dom，初始化echarts实例
    this.chart = echarts.init(this.$refs.chart)
    addListener(this.$refs.chart, this.resize)

    // 指定图表的配置项和数据
    var option = {}

    // 使用刚指定的配置项和数据显示图表。
    this.chart.setOption(option)
  },
  beforeDestroy() {
    removeListener(this.$refs.chart, this.resize)
    this.chart.dispose()
    this.chart = null
  },
  methods: {
    resize() {
      console.log('resize!')
      this.chart.resize()
    }
  }
}

报错Error: xAxis "0" not found

解决办法如下，添加

import 'echarts/lib/component/grid'