基于vue+echarts数据可视化大屏展示的实现


Posted in Vue.js onDecember 25, 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数据可视化大屏展示的实现

这篇介绍如何在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.js 相关文章推荐
vue使用exif获取图片经纬度的示例代码
Dec 11 Vue.js
vue实现登录、注册、退出、跳转等功能
Dec 23 Vue.js
vue中activated的用法
Jan 03 Vue.js
vue实现禁止浏览器记住密码功能的示例代码
Feb 03 Vue.js
vue使用lodop打印控件实现浏览器兼容打印的方法
Feb 07 Vue.js
vue 动态添加的路由页面刷新时失效的原因及解决方案
Feb 26 Vue.js
Vue3 Composition API的使用简介
Mar 29 Vue.js
使用vue-element-admin框架从后端动态获取菜单功能的实现
Apr 29 Vue.js
如何理解Vue前后端数据交互与显示
May 10 Vue.js
Vue图片裁剪组件实例代码
Jul 02 Vue.js
vue 给数组添加新对象并赋值
Apr 20 Vue.js
Vue操作Storage本地化存储
Apr 29 Vue.js
vue3使用vue-count-to组件的实现
Dec 25 #Vue.js
vue+openlayers绘制省市边界线
Dec 24 #Vue.js
vue项目中openlayers绘制行政区划
Dec 24 #Vue.js
Vue+penlayers实现多边形绘制及展示
Dec 24 #Vue.js
Vue使用鼠标在Canvas上绘制矩形
Dec 24 #Vue.js
vue绑定class的三种方法
Dec 24 #Vue.js
全面解析Vue中的$nextTick
Dec 24 #Vue.js
You might like
自制短波长线天线频率预选器 - 成功消除B2K之流的镜像
2021/03/02 无线电
作为PHP程序员应该了解MongoDB的五件事
2013/06/03 PHP
PHP经典面试题集锦
2015/03/19 PHP
PHP实现小偷程序实例
2016/10/31 PHP
php实现的AES加密类定义与用法示例
2018/01/29 PHP
js 图片等比例缩放代码
2010/05/13 Javascript
基于jQuery.Validate验证库知识点的详解
2013/04/26 Javascript
jquery实现图片渐变切换兼容ie6/Chrome/Firefox
2013/08/02 Javascript
javascript查找字符串中出现最多的字符和次数的小例子
2013/10/29 Javascript
使图片旋转的3种解决方案
2013/11/21 Javascript
SWFObject基本用法实例分析
2015/07/20 Javascript
探讨:JavaScript ECAMScript5 新特性之get/set访问器
2016/05/05 Javascript
JavaScript基础教程——入门必看篇
2016/05/20 Javascript
js实现悬浮窗效果(支持拖动)
2017/03/09 Javascript
jquery实现异步加载图片(懒加载图片一种方式)
2017/04/24 jQuery
js断点调试经验分享
2017/12/08 Javascript
从vue基础开始创建一个简单的增删改查的实例代码(推荐)
2018/02/11 Javascript
详解关于vue-area-linkage走过的坑
2018/06/27 Javascript
使用Angular自定义字段校验指令的方法示例
2019/02/01 Javascript
详解vue-property-decorator使用手册
2019/07/29 Javascript
解决Echarts 显示隐藏后宽度高度变小的问题
2020/07/19 Javascript
[02:17]2016完美“圣”典风云人物:Sccc专访
2016/12/03 DOTA
python实现合并多个list及合并多个django QuerySet的方法示例
2019/06/11 Python
Python的numpy库下的几个小函数的用法(小结)
2019/07/12 Python
django-csrf使用和禁用方式
2020/03/13 Python
Python实现树莓派摄像头持续录像并传送到主机的步骤
2020/11/30 Python
python中threading和queue库实现多线程编程
2021/02/06 Python
应届生煤化工求职信
2013/10/21 职场文书
市场营销工作计划书
2014/05/06 职场文书
工业设计专业自荐书
2014/06/05 职场文书
应届生求职信范文
2014/06/30 职场文书
学生上课看漫画的检讨书
2014/09/26 职场文书
群众路线教育实践活动对照检查材料思想汇报(副处级领导)
2014/10/04 职场文书
教师个人培训总结
2015/02/11 职场文书
导游词之吉林花园山
2019/10/17 职场文书
基于Redis过期事件实现订单超时取消
2021/05/08 Redis