vue3 使用echarts 并封装为组件

安装

1. 从 npm 获取

   npm install echarts --save
   

2. 在对应的.vue文件中引用 ECharts

   import * as echarts from 'echarts';
   
   // 按需引入
   import * as echarts from 'echarts/lib/echarts';
   
   

3. 这样便完成了安装。

   但引用这里有两点要提：

   1. 百度到的Vue引入文章基本上都是使用全局Vue.prototype.$echarts = echarts。关于这个语句的解释可以看这篇博客，Vue3已经不再适用。

   2. 引用时报错：

      "export 'default' (imported as 'ECharts') was not found in 'echarts'

      原因是5.x版本问题，我是查看这篇博客解决的

使用

写好div容器

<div class="my-chart" id="main"></div>

<style >
.my-chart {
  width: 1100px;
  height: 321px;
}
</style>

引入props

props: {
	chartData: Object
},

初始化图表

mounted () {
	this.init()
},
methods: {
    init () {
        var chartDom = document.getElementById("main")
        var myChart = echarts.init(chartDom)
        var option = this.chartData
        option && myChart.setOption(option)
    }
}

父亲引用

<Chart :chartData="chartData"></Chart>

//chartData数据如下：
chartData: {
  tooltip: {
    trigger: 'axis',
    axisPointer: {
      type: 'shadow'
    }
  },
  xAxis: {
    type: 'category',
    name: '时间',
    data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun']
  },
  yAxis: {
    type: 'value',
    name: '评论数'
  },
  series: [
    {
      data: [120, 200, 150, 80, 70, 110, 130],
      type: 'line'
    }
  ]
},

效果：

复用

此时如果使用多个<Chart :chartData="chartData"></Chart>会发现只有第一个有显示，原因是id重复了，这时使用vue自带的uuidv1：

1. 引入（不需要npm安装）：

   import uuidv1 from 'uuid/v1'
   

2. 数据：

    data () {
       return {
         ecid: ''
       }
     },
   

3. 在div中使用uuid：

   <div class="my-chart" :id="ecid"></div>
   

4. 自己修改一下js里的init

5. 效果：

   

代码

附上.vue所有代码：

<template>
  <div class="my-chart" :id="ecid"></div>
</template>

<script>
import * as echarts from 'echarts'
import uuidv1 from 'uuid/v1'

export default {
  name: 'Chart',
  props: {
    chartData: Object
  },
  data () {
    return {
      ecid: ''
    }
  },
  created () {
    this.ecid = uuidv1()
  },
  mounted () {
    this.init()
  },
  methods: {
    init () {
      var chartDom = document.getElementById(this.ecid)
      var myChart = echarts.init(chartDom)
      var option = this.chartData
      option && myChart.setOption(option)
    }
  }
}

</script>
<style >
.my-chart {
  width: 1100px;
  height: 321px;
}
</style>