在vue中使用echarts的方法以及可能遇到的问题_vue.js_

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

总结

到此这篇关于在vue中使用echarts的方法以及可能遇到问题的文章就介绍到这了,更多相关vue中使用echarts内容请搜索以前的文章或继续浏览下面的相关文章希望大家以后多多支持！

提示： 本文由神整理自网络，如有侵权请联系本站删除！
本站声明：
1、本站所有资源均来源于互联网，不保证100%完整、不提供任何技术支持；
2、本站所发布的文章以及附件仅限用于学习和研究目的;不得将用于商业或者非法用途；否则由此产生的法律后果，本站概不负责！