在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 index()方法使用代码
Jun 02 Javascript
JS时间选择器 兼容IE6,7,8,9
Jun 26 Javascript
枚举的实现求得1-1000所有出现1的数字并计算出现1的个数
Sep 10 Javascript
js为空或不是对象问题的快速解决方法
Dec 11 Javascript
js实现的map方法示例代码
Jan 13 Javascript
Javascript原型链和原型的一个误区
Oct 22 Javascript
JavaScript事件用法浅析
Oct 31 Javascript
浅析script标签中的defer与async属性
Nov 30 Javascript
AngularJS 使用ng-repeat报错 [ngRepeat:dupes]
Jan 19 Javascript
微信公众号菜单配置微信小程序实例详解
Mar 31 Javascript
浅谈Koa2框架利用CORS完成跨域ajax请求
Mar 06 Javascript
原生js+css调节音量滑块
Jan 15 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 时间计算问题小结
2009/01/04 PHP
PHP字符串的连接的简单实例
2013/12/30 PHP
php实现根据url自动生成缩略图的方法
2014/09/23 PHP
PHP魔术方法的使用示例
2015/06/23 PHP
调用WordPress函数统计文章访问量及PHP原生计数器的实现
2016/03/21 PHP
PHP让数组中有相同值的组成新的数组实例
2017/12/31 PHP
ExtJS 学习专题(一) 如何应用ExtJS(附实例)
2010/03/11 Javascript
浅谈EasyUI中编辑treegrid的方法
2015/03/01 Javascript
javascript实现验证身份证号的有效性并提示
2015/04/30 Javascript
fastclick插件导致日期(input[type=&quot;date&quot;])控件无法被触发该如何解决
2015/11/09 Javascript
js过滤HTML标签完整实例
2015/11/26 Javascript
实例讲解js验证表单项是否为空的方法
2016/01/09 Javascript
自动完成的搜索框javascript实现
2016/02/26 Javascript
jquery简单插件制作(fn.extend)完整实例
2016/05/24 Javascript
基于BootStrap栅格栏系统完成网站底部版权信息区
2016/12/23 Javascript
JS随机排序数组实现方法分析
2017/10/11 Javascript
浅谈vue项目可以从哪些方面进行优化
2018/05/05 Javascript
详解vue2.0监听属性的使用心得及搭配计算属性的使用
2018/07/18 Javascript
详解小程序输入框闪烁及重影BUG解决方案
2018/08/31 Javascript
Vue cli3 库模式搭建组件库并发布到 npm的流程
2018/10/12 Javascript
node.js 基于cheerio的爬虫工具的实现(需要登录权限的爬虫工具)
2019/04/10 Javascript
layer关闭弹出窗口触发表单提交问题的处理方法
2019/09/25 Javascript
小程序开发之模态框组件封装
2020/04/23 Javascript
python检测主机的连通性并记录到文件的实例
2018/06/21 Python
python使用minimax算法实现五子棋
2019/07/29 Python
Python对接六大主流数据库(只需三步)
2019/07/31 Python
Pandas时间序列:重采样及频率转换方式
2019/12/26 Python
Python的pygame安装教程详解
2020/02/10 Python
Python连接Mysql进行增删改查的示例代码
2020/08/03 Python
世界上最大的家庭自动化公司:Smarthome
2017/12/20 全球购物
描述Cookie和Session的作用,区别和各自的应用范围,Session工作原理
2015/03/25 面试题
安全生产演讲稿
2014/05/09 职场文书
意外伤害赔偿协议书范本
2014/09/28 职场文书
党员评议自我评价
2015/03/03 职场文书
发票退票证明
2015/06/24 职场文书
检讨书怎么写?
2019/06/21 职场文书