导语

近日在项目中需要进行图表展示，百度的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，会额外的引入其他无用的配置文件，造成应用文件体积过大，资源加载耗时过长，影响用户体验。

二、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文件

   const echarts = equire([
   	// 写上你需要的
   	'bar',
   	'legend',
   	'title'
   ])
   
   export default echarts
   

4. 和上面案例配置是相同的，可以更加愉快的玩耍了…

结语

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

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