百度Echarts图表在Vue项目的完整引入以及按需加载(转载)
导语
近日在项目中需要进行图表展示,百度的Echarts图表是非常合适的一个选择。项目是vue-cli搭建的,如何在项目中引入Echarts就是一个问题了。亲自动手实践了下,整理总结,希望对小伙伴提供一些帮助,少踩一些坑。
Echarts官网木有良好的说明啊,你知道不知道...
一、完整引入Echarts
-
下载安装echarts包
npm install echarts -D
-
定义图表显示的容器,并进行渲染
<template> <div id="myChart" ref="myChart"></div> </template> <style> #myChart { width: 95%; height: 300px; margin: 20px auto; border: 1px solid #CCC } </style> <script> // 引入完整的echarts import echarts from 'echarts' export default { mounted () { // 调用绘制图表的方法 this.draw(); }, methods: { draw () { // 实例化echarts对象 myChart = echarts.init(this.$refs.myChart) // 绘制条形图 myChart.setOption({ title: { text: 'Echarts 入门实例', top: 5, left: 'center' }, legend: { data: ['衣服', '帽子', '裤子', '鞋子'], top: 30 }, // X轴 xAxis: { data: [ '一月', '二月', '三月', '四月' ] }, // Y轴 yAxis: {}, // 数据 series: [ { name: '衣服', type: 'bar', data: [120, 100, 440, 320] }, { name: '帽子', type: 'bar', data: [200, 120, 240, 330] }, { name: 'bar', type: 'line', data: [120, 200, 240, 260, 300] }, { name: 'bar', type: 'line', data: [120, 200, 300, 140, 260] } ] }) } } } </script>
看效果:
![](http://upload-images.jianshu.io/upload_images/3091895-171df3447a6b2ab7.png?imageMogr2/auto-orient/strip|imageView2/2/w/899/format/webp)
Echarts的条形图bar
缺点:如果是完整的引入Echarts,会额外的引入其他无用的配置文件,造成应用文件体积过大,资源加载耗时过长,影响用户体验。
二、Echarts 按需加载
-
专门设置一个echarts配置文件
// 文件路径 @/lib/echarts.js 自行配置 // 加载echarts,注意引入文件的路径 import echarts from 'echarts/lib/echarts' // 再引入你需要使用的图表类型,标题,提示信息等 import 'echarts/lib/chart/bar' import 'echarts/lib/component/legend' import 'echarts/lib/component/title' export default echarts
-
在需要的组件内加载echarts,绘制图表
<template> // ... 与上面实例相同 </template> <style> // ... 与上面实例相同 </style> <script> // 重点:此位置引入的是你单独配置的echarts import echarts from '@/lib/echarts' export default { mounted () { // ...与上面实例相同 }, methods: { draw () { // ... 与上面实例相同 } } } </script>
按此方式打包的项目,会只加载引用你所使用的图表、标题、提示信息等组件,降低了应用文件体积,实现按需加载
三、引入插件babel-plugin-equire,配合实现Echarts按需引入
在上面的实例中,我们单独配置的echarts文件,需要引入对应的图表、标题、提示信息等,都需要我们手动进行加载,比较麻烦。引入babel-plugin-equire插件,方便使用。
-
下载babel-plugin-equire
npm install babel-plugin-equire -D
-
在.babelrc文件中的配置
"plugins": [ "... 其他插件", "equire" ]
-
修改@/lib/echarts文件
// eslint-disable-next-line const echarts = equire([ // 写上你需要的 'bar', 'legend', 'title' ]) export default echarts
-
和上面案例配置是相同的,可以更加愉快的玩耍了...
结语
好了,各位小伙伴,以上就是百度Echarts图表在Vue项目中的应用的分享,喜欢的小伙伴记得点赞分享呦。
作者:胡哥有话说
链接:https://www.jianshu.com/p/39498e6d2f91
来源:简书
著作权归作者所有。商业转载请联系作者获得授权,非商业转载请注明出处。