基于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 相关文章推荐
jquery利用ajax调用后台方法实例
Aug 23 Javascript
ExtJS判断IE浏览器类型的方法
Feb 10 Javascript
jquery中获取元素里某一特定子元素的代码
Dec 02 Javascript
js实现文字滚动效果
Mar 03 Javascript
基于javascript实现图片滑动效果
May 07 Javascript
Bootstrap中的表单验证插件bootstrapValidator使用方法整理(推荐)
Jun 21 Javascript
基于AngularJS实现iOS8自带的计算器
Sep 12 Javascript
轻松理解Javascript变量的相关问题
Jan 20 Javascript
React Native 通告消息竖向轮播组件的封装
Aug 25 Javascript
vue实现随机验证码功能的实例代码
Apr 30 Javascript
jQuery实现轮播图效果demo
Jan 11 jQuery
Ant Design的可编辑Tree的实现操作
Oct 31 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面向对象全攻略 (十四) php5接口技术
2009/09/30 PHP
php从数组中随机选择若干不重复元素的方法
2015/03/14 PHP
Javascript 中文字符串处理额外注意事项
2009/11/15 Javascript
关于COOKIE个数与大小的问题
2011/01/17 Javascript
JavaScript中的prototype.bind()方法介绍
2014/04/04 Javascript
微信支付如何实现内置浏览器的H5页面支付
2015/09/25 Javascript
JS实现自动定时切换的简洁网页选项卡效果
2015/10/13 Javascript
jQuery快速实现商品数量加减的方法
2017/02/06 Javascript
jQuery实现贪吃蛇小游戏(附源码下载)
2017/03/04 Javascript
JS 插件dropload下拉刷新、上拉加载使用小结
2017/04/13 Javascript
浅谈webpack-dev-server的配置和使用
2018/05/17 Javascript
Vue加载组件、动态加载组件的几种方式
2018/08/31 Javascript
vue项目打包后怎样优雅的解决跨域
2019/05/26 Javascript
JavaScript跳出循环的三种方法(break, return, continue)
2019/07/30 Javascript
JS函数本身的作用域实例分析
2020/03/16 Javascript
Python3基础之条件与循环控制实例解析
2014/08/13 Python
Python实现竖排打印传单手机号码易撕条
2015/03/16 Python
python根据出生日期获得年龄的方法
2015/03/31 Python
python中 * 的用法详解
2019/07/10 Python
django使用haystack调用Elasticsearch实现索引搜索
2019/07/24 Python
python 图片二值化处理(处理后为纯黑白的图片)
2019/11/01 Python
python常用数据重复项处理方法
2019/11/22 Python
Python 过滤错误log并导出的实例
2019/12/26 Python
Tensorflow的常用矩阵生成方式
2020/01/04 Python
Python安装OpenCV的示例代码
2020/03/05 Python
对python中list的五种查找方法说明
2020/07/13 Python
给面试官的感谢信
2014/02/01 职场文书
意向协议书范本
2014/04/23 职场文书
《青海高原一株柳》教学反思
2014/04/25 职场文书
小学数学课题方案
2014/06/15 职场文书
县政府班子个人对照检查材料
2014/10/05 职场文书
2014年大学教师工作总结
2014/12/02 职场文书
六一文艺汇演开幕词
2015/01/29 职场文书
JMeter对MySQL数据库进行压力测试的实现步骤
2022/01/22 MySQL
Oracle 触发器trigger使用案例
2022/02/24 Oracle
Nginx 502 bad gateway错误解决的九种方案及原因
2022/08/14 Servers