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


Posted in Javascript onOctober 10, 2020

前言

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

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

npm install echarts -S
	//或者使用淘宝的镜像
cnpm install echarts -S

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

// 引入echarts
import echarts from 'echarts'

Vue.prototype.$echarts = echarts

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

<template>
	<div>
		<div class="body">
			<div id="echarts"></div> //就是这一行
		</div>
	</div>
</template>

四、去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() {
			let myChart = this.$echarts.init(document.getElementById("echarts"));
			//设置echarts对象的option属性
			myChart.setOption(this.option)
		}

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

<style scoped>
.body
	{
	 width: 100%;
	 height: 100vh;
	 margin-left: 250px;
	 margin-top: -280px;
	}
#echarts
	{
	 width: 80%;
	 height: 60%;
	 border: 1px solid red;
	}
</style>

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

总结

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

Javascript 相关文章推荐
基于JQuery实现异步刷新的代码(转载)
Mar 29 Javascript
深入理解javascript学习笔记(一) 编写高质量代码
Aug 09 Javascript
JS动态添加iframe的代码
Sep 14 Javascript
jquery 实现输入邮箱时自动补全下拉提示功能
Oct 04 Javascript
JS组件系列之MVVM组件构建自己的Vue组件
Apr 28 Javascript
vue checkbox 全选 数据的绑定及获取和计算方法
Feb 09 Javascript
JS数组去重常用方法实例小结【4种方法】
May 28 Javascript
angular 表单验证器验证的同时限制输入的实现
Apr 11 Javascript
微信小程序自定义组件components(代码详解)
Oct 21 Javascript
重置Redux的状态数据的方法实现
Nov 18 Javascript
jQuery实现颜色打字机的完整代码
Mar 19 jQuery
基于Web Audio API实现音频可视化效果
Jun 12 Javascript
基于Vue.js+Nuxt开发自定义弹出层组件
Oct 09 #Javascript
IDEA配置jQuery, $符号不再显示黄色波浪线的问题
Oct 09 #jQuery
vue中解决chrome浏览器自动播放音频和MP3语音打包到线上的实现方法
Oct 09 #Javascript
vue实现选中效果
Oct 07 #Javascript
electron踩坑之dialog中的callback解决
Oct 06 #Javascript
electron踩坑之remote of undefined的解决
Oct 06 #Javascript
9个JavaScript日常开发小技巧
Oct 06 #Javascript
You might like
PHP通过插入mysql数据来实现多机互锁实例
2014/11/05 PHP
php die()与exit()的区别实例详解
2016/12/03 PHP
PHP中trait使用方法详细介绍
2017/05/21 PHP
javascript 动态添加表格行
2006/06/22 Javascript
jQuery 网易相册鼠标移动显示隐藏效果实现代码
2013/03/31 Javascript
一个js过滤空格的小函数
2014/10/10 Javascript
js实现仿百度汽车频道选择汽车图片展示实例
2015/05/06 Javascript
jQuery+css3实现Ajax点击后动态删除功能的方法
2015/08/10 Javascript
有关Promises异步问题详解
2015/11/13 Javascript
jQuery使用zTree插件实现树形菜单和异步加载
2016/02/25 Javascript
学习Javascript闭包(Closure)知识
2016/08/07 Javascript
js轮盘抽奖实例分析
2020/04/17 Javascript
jQuery实现的仿百度,仿谷歌搜索下拉框效果示例
2016/12/30 Javascript
使用vue.js编写蓝色拼图小游戏
2017/03/17 Javascript
详解通过JSON数据使用VUE.JS
2017/05/26 Javascript
微信小程序的生命周期的详解
2017/10/19 Javascript
利用adb shell和node.js实现抖音自动抢红包功能(推荐)
2018/02/22 Javascript
vue登录以及权限验证相关的实现
2019/10/25 Javascript
js+html实现点名系统功能
2019/11/05 Javascript
微信小程序实现搜索框功能及踩过的坑
2020/06/19 Javascript
利用React高阶组件实现一个面包屑导航的示例
2020/08/23 Javascript
[01:34:42]NAVI vs EG 2019国际邀请赛小组赛 BO2 第二场 8.15
2019/08/17 DOTA
Python中比较特别的除法运算和幂运算介绍
2015/04/05 Python
Flask框架信号用法实例分析
2018/07/24 Python
python GUI框架pyqt5 对图片进行流式布局的方法(瀑布流flowlayout)
2020/03/12 Python
python如何实现DES加密
2020/09/21 Python
如何在python中处理配置文件代码实例
2020/09/27 Python
浅谈CSS3中的变形功能-transform功能
2017/12/27 HTML / CSS
印尼太阳百货公司网站:Matahari
2018/02/04 全球购物
FitFlop美国官网:英国符合人体工学的鞋类品牌
2018/10/05 全球购物
莫斯科的韩国化妆品店:Sifo
2019/12/04 全球购物
Bata印度官网:源自欧洲舒适鞋履品牌
2020/01/30 全球购物
战友聚会主持词
2014/04/02 职场文书
作文批改评语
2014/12/25 职场文书
无犯罪记录证明样本
2015/06/16 职场文书
回复函范文
2015/07/14 职场文书