在vue中使用echarts

欢迎大家加入我的社区：http://t.csdn.cn/Q52km
社区中不定时发红包

1、安装

npm install echarts --save

---

2、在vue中引入（全局引入）

// 引入echarts
import echarts from 'echarts'
Vue.prototype.$echarts = echarts

---

3、在vue中的使用

需要用到echart的地方先设置一个div的id、宽高

提示：
可以在一个页面中引入多个数据报表模板
使用div进行位置的排版放置

---

4、模板代码放在哪个位置

重点注意：其中const option = { }就是我们需要引进echart图表的代码

<template>
  <div>
    <div ref="chart" style="width:50%;height:376px"></div>
  </div>

</template>

要在mounted生命周期函数中实例化echarts对象。确保dom元素已经挂载到页面中。

mounted(){
   
    this.getEchartData()  
    },


   methods: {
   
    getEchartData() {
   
      const chart = this.$refs.chart
      if (chart) {
   
        const myChart = this.$echarts.init(chart)
        const option = {
   ...}
        myChart.setOption(option)
        window.addEventListener("resize", function() {
   
          myChart.resize()
        })
      }
       this.$on('hook:destroyed',()=>{
   
         window.removeEventListener("resize", function() {
   
          myChart.resize();
        });
        })
    }
  }

---

5、完整的一个vue页面实例：

<template>
  <div>
    <div ref="chart" style="width:50%;height:376px"></div>
    <div ref="chart1" style="width:50%;height:376px"></div>
  </div>

</template>

<script>