基于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 相关文章推荐
vuex Module将 store 分割成模块的操作
Dec 07 Vue.js
在vue中使用inheritAttrs实现组件的扩展性介绍
Dec 07 Vue.js
vue实现图片裁剪后上传
Dec 16 Vue.js
Vue实现手机号、验证码登录(60s禁用倒计时)
Dec 19 Vue.js
如何在vue中使用HTML 5 拖放API
Jan 14 Vue.js
用vite搭建vue3应用的实现方法
Feb 22 Vue.js
vue-cli4.5.x快速搭建项目
May 30 Vue.js
vue.js Router中嵌套路由的实用示例
Jun 27 Vue.js
Vue的生命周期一起来看看
Feb 24 Vue.js
vue如何使用模拟的json数据查看效果
Mar 31 Vue.js
分享一个vue实现的记事本功能案例
Apr 11 Vue.js
vue elementUI表格控制对应列
Apr 13 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
re0第二季蕾姆被制作组打入冷宫!艾米莉亚女主扶正,原因唏嘘
2020/04/02 日漫
上海地方志办公室-上海电子仪表工业志
2021/03/04 无线电
Yii把CGridView文本框换成下拉框的方法
2014/12/03 PHP
PHP限制HTML内容中图片必须是本站的方法
2015/06/16 PHP
关于PHP中Session文件过多的问题及session文件保存位置
2016/03/17 PHP
Windows下php+mysql5.7配置教程
2017/05/16 PHP
地震发生中逃生十大法则
2008/05/12 Javascript
基于JQUERY的多级联动代码
2012/01/24 Javascript
浅析onsubmit校验表单时利用ajax的return false无效问题
2013/07/10 Javascript
javascript中递归的两种写法
2017/01/17 Javascript
NodeJS配置HTTPS服务实例分享
2017/02/19 NodeJs
[js高手之路]设计模式系列课程-发布者,订阅者重构购物车的实例
2017/08/29 Javascript
vue实现模态框的通用写法推荐
2018/02/26 Javascript
原生js实现form表单序列化的方法
2018/08/02 Javascript
Postman的下载及安装教程详解
2018/10/16 Javascript
基于JS+HTML实现弹窗提示是否确认提交功能
2020/06/17 Javascript
详解vue中v-model和v-bind绑定数据的异同
2020/08/10 Javascript
vue中使用router全局守卫实现页面拦截的示例
2020/10/23 Javascript
Python使用chardet判断字符编码
2015/05/09 Python
简单讲解Python中的闭包
2015/08/11 Python
Django+Ajax+jQuery实现网页动态更新的实例
2018/05/28 Python
使用python获取电脑的磁盘信息方法
2018/11/01 Python
python利用ffmpeg进行录制屏幕的方法
2019/01/10 Python
python基于递归解决背包问题详解
2019/07/03 Python
Python collections中的双向队列deque简单介绍详解
2019/11/04 Python
python和pywin32实现窗口查找、遍历和点击的示例代码
2020/04/01 Python
澳大利亚珍珠首饰购物网站:Vayo Pearls
2019/03/11 全球购物
大学本科生的个人自我评价
2013/12/09 职场文书
服务承诺书怎么写
2014/05/24 职场文书
职业规划实施方案
2014/06/10 职场文书
大学生撤销处分思想汇报
2014/09/12 职场文书
2014镇副书记群众路线专题民主生活会思想汇报
2014/09/23 职场文书
2015年党日活动总结范文
2015/03/25 职场文书
教师学期述职自我鉴定
2019/08/16 职场文书
Python实现机器学习算法的分类
2021/06/03 Python
python数据分析之单因素分析线性拟合及地理编码
2022/06/25 Python