在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 相关文章推荐
我见过最全的个人js加解密功能页面
Dec 12 Javascript
动态为事件添加js代码示例
Feb 15 Javascript
jquery animate 动画效果使用说明
Nov 04 Javascript
js 可拖动列表实现代码
Dec 13 Javascript
JavaScript实现自动对页面上敏感词进行屏蔽的方法
Jul 27 Javascript
理解JavaScript中worker事件api
Dec 25 Javascript
Bootstrap零基础入门教程(二)
Jul 18 Javascript
基于JavaScript定位当前的地理位置
Apr 11 Javascript
Require.JS中的几种define定义方式示例
Jun 01 Javascript
JS常用正则表达式超全集(密码强度校验,金额校验,IE版本,IPv4,IPv6校验)
Feb 03 Javascript
JSON stringify方法原理及实例解析
Oct 23 Javascript
JavaScript实现浏览器网页自动滚动并点击的示例代码
Dec 05 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+.htaccess实现全站静态HTML文件GZIP压缩传输(一)
2007/02/15 PHP
PHP 实现多服务器共享 SESSION 数据
2009/08/15 PHP
php+ajax无刷新上传图片的实现方法
2016/12/06 PHP
PHP设计模式之PHP迭代器模式讲解
2019/03/22 PHP
Mootools 1.2教程(2) DOM选择器
2009/09/14 Javascript
jquery事件与函数的使用介绍
2013/09/29 Javascript
JavaScript中的函数的两种定义方式和函数变量赋值
2014/05/12 Javascript
JS实现的N多简单无缝滚动代码(包含图文效果)
2015/11/06 Javascript
JS实现兼容各种浏览器的获取选择文本的方法【测试可用】
2016/06/21 Javascript
jQuery post数据至ashx实例详解
2016/11/18 Javascript
js遍历json的key和value的实例
2017/01/22 Javascript
深入理解在JS中通过四种设置事件处理程序的方法
2017/03/02 Javascript
JS实现二叉查找树的建立以及一些遍历方法实现
2017/04/17 Javascript
vue 文件目录结构详解
2017/11/24 Javascript
VSCode配置react开发环境的步骤
2017/12/27 Javascript
在vue中通过axios异步使用echarts的方法
2018/01/13 Javascript
小程序中canvas的drawImage方法参数使用详解
2019/07/04 Javascript
[54:28]EG vs OG 2019国际邀请赛小组赛 BO2 第一场 8.16
2019/08/18 DOTA
Python实现简单求解给定整数的质因数算法示例
2018/03/25 Python
pycharm 将python文件打包为exe格式的方法
2019/01/16 Python
python爬取cnvd漏洞库信息的实例
2019/02/14 Python
python-tkinter之按钮的使用,开关方法
2019/06/11 Python
pandas基于时间序列的固定时间间隔求均值的方法
2019/07/04 Python
详解python调用cmd命令三种方法
2019/07/08 Python
selenium+PhantomJS爬取豆瓣读书
2019/08/26 Python
详解Django关于StreamingHttpResponse与FileResponse文件下载的最优方法
2021/01/07 Python
python反扒机制的5种解决方法
2021/02/06 Python
CSS3中HSL和HSLA的简单使用示例
2015/07/14 HTML / CSS
东方红海科技面试题软件测试方面
2012/02/08 面试题
函授生自我鉴定
2014/03/25 职场文书
学习党的群众路线剖析材料
2014/10/09 职场文书
万能检讨书开头与结尾怎么写
2015/02/17 职场文书
党员证明信
2015/06/19 职场文书
HR在给员工开具离职证明时,需要注意哪些问题?
2019/07/03 职场文书
Memcached介绍及php-memcache扩展安装
2021/04/01 PHP
golang DNS服务器的简单实现操作
2021/04/30 Golang