在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 相关文章推荐
JavaScript中SQL语句的应用实现
May 04 Javascript
一款Jquery 分页插件的改造方法(服务器端分页)
Jul 11 Javascript
jQuery性能优化的38个建议
Mar 04 Javascript
jquery实现在页面加载的时自动为日期插件添加当前日期
Aug 20 Javascript
如何用js 实现依赖注入的思想,后端框架思想搬到前端来
Aug 03 Javascript
Bootstrap前端开发案例二
Jun 17 Javascript
避免jQuery名字冲突 noConflict()方法
Jul 30 Javascript
jQuery学习笔记之回调函数
Aug 15 Javascript
LayUI表格批量删除方法
Aug 15 Javascript
element-ui 中的table的列隐藏问题解决
Aug 24 Javascript
详解jQuery设置内容和属性
Apr 11 jQuery
javascript面向对象三大特征之封装实例详解
Jul 24 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巧获服务器端信息
2006/12/06 PHP
使用php shell命令合并图片的代码
2011/06/23 PHP
使用php判断网页是否gzip压缩
2013/06/25 PHP
利用php抓取蜘蛛爬虫痕迹的示例代码
2016/09/30 PHP
php实现的PDO异常处理操作分析
2018/12/27 PHP
PHP实现百度人脸识别
2019/05/06 PHP
JS的数组的扩展实例代码
2008/07/09 Javascript
为jQuery.Treeview添加右键菜单的实现代码
2010/10/22 Javascript
JQuery中的事件及动画用法实例
2015/01/26 Javascript
jquery实现简单合拢与展开网页面板的方法
2015/09/01 Javascript
Bootstrap 粘页脚效果
2016/03/28 Javascript
AngularJs bootstrap搭载前台框架——准备工作
2016/09/01 Javascript
js表单登陆验证示例
2016/10/19 Javascript
jQuery实现frame之间互通的方法
2017/06/26 jQuery
vue.js声明式渲染和条件与循环基础知识
2017/07/31 Javascript
微信小程序 如何保持登录状态
2019/08/16 Javascript
Nodejs监控事件循环异常示例详解
2019/09/22 NodeJs
微信小程序 点击切换样式scroll-view实现代码实例
2019/10/11 Javascript
浅谈Python 集合(set)类型的操作——并交差
2016/06/30 Python
Python列表和元组的定义与使用操作示例
2017/07/26 Python
python按综合、销量排序抓取100页的淘宝商品列表信息
2018/02/24 Python
15行Python代码带你轻松理解令牌桶算法
2018/03/21 Python
Python3 shutil(高级文件操作模块)实例用法总结
2020/02/19 Python
python从Oracle读取数据生成图表
2020/10/14 Python
int和Integer有什么区别
2013/05/25 面试题
Java文件和目录(IO)操作
2014/08/26 面试题
节能环保标语
2014/06/12 职场文书
机械设计专业大学生职业生涯规划书范文
2014/09/13 职场文书
音乐教育专业自荐信
2014/09/18 职场文书
党员四风自我剖析材料
2014/10/07 职场文书
个人存款证明书
2014/10/18 职场文书
求职自我评价怎么写
2015/03/09 职场文书
大学生求职自荐信
2015/03/24 职场文书
干货:我将这样书写我的演讲稿!
2019/05/09 职场文书
个人销售励志奋斗口号
2019/12/05 职场文书
MySQL索引知识的一些小妙招总结
2021/05/10 MySQL