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

文章目录

1、安装2、在vue中引入（全局引入）3、在vue中的使用4、模板代码放在哪个位置5、完整的一个vue页面实例：6、实现效果7、可能遇到的问题，下载不成功。使用8、11:25-32 "export 'default' (imported as 'echarts') was not found in '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页面实例：

6、实现效果

7、可能遇到的问题，下载不成功。使用

cnpm install echarts --save

8、11:25-32 "export ‘default’ (imported as ‘echarts’) was not found in 'echarts

修改引入的方式

// 引入echarts

import *as echarts from 'echarts'

Vue.prototype.$echarts = echarts

精彩链接

评论可见，请评论后查看内容，谢谢！！！
 您阅读本篇文章共花了：