微客导航 » 文章资讯 » 在Vue中使用Echarts实例图的方法实例

在Vue中使用Echarts实例图的方法实例

2023-07-14 06:04:03 331

前言

由于在项目中需要对数据进行可视化处理，也就是用图表展示，众所周知echarts是非常强大的插件。但是新手猛的上手的话，可能会有点束手无策，所以这篇就是来写一点入门的内容，外加自己一点的小心得。

一、首先要在项目中下载echarts依赖

npminstallecharts-S
	//或者使用淘宝的镜像
cnpminstallecharts-S

二、然后就要再main.js文件中来进行全局引入

//引入echarts
importechartsfrom'echarts'

Vue.prototype.$echarts=echarts

三、在Vue组件中设置一个div

四、去Echarts官网寻找想设置的实例图

再然后，根据找到的这个图里的数据及变量，来进行声明到data中。

data(){
			return{
				option:{
					title:{
						text:'堆叠区域图'
					},
					tooltip:{
						trigger:'axis',
						axisPointer:{
							type:'cross',
							label:{
								backgroundColor:'#6a7985'
							}
						}
					},
					legend:{
						data:['邮件营销','联盟广告','视频广告','直接访问','搜索引擎']
					},
					grid:{
						left:'3%',
						right:'4%',
						bottom:'3%',
						containLabel:true
					},
					xAxis:[{
						type:'category',
						boundaryGap:false,
						data:['周一','周二','周三','周四','周五','周六','周日']
					}],
					yAxis:[{
						type:'value'
					}],
					series:[{
							name:'邮件营销',
							type:'line',
							stack:'总量',
							areaStyle:{},
							data:[120,132,101,134,90,230,210]
						},
						{
							name:'联盟广告',
							type:'line',
							stack:'总量',
							areaStyle:{},
							data:[220,182,191,234,290,330,310]
						},
						{
							name:'视频广告',
							type:'line',
							stack:'总量',
							areaStyle:{},
							data:[150,232,201,154,190,330,410]
						},
						{
							name:'直接访问',
							type:'line',
							stack:'总量',
							areaStyle:{},
							data:[320,332,301,334,390,330,320]
						},
						{
							name:'搜索引擎',
							type:'line',
							stack:'总量',
							label:{
								normal:{
									show:true,
									position:'top'
								}
							},
							areaStyle:{},
							data:[820,932,901,934,1290,1330,1320]
						}
					]
				}
			}
		}

五、在生命周期中挂载

mounted(){
			letmyChart=this.$echarts.init(document.getElementById("echarts"));
			//设置echarts对象的option属性
			myChart.setOption(this.option)
		}

六、再在该div外面的盒子设置相关的css


.body
	{
	width:100%;
	height:100vh;
	margin-left:250px;
	margin-top:-280px;
	}
#echarts
	{
	width:80%;
	height:60%;
	border:1pxsolidred;
	}

好啦，这个时候自信一点，打开浏览器，就会发现一个完完全全的Echarts实例图啦，希望这篇文章可以帮得到你，嘻嘻

总结

到此这篇关于在Vue中使用Echarts实例图的文章就介绍到这了,更多相关Vue使用Echarts实例图内容请搜索毛票票以前的文章或继续浏览下面的相关文章希望大家以后多多支持毛票票！

返回顶部
3162201930
czq8825@qq.com

在Vue中使用Echarts实例图的方法实例

热门推荐

随机推荐