知识笔记（九十六）———在vue中使用echarts

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图表的代码

要在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页面实例：

接着去页面中看吧，如有不显示现象请等待下一篇文章...