基于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 自动安装exe程序
Nov 30 Javascript
De facto standard 世界上不可思议的事实标准
Aug 29 Javascript
jQuery中选择器小问题(新人难免遇到)
Mar 31 Javascript
jQuery使用$.ajax进行即时验证实例详解
Dec 11 Javascript
理解JavaScript表单的基础知识
Jan 25 Javascript
node实现登录图片验证码的示例代码
Apr 20 Javascript
详解javascript中的babel到底是什么
Jun 21 Javascript
vue3.0 CLI - 2.1 -  component 组件入门教程
Sep 14 Javascript
了解JavaScript中的选择器
May 24 Javascript
jQuery HTML css()方法与css类实例详解
May 20 jQuery
解决vue单页面多个组件嵌套监听浏览器窗口变化问题
Jul 30 Javascript
JS轻量级函数式编程实现XDM三
Jun 16 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类与对象中的private访问控制的疑问
2012/11/01 PHP
php生成EAN_13标准条形码实例
2013/11/13 PHP
php socket客户端及服务器端应用实例
2014/07/04 PHP
php 使用expat方式解析xml文件操作示例
2019/11/26 PHP
关于JavaScript的一些看法
2009/05/27 Javascript
JavaScript CSS修改学习第三章 修改样式表
2010/02/19 Javascript
document.getElementById的简写方式(获取id对象的简略写法)
2010/09/10 Javascript
讨论html与javascript在浏览器中的加载顺序问题
2013/11/27 Javascript
JavaScript检测实例属性, 原型属性
2015/02/04 Javascript
jQuery中的ajax async同步和异步详解
2015/09/29 Javascript
jQuery随手笔记之常用的jQuery操作DOM事件
2015/11/29 Javascript
微信小程序学习之数据处理详解
2017/07/05 Javascript
vue服务端渲染的实例代码
2017/08/28 Javascript
JS设计模式之惰性模式(二)
2017/09/29 Javascript
使用Bootstrap4 + Vue2实现分页查询的示例代码
2017/12/21 Javascript
小程序自定义日历效果
2018/12/29 Javascript
vue中v-text / v-html使用实例代码详解
2019/04/02 Javascript
vue中axios防止多次触发终止多次请求的示例代码(防抖)
2020/02/16 Javascript
vue项目中使用bpmn为节点添加颜色的方法
2020/04/30 Javascript
springboot+vue实现文件上传下载
2020/11/17 Vue.js
[01:20]2018DOTA2亚洲邀请赛总决赛战队Mineski晋级之路
2018/04/07 DOTA
python使用正则搜索字符串或文件中的浮点数代码实例
2014/07/11 Python
浅析Python的Django框架中的Memcached
2015/07/23 Python
python装饰器使用实例详解
2019/12/14 Python
DataFrame.groupby()所见的各种用法详解
2020/06/14 Python
python使用隐式循环快速求和的实现示例
2020/09/11 Python
Python3中小括号()、中括号[]、花括号{}的区别详解
2020/11/15 Python
使用css3绘制出各种几何图形
2016/08/17 HTML / CSS
伊利莎白雅顿官网:Elizabeth Arden
2016/10/10 全球购物
班组安全员工作职责
2014/02/01 职场文书
道路施工安全责任书
2014/07/24 职场文书
乡镇干部个人对照检查材料思想汇报(原创篇)
2014/09/28 职场文书
寻找成龙观后感
2015/06/12 职场文书
青年教师听课心得体会
2016/01/15 职场文书
2016年百日安全生产活动总结
2016/04/06 职场文书
python运行脚本文件的三种方法实例
2022/06/25 Python