继续浏览精彩内容
慕课网APP
程序员的梦工厂
打开
继续
感谢您的支持,我会继续努力的
赞赏金额会直接到老师账户
将二维码发送给自己后长按识别
微信支付
支付宝支付

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

慕侠4409898
关注TA
已关注
手记 31
粉丝 28
获赞 169

导语

近日在项目中需要进行图表展示,百度的Echarts图表是非常合适的一个选择。项目是vue-cli搭建的,如何在项目中引入Echarts就是一个问题了。亲自动手实践了下,整理总结,希望对小伙伴提供一些帮助,少踩一些坑。

Echarts官网木有良好的说明啊,你知道不知道…

一、完整引入Echarts

  1. 下载安装echarts包

     npm install echarts -D 
    
  2. 定义图表显示的容器,并进行渲染

     <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 {
     	created () {
     		// 调用绘制图表的方法
     		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 按需加载

  1. 专门设置一个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
    
  2. 在需要的组件内加载echarts,绘制图表

     <template>
     	// ... 与上面实例相同
     </template>
     <style>
     	// ... 与上面实例相同
     </style>	
     <script>
     // 重点:此位置引入的是你单独配置的echarts
     import echarts from '@/lib/echarts'
     export default {
     	created () {
     		// ...与上面实例相同
     	},
     	methods: {
     		draw () {
     			// ... 与上面实例相同
     		}
     	}
     }	
     </script>
    

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

三、引入插件babel-plugin-equire,配合实现Echarts按需引入

在上面的实例中,我们单独配置的echarts文件,需要引入对应的图表、标题、提示信息等,都需要我们手动进行加载,比较麻烦。引入babel-plugin-equire插件,方便使用。

  1. 下载babel-plugin-equire

     npm install babel-plugin-equire -D
    
  2. 在.babelrc文件中的配置

     "plugins": [
     	"... 其他插件",
     	"equire"
     ]
    
  3. 修改@/lib/echarts文件

     // eslint-disable-next-line
     const echarts = equire([
     	// 写上你需要的
     	'bar',
     	'legend',
     	'title'
     ])
     
     export default echarts
    
  4. 和上面案例配置是相同的,可以更加愉快的玩耍了…

结语

好了,各位小伙伴,以上就是百度Echarts图表在Vue项目汇总的应用的分享,喜欢的小伙伴记得点赞分享呦。

在应用中很多的场景都是请求数据后,再进行图表的绘制,那么期待我的下一篇文章吧:《百度Echarts图表在Vue异步数据场景下的绘制》

打开App,阅读手记
13人推荐
发表评论
随时随地看视频慕课网APP