基于vue+echarts 数据可视化大屏展示的方法示例


Posted in Javascript onMarch 09, 2020

获取 ECharts 的路径有以下几种,请根据您的情况进行选择:

1) 最直接的方法是在 ECharts 的官方网站中挑选适合您的版本进行下载,不同的打包下载应用于不同的开发者功能与体积的需求,或者您也可以直接下载完整版本;开发环境建议下载源代码版本,包含了常见的错误提示和警告。
2) 也可以在 ECharts 的 GitHub 上下载最新的 release 版本,解压出来的文件夹里的 dist 目录里可以找到最新版本的 echarts 库。
3) 或者通过 npm 获取 echarts,npm install echarts --save,详见“在 webpack 中使用 echarts”
由 cdn 引入,你可以在 cdnjs,npmcdn 或者国内的 bootcdn 上找到 ECharts 的最新版本。

这篇介绍如何在vue中引入echarts:

1.先安装依赖

npm install echarts --save

2.1全局引入main.js中配置(不推荐使用,会导致包过大,冗余多)

import echarts from 'echarts' //引入echarts
Vue.prototype.$echarts = echarts //挂载在原型,组件内使用直接this.$echarts调用

2.2组件内按需引入 ( 推荐使用 )
这种方式很简单,在需要引入图表的组件引入,例如如下引入柱状图。具体使用干什么样子的组件需要引入什么可以参考引入示例

//在组件引入基本模板
let echarts = require("echarts/lib/echarts");
//在组件引入柱状图组件
require("echarts/lib/chart/bar");

3.全局引入为例,在组件中使用示例

<template>
	<div class="view-content">
		<div id="myChart" :style="{width: '300px', height: '300px'}"></div>
	</div>
</template>

<script>
	export default {
		name: 'Echarts',
		data() {
			return {
			}
		},
		mounted() {
			this.drawLine();
		},
		methods: {
			drawLine() {
				// 基于准备好的dom,初始化echarts实例
				let myChart = this.$echarts.init(document.getElementById('myChart'))
				// 绘制图表配置
				let option = {
					tooltip: {},
					xAxis: {
						data: ["衬衫", "羊毛衫", "雪纺衫", "裤子", "高跟鞋", "袜子"]
					},
					yAxis: {},
					series: [{
						name: '销量',
						type: 'bar',
						data: [5, 20, 36, 10, 10, 20]
					}]
				};
				// 窗口大小自适应方案
				myChart.setOption(option);
				setTimeout(function() {
					window.onresize = function() {
						myChart.resize();
					}
				}, 200)
			}
		}
	}
</script>
<style lang="scss" scoped>
</style>

4.效果

基于vue+echarts 数据可视化大屏展示的方法示例

5.以上效果是官方的默认效果,当然这样子应用到项目中显然不符合需求,要做的更加炫酷更加科技感,就需要经过一番配置,如图(以下项目均为自己开发)

基于vue+echarts 数据可视化大屏展示的方法示例

基于vue+echarts 数据可视化大屏展示的方法示例

基于vue+echarts 数据可视化大屏展示的方法示例

到此这篇关于基于vue+echarts 数据可视化大屏展示的方法示例的文章就介绍到这了,更多相关vue+echarts 数据可视化大屏内容请搜索三水点靠木以前的文章或继续浏览下面的相关文章希望大家以后多多支持三水点靠木!

Javascript 相关文章推荐
基于jQuery的公告无限循环滚动实现代码
May 11 Javascript
javascript实现捕捉键盘上按下的键
May 05 Javascript
JS实现模拟百度搜索“2012世界末日”网页地震撕裂效果代码
Oct 31 Javascript
jQuery简单实现input文本框内灰色提示文本效果的方法
Dec 02 Javascript
功能强大的Bootstrap组件(结合js)
Aug 03 Javascript
基于jQuery实现的幻灯图片切换
Dec 02 Javascript
Bootstrap基本插件学习笔记之轮播幻灯片(23)
Dec 08 Javascript
flexslider.js实现移动端轮播
Feb 05 Javascript
如何以Angular的姿势打开Font-Awesome详解
Apr 22 Javascript
layui radio单选限制下一个radio单选的实例
Sep 03 Javascript
详解jQuery中的prop()使用方法
Jan 05 jQuery
js实现Element中input组件的部分功能并封装成组件(实例代码)
Mar 02 Javascript
原生js实现瀑布流效果
Mar 09 #Javascript
原生JS实现贪吃蛇小游戏
Mar 09 #Javascript
微信小程序 wx.getUserInfo引导用户授权问题实例分析
Mar 09 #Javascript
在Vue中实现随hash改变响应菜单高亮
Mar 09 #Javascript
Node.js+Vue脚手架环境搭建的方法步骤
Mar 08 #Javascript
JS中的const命令你真懂它吗
Mar 08 #Javascript
Vue2.4+新增属性.sync、$attrs、$listeners的具体使用
Mar 08 #Javascript
You might like
杏林同学录(二)
2006/10/09 PHP
PHP stristr() 函数(不区分大小写的字符串查找)
2010/06/03 PHP
第4章 数据处理-php正则表达式-郑阿奇(续)
2011/07/04 PHP
web server使用php生成web页面的三种方法总结
2013/10/28 PHP
php禁止浏览器使用缓存页面的方法
2014/11/07 PHP
Laravel 5框架学习之向视图传送数据
2015/04/08 PHP
PHP stream_context_create()函数的使用示例
2015/05/12 PHP
PHP常用日期加减计算方法实例小结
2018/07/31 PHP
PDO::getAttribute讲解
2019/01/28 PHP
JavaScript NaN和Infinity特殊值 [译]
2012/09/20 Javascript
jQuery之折叠面板的深入解析
2013/06/19 Javascript
javascript向后台传送相同属性的参数即数组参数
2014/02/17 Javascript
js监控IE火狐浏览器关闭、刷新、回退、前进事件
2014/07/23 Javascript
jquery插件unobtrusive实现片段式加载
2015/06/15 Javascript
js一维数组、多维数组和对象的混合使用方法
2016/04/03 Javascript
vue开发心得和技巧分享
2016/10/27 Javascript
详解jQuery uploadify文件上传插件的使用方法
2016/12/16 Javascript
JS中通过url动态获取图片大小的方法小结(两种方法)
2018/10/31 Javascript
详解如何在Angular优雅编写HTTP请求
2018/12/05 Javascript
详解小程序如何避免多次点击,重复触发事件
2019/04/08 Javascript
vue使用nprogress加载路由进度条的方法
2020/06/04 Javascript
[00:31]DOTA2上海特级锦标赛 Fnatic战队宣传片
2016/03/04 DOTA
Python入门篇之对象类型
2014/10/17 Python
python爬取NUS-WIDE数据库图片
2016/10/05 Python
Python学习小技巧之列表项的拼接
2017/05/20 Python
Python enumerate索引迭代代码解析
2018/01/19 Python
python 删除系统中的文件(按时间,大小,扩展名)
2020/11/19 Python
CSS3属性使网站设计增强同时不消弱可用性
2009/08/29 HTML / CSS
CSS3实现超酷的黑猫警长首页
2016/04/26 HTML / CSS
武汉瑞得软件笔试题
2015/10/27 面试题
C#笔试题
2015/07/14 面试题
个人近期表现材料
2014/02/11 职场文书
交通事故调解协议书
2014/04/16 职场文书
涉密人员保密承诺书
2014/05/28 职场文书
2014年工程工作总结
2014/11/25 职场文书
学习党史心得体会2016
2016/01/23 职场文书