vue中使用v-echars

1.安装插件

npm i vue-echarts echars lodash

2.创建文件并引入

import isEmpty from 'lodash/isEmpty'
import isArray from 'lodash/isArray'
import compact from 'lodash/compact'
import ECharts from 'vue-echarts'
import 'echarts/lib/chart/bar' // 柱状图
import 'echarts/lib/chart/line' // 线图
import 'echarts/lib/chart/pie' // 饼转图
import 'echarts/lib/chart/custom' // 饼转图
import 'echarts/lib/chart/scatter' // 散点图
import 'echarts/lib/chart/tree' // 树图
import 'echarts/lib/chart/treemap'
import 'echarts/lib/chart/boxplot' // 箱形图、盒须图、盒式图、盒状图、箱线图
import 'echarts/lib/chart/candlestick' // k线图
import 'echarts/lib/chart/map' // 地图
import 'echarts/lib/chart/pictorialBar' // 人物
import 'echarts/lib/component/title'
import 'echarts/lib/component/legend'
import 'echarts/lib/component/tooltip'
import 'echarts/lib/component/toolbox'
import 'echarts/lib/component/dataZoom'
import 'echarts/lib/component/markLine'
import 'echarts/lib/component/markPoint'
import 'echarts/lib/component/visualMap'
import 'echarts/lib/component/timeline'

import theme from './themJson/compact.json' //默认样式文件

　3. 使用echars

 <e-charts
      ref="echarts"
      :options="options"
      theme="compact"
      autoresize
      style="100%;height:100%"
    />

　4

ECharts.registerTheme('compact', theme)

　5.js部分

export default {
  components: { ECharts },
  props: {
    option: {
      type: Object,
      default: () => {}
    }
  },
  data() {
    return {
    }
  },
  computed: {
    options: function() {
      return this.option
    }
  },
  watch: {
    option: {
      handler: function(val, oldVal) {
        this.visible = true
        const { dataset, series } = val
        if (this.notEmptyData(series)) {
          this.visible = true
        } else {
          this.visible = this.notEmptyData(dataset, 'source')
        }
      },
      deep: true,
      immediate: true
    }
  },
  methods: {
    notEmptyData(data, unit = 'data') {
      let flag = false
      if (!isEmpty(data)) {
        if (isArray(data)) {
          const arr = compact(data)
          const index = arr.findIndex(item => !isEmpty(item[unit]))
          flag = index > -1
        } else {
          flag = !isEmpty(data[unit])
        }
      }
      return flag
    }
  }
}
</script>

　　

.