基于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中的自定义指令
Dec 07 Vue.js
Vue 组件注册全解析
Dec 17 Vue.js
Vue——解决报错 Computed property &quot;****&quot; was assigned to but it has no setter.
Dec 19 Vue.js
Vue使用鼠标在Canvas上绘制矩形
Dec 24 Vue.js
详解template标签用法(含vue中的用法总结)
Jan 12 Vue.js
vue实现验证用户名是否可用
Jan 20 Vue.js
vue穿梭框实现上下移动
Jan 29 Vue.js
vue 实现click同时传入事件对象和自定义参数
Jan 29 Vue.js
详解gantt甘特图可拖拽、编辑(vue、react都可用 highcharts)
Nov 27 Vue.js
vue如何实现关闭对话框后刷新列表
Apr 08 Vue.js
vue项目打包后路由错误的解决方法
Apr 13 Vue.js
vue使用element-ui按需引入
May 20 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简单的留言板与回复功能具体实现
2014/02/19 PHP
PHP基于GD库的缩略图生成代码(支持jpg,gif,png格式)
2014/06/19 PHP
PHP中的常见魔术方法功能作用及用法实例
2015/07/01 PHP
浅析Yii2 GridView 日期格式化并实现日期可搜索教程
2016/04/22 PHP
thinkPHP框架自动填充原理与用法分析
2018/04/03 PHP
PHP简单实现记录网站访问量功能示例
2018/06/06 PHP
鼠标移动到一张图片时变为另一张图片
2006/12/05 Javascript
控制打印时页眉角的代码
2007/02/08 Javascript
关于火狐(firefox)及ie下event获取的两种方法
2012/12/27 Javascript
JavaScript DOM 编程艺术(第2版)读书笔记(JavaScript的最佳实践)
2013/10/01 Javascript
使用nodejs开发cli项目实例
2015/06/03 NodeJs
js实现下拉列表选中某个值的方法(3种方法)
2015/12/17 Javascript
常用js,css文件统一加载方法(推荐) 并在加载之后调用回调函数
2016/09/23 Javascript
原生JS实现网络彩票投注效果
2016/09/25 Javascript
vue实现样式之间的切换及vue动态样式的实现方法
2017/12/19 Javascript
layui checkbox默认选中,获取选中值,清空所有选中项的例子
2019/09/02 Javascript
layui table 表格模板按钮的实例代码
2019/09/21 Javascript
微信小程序云函数添加数据到数据库的方法
2020/03/04 Javascript
python中stdout输出不缓存的设置方法
2014/05/29 Python
Python读取键盘输入的2种方法
2015/06/16 Python
一步步解析Python斗牛游戏的概率
2016/02/12 Python
Python的Flask框架中集成CKeditor富文本编辑器的教程
2016/06/13 Python
python 设置文件编码格式的实现方法
2017/12/21 Python
Python之两种模式的生产者消费者模型详解
2018/10/26 Python
Python实现的登录验证系统完整案例【基于搭建的MVC框架】
2019/04/12 Python
CSS3实现千变万化的文字阴影text-shadow效果设计
2016/04/26 HTML / CSS
利用HTML5实现使用按钮控制背景音乐开关
2015/09/21 HTML / CSS
美国在线购物频道:Shop LC
2019/04/21 全球购物
秋季开学典礼主持词
2014/03/19 职场文书
2014年党员公开承诺书范文
2014/03/28 职场文书
大学三年计划书范文
2014/04/30 职场文书
工作鉴定评语
2014/05/04 职场文书
质量管理标语
2014/06/12 职场文书
新闻发布会策划方案
2014/06/12 职场文书
2015年党建工作汇报材料
2015/06/25 职场文书
Oracle 多表查询基本语法实例
2022/04/18 Oracle