基于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在图片上传的时候压缩图片
Nov 18 Vue.js
vue 插槽简介及使用示例
Nov 19 Vue.js
vue-drawer-layout实现手势滑出菜单栏
Nov 19 Vue.js
如何在 Vue 表单中处理图片
Jan 26 Vue.js
vue 使用饿了么UI仿写teambition的筛选功能
Mar 01 Vue.js
vue脚手架项目创建步骤详解
Mar 02 Vue.js
vue实现简单数据双向绑定
Apr 28 Vue.js
vue组件的路由高亮问题解决方法
May 11 Vue.js
Vue中插槽slot的使用方法与应用场景详析
Jun 08 Vue.js
Vue3如何理解ref toRef和toRefs的区别
Feb 18 Vue.js
vue-cli3.0修改打包后的文件名和文件地址,打包后本地运行报错解决
Apr 06 Vue.js
vue项目如何打包之项目打包优化(让打包的js文件变小)
Apr 30 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
PHP实现多图上传(结合uploadify插件)思路分析
2016/11/30 PHP
(JS实现)MapBar中坐标的加密和解密的脚本
2007/05/16 Javascript
js加解密 脚本解密
2008/02/22 Javascript
让GoogleCode的SVN下的HTML文件在FireFox下正常显示.
2009/05/25 Javascript
jquery调用wcf并展示出数据的方法
2011/07/07 Javascript
jQuery EasyUI API 中文文档 - Spinner微调器使用
2011/10/21 Javascript
JS通过分析userAgent属性来判断浏览器的类型及版本
2014/03/28 Javascript
jQuery中before()方法用法实例
2014/12/25 Javascript
JavaScript控制网页层收起和展开效果的方法
2015/04/15 Javascript
每天一篇javascript学习小结(Boolean对象)
2015/11/12 Javascript
基于JavaScript实现前端文件的断点续传
2016/10/17 Javascript
jQuery autoComplete插件两种使用方式及动态改变参数值的方法详解
2016/10/24 Javascript
Jquery UI实现一次拖拽多个选中的元素操作
2020/12/01 Javascript
纯JS实现轮播图
2017/02/22 Javascript
使用JS和canvas实现gif动图的停止和播放代码
2017/09/01 Javascript
浅谈mint-ui 填坑之路
2017/11/06 Javascript
详解PHP后期静态绑定分析与应用
2018/03/21 Javascript
微信小程序实现折叠展开效果
2018/07/19 Javascript
Vue项目查看当前使用的elementUI版本的方法
2018/09/27 Javascript
jquery实现简易验证插件封装
2020/09/13 jQuery
微信小程序实现点击页面出现文字
2020/09/21 Javascript
TensorFlow变量管理详解
2018/03/10 Python
Python面向对象编程基础实例分析
2020/01/17 Python
django xadmin action兼容自定义model权限教程
2020/03/30 Python
Django多层嵌套ManyToMany字段ORM操作详解
2020/05/19 Python
keras的backend 设置 tensorflow,theano操作
2020/06/30 Python
俄罗斯街头服装品牌:Black Star Wear
2017/03/01 全球购物
艺术家策划的室内设计:Curious Egg
2019/03/06 全球购物
JAVA和C++的区别
2013/10/06 面试题
个人函授自我鉴定
2014/03/25 职场文书
竞选学习委员演讲稿
2014/09/01 职场文书
2015年保洁工作总结范文
2015/04/28 职场文书
功夫熊猫观后感
2015/06/10 职场文书
结婚幸福感言
2015/08/01 职场文书
MySQL中InnoDB存储引擎的锁的基本使用教程
2021/05/26 MySQL
纯CSS如何禁止用户复制网页的内容
2021/11/01 HTML / CSS