百度Echarts图表在Vue项目的完整引入以及按需加载

近日在项目中需要进行图表展示，百度的Echarts图表是非常合适的一个选择。项目是vue-cli搭建的，如何在项目中引入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>

看效果：

Echarts的条形图bar

缺点：如果是完整的引入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>

按此方式打包的项目，会只加载引用你所使用的图表、标题、提示信息等组件，降低了应用文件体积，实现按需加载

在上面的实例中，我们单独配置的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项目中应用的分享，喜欢的小伙伴记得点击在看，转发朋友圈分享呦！

0 人点赞