基于vue+echarts 数据可视化大屏展示的方法示例


Posted in Javascript onMarch 09, 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:

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+echarts 数据可视化大屏内容请搜索三水点靠木以前的文章或继续浏览下面的相关文章希望大家以后多多支持三水点靠木!

Javascript 相关文章推荐
优秀js开源框架-jQuery使用手册(1)
Mar 10 Javascript
3种不同方式的焦点图轮播特效分享
Oct 30 Javascript
js/jquery解析json和数组格式的方法详解
Jan 09 Javascript
七个很有意思的PHP函数
May 12 Javascript
JQuery+EasyUI轻松实现步骤条效果
Feb 22 Javascript
利用JavaScript实现拖拽改变元素大小
Dec 14 Javascript
js中获取键盘按下键值event.keyCode、event.charCode和event.which的兼容性详解
Mar 15 Javascript
BootStrap selectpicker后台动态绑定数据的方法
Jul 28 Javascript
vue项目部署上线遇到的问题及解决方法
Jun 10 Javascript
vue 清空input标签 中file的值操作
Jul 21 Javascript
js观察者模式的弹幕案例
Nov 23 Javascript
JS中多层次排序算法的实现代码
Jan 06 Javascript
原生js实现瀑布流效果
Mar 09 #Javascript
原生JS实现贪吃蛇小游戏
Mar 09 #Javascript
微信小程序 wx.getUserInfo引导用户授权问题实例分析
Mar 09 #Javascript
在Vue中实现随hash改变响应菜单高亮
Mar 09 #Javascript
Node.js+Vue脚手架环境搭建的方法步骤
Mar 08 #Javascript
JS中的const命令你真懂它吗
Mar 08 #Javascript
Vue2.4+新增属性.sync、$attrs、$listeners的具体使用
Mar 08 #Javascript
You might like
php 多个submit提交表单 处理方法
2009/07/07 PHP
php生成扇形比例图实例
2013/11/06 PHP
基于thinkPHP框架实现留言板的方法
2016/10/17 PHP
PHP array_shift()用法实例分析
2019/01/07 PHP
Ajax+PHP实现的分类列表框功能示例
2019/02/11 PHP
showModalDialog 和 showModelessDialog
2007/01/22 Javascript
jquery.validate使用攻略 第三部
2010/07/01 Javascript
javascript基础知识大集锦(一) 推荐收藏
2011/01/13 Javascript
JS打开层/关闭层/移动层动画效果的实例代码
2013/05/11 Javascript
jQuery实现列表自动循环滚动鼠标悬停时停止滚动
2013/09/06 Javascript
javaScript 计算两个日期的天数相差(示例代码)
2013/12/27 Javascript
javascript实现的简单的表单验证
2015/07/10 Javascript
修复jQuery tablesorter无法正确排序的bug(加千分位数字后)
2016/03/30 Javascript
js前端面试题及答案整理(一)
2016/08/26 Javascript
将angular-ui的分页组件封装成指令的方法详解
2017/05/10 Javascript
jQuery实现常见的隐藏与展示列表效果示例
2018/06/04 jQuery
ES6与CommonJS中的模块处理的区别
2018/06/13 Javascript
vue使用v-if v-show页面闪烁,div闪现的解决方法
2018/10/12 Javascript
Node.js EventEmmitter事件监听器用法实例分析
2019/01/07 Javascript
electron+vue实现div contenteditable截图功能
2020/01/07 Javascript
不刷新网页就能链接新的js文件方法总结
2020/03/01 Javascript
Vue解决移动端弹窗滚动穿透问题
2020/12/15 Vue.js
[49:21]完美世界DOTA2联赛循环赛 Ink Ice vs LBZS BO2第二场 11.05
2020/11/06 DOTA
[01:16:16]DOTA2-DPC中国联赛定级赛 RNG vs Phoenix BO3第二场 1月8日
2021/03/11 DOTA
python放大图片和画方格实现算法
2018/03/30 Python
深入了解和应用Python 装饰器 @decorator
2019/04/02 Python
pyqt 实现QlineEdit 输入密码显示成圆点的方法
2019/06/24 Python
Python中*args和**kwargs的区别详解
2019/09/17 Python
Python turtle库绘制菱形的3种方式小结
2019/11/23 Python
python实现输入的数据在地图上生成热力图效果
2019/12/06 Python
英国鲜花递送:Blossoming Gifts
2020/07/10 全球购物
面向对象编程OOP的优点
2013/01/22 面试题
统计系教授推荐信
2014/02/28 职场文书
竞选班长演讲稿500字
2014/08/22 职场文书
总账会计岗位职责
2015/04/02 职场文书
创业计划书之游泳馆
2019/09/16 职场文书