基于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 22 Vue.js
vue3.0+vue-router+element-plus初实践
Dec 02 Vue.js
vue 根据选择的月份动态展示日期对应的星期几
Feb 06 Vue.js
vite2.0+vue3移动端项目实战详解
Mar 03 Vue.js
vue 数据双向绑定的实现方法
Mar 04 Vue.js
vue-cropper插件实现图片截取上传组件封装
May 27 Vue.js
Vue中插槽slot的使用方法与应用场景详析
Jun 08 Vue.js
Vue-Element-Admin集成自己的接口实现登录跳转
Jun 23 Vue.js
如何用vue实现网页截图你知道吗
Nov 17 Vue.js
Vue实现跑马灯样式文字横向滚动
Nov 23 Vue.js
vue实力踩坑之push当前页无效
Apr 10 Vue.js
vue如何清除浏览器历史栈
May 25 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侧拉菜单 漂亮,可以向右或者向左展开,支持FF,IE
2009/10/15 PHP
使用XDebug调试及单元测试覆盖率分析
2011/01/27 PHP
PHP PDOStatement::debugDumpParams讲解
2019/01/30 PHP
javascript编程起步(第六课)
2007/01/10 Javascript
表单(FORM)的一些实用效果代码
2007/03/25 Javascript
js 禁止选择功能实现代码(兼容IE/Firefox)
2010/04/23 Javascript
jquery中.add()的使用分析
2013/04/26 Javascript
jquery实现的鼠标拖动排序Li或Table
2014/05/04 Javascript
javascript浏览器兼容教程之事件处理
2014/06/09 Javascript
js结合正则实现国内手机号段校验
2015/06/19 Javascript
jquery+css实现绚丽的横向二级下拉菜单-附源码下载
2015/08/23 Javascript
基于JavaScript实现鼠标悬浮弹出跟随鼠标移动的带箭头的信息层
2016/01/18 Javascript
jQuery实现根据生日计算年龄 星座 生肖
2016/11/23 Javascript
详解用原生JavaScript实现jQuery的某些简单功能
2016/12/19 Javascript
Vuex之理解Store的用法
2017/04/19 Javascript
vue用addRoutes实现动态路由的示例
2017/09/15 Javascript
原生js中ajax访问的实例详解
2017/09/19 Javascript
vue 的点击事件获取当前点击的元素方法
2018/09/15 Javascript
遗传算法之Python实现代码
2017/10/10 Python
python实现排序算法解析
2018/09/08 Python
python画图把时间作为横坐标的方法
2019/07/07 Python
python单向链表的基本实现与使用方法【定义、遍历、添加、删除、查找等】
2019/10/24 Python
django-csrf使用和禁用方式
2020/03/13 Python
详解PyQt5信号与槽的几种高级玩法
2020/03/24 Python
ubuntu16.04升级Python3.5到Python3.7的方法步骤
2020/08/20 Python
python 代码运行时间获取方式详解
2020/09/18 Python
CSS3实现莲花绽放的动画效果
2020/11/06 HTML / CSS
详解Canvas事件绑定
2018/06/27 HTML / CSS
很酷的小工具和电子产品商城:GearBest
2016/11/19 全球购物
德国柯吉澳趣味家居:Koziol
2017/08/24 全球购物
Java面试中常遇到的问题,也是需要注意的几点
2013/08/30 面试题
房地产推广策划方案
2014/05/19 职场文书
保卫工作个人总结
2015/03/03 职场文书
学习委员竞选稿
2015/11/20 职场文书
2016年小学“感恩教师”主题队日活动总结
2016/04/01 职场文书
Java实现带图形界面的聊天程序
2022/06/10 Java/Android