基于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 使用 sortable 实现 el-table 拖拽排序功能
Dec 26 Vue.js
详解template标签用法(含vue中的用法总结)
Jan 12 Vue.js
详解实现vue的数据响应式原理
Jan 20 Vue.js
Vue 集成 PDF.js 实现 PDF 预览和添加水印的步骤
Jan 22 Vue.js
Vue 实现可视化拖拽页面编辑器
Feb 01 Vue.js
vue仿携程轮播图效果(滑动轮播,下方高度自适应)
Feb 11 Vue.js
vue实现简单数据双向绑定
Apr 28 Vue.js
vue-cropper组件实现图片切割上传
May 27 Vue.js
vue使用refs获取嵌套组件中的值过程
Mar 31 Vue.js
vue实现可以快进后退的跑马灯组件
Apr 08 Vue.js
vue-treeselect的基本用法以及解决点击无法出现拉下菜单
Apr 30 Vue.js
vue postcss-px2rem 自适应布局
May 15 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
Mysql中limit的用法方法详解与注意事项
2008/04/19 PHP
PHP对象转换为数组函数(递归方法)
2012/02/04 PHP
Windows7下的php环境配置教程
2015/02/28 PHP
php parse_str() 函数的定义和用法
2016/05/23 PHP
php实现的简单中文验证码功能示例
2017/01/03 PHP
php单元测试phpunit入门实例教程
2017/11/17 PHP
如何在PHP环境中使用ProtoBuf数据格式
2020/06/19 PHP
Microsoft Ajax Minifier 压缩javascript的方法
2010/03/05 Javascript
JavaScript中自定义事件用法分析
2014/12/23 Javascript
jQuery搜索同辈元素方法
2015/02/10 Javascript
JS根据key值获取URL中的参数值及把URL的参数转换成json对象
2015/08/26 Javascript
JavaScript代码实现图片循环滚动效果
2020/03/19 Javascript
JavaScript6 let 新语法优势介绍
2016/07/15 Javascript
jQuery通过ajax快速批量提交表单数据
2016/10/25 Javascript
利用jQuery插件imgAreaSelect实现获得选择域的图像信息
2016/12/02 Javascript
ES6通过babel转码使用webpack使用import关键字
2016/12/13 Javascript
web前端vue之CSS过渡效果示例
2018/01/10 Javascript
Vue使用vux-ui自定义表单验证遇到的问题及解决方法
2018/05/10 Javascript
Vue项目webpack打包部署到Tomcat刷新报404错误问题的解决方案
2018/05/15 Javascript
JS实现动态生成html table表格的方法分析
2018/07/11 Javascript
基于element-ui的rules中正则表达式
2018/09/04 Javascript
vue中对象数组去重的实现
2020/02/06 Javascript
关于小程序优化的一些建议(小结)
2020/12/10 Javascript
python中实现定制类的特殊方法总结
2014/09/28 Python
ubuntu 16.04下python版本切换的方法
2019/06/14 Python
Python3批量生成带logo的二维码方法
2019/06/24 Python
彻底解决Python包下载慢问题
2020/11/15 Python
webapp字号大小跟随系统字号大小缩放的示例代码
2018/12/26 HTML / CSS
Smallable英国家庭概念店:设计师童装及家居装饰
2017/07/05 全球购物
英国领先的品牌珠宝和配件供应商:Acotis Jewellery
2018/03/07 全球购物
《白鹅》教学反思
2014/04/13 职场文书
大学活动总结范文
2014/04/29 职场文书
幼儿教师演讲稿
2014/05/06 职场文书
人事主管岗位职责说明书
2014/07/30 职场文书
2014年居委会工作总结
2014/12/09 职场文书
Python 数据可视化之Matplotlib详解
2021/11/02 Python