百度Echarts图表在Vue项目的完整引入以及按需加载
发布于 19 小时前 作者 justbecoder 173 次浏览 来自 分享

导语

近日在项目中需要进行图表展示,百度的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文件

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

结语

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

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

回到顶部