基于vue+echarts 数据可视化大屏展示[附源码]「建议收藏」

基于vue+echarts 数据可视化大屏展示[附源码]「建议收藏」访问获取源码精准化模板教程~

大家好,又见面了,我是你们的朋友全栈君。

获取 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.效果
在这里插入图片描述
5.以上效果是官方的默认效果,当然这样子应用到项目中显然不符合需求,要做的更加炫酷更加科技感,就需要经过一番配置,如图(以下项目均为自己开发)
在这里插入图片描述
在这里插入图片描述
如果想快速上手开发数据可视化大屏可以查考下项目模板,获取方式扫描下方二维码关注公众号,无任何附加条件即可直接获取哦~
在这里插入图片描述

版权声明:本文内容由互联网用户自发贡献,该文观点仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 举报,一经查实,本站将立刻删除。

发布者:全栈程序员-用户IM,转载请注明出处:https://javaforall.cn/153621.html原文链接:https://javaforall.cn

【正版授权,激活自己账号】: Jetbrains全家桶Ide使用,1年售后保障,每天仅需1毛

【官方授权 正版激活】: 官方授权 正版激活 支持Jetbrains家族下所有IDE 使用个人JB账号...

(1)


相关推荐

  • pytest fixtures_eplfixture

    pytest fixtures_eplfixturefixture的优势Pytest的fixture相对于传统的xUnit的setup/teardown函数做了显著的改进:命名方式灵活,不局限于setup和teardown这几个命名conf

  • stm32h7串口dma发送_串口通信流程

    stm32h7串口dma发送_串口通信流程我们知道DM368有两个串口,UART0和UART1。但是UART0默认为调试串口,也就是说一般不用这个作为通信串口,此刻UART1就成为了DM368和上位机通信的唯一选择。官方文档表明,UART0和UART1都已经配置好了,并且不需要修改任何代码就可以直接使用,但是实际操作过程中,保证通信程序完全没有问题的情况下,并不能完成通信。这就让我不得不怀疑,UART1是不是确确实实的使能了?到底是可

  • 跨境电商erp源码java大卖先生_java web项目源码和教程

    跨境电商erp源码java大卖先生_java web项目源码和教程语言:Java数据库:pgsql开发工具:IDEA源码类型:WebForm系统功能包括:订单管理、商品管理、采购管理、客服管理、库存管理、物流管理、报表统计、平台授权、系统管理等。

  • 老电脑玩游戏又卡又慢,怎么办?

    老电脑玩游戏又卡又慢,怎么办?电脑玩游戏反应慢,这里收集了网上网友们提供的方法。如果您在电脑玩游戏时也遇到反应慢的问题,可以尝试用这些办法解决。网友方案一如果电脑玩游戏反应慢,可以通过将电脑的独显打开、更改电池模式或是调整画面分辨率等方法来解决,具体的操作方法可以参考下面的内容。1、将电脑的独显打开,打开控制面板,选择左侧的管理3D设置,在全局设置界面中将自动选择改为你的NVIDIA显卡。然后选择程序设置界面将你…

  • 继电器驱动电路原理及注意事项[通俗易懂]

    继电器驱动电路原理及注意事项[通俗易懂]继电器驱动电流一般需要20-40mA或更大,线圈电阻100-200欧姆,因此要加驱动电路  1. 晶体管用来驱动继电器,必须将晶体管的发射极接地。具体电路如下:NPN晶体管                            PNP晶体管 NPN晶体管驱动时:当晶体管T1基极被输入高电平时,晶体管饱和导通,集电极变为低电平,因此继电器线圈通电,触点RL1吸

  • 《Python 快速入门》一千个程序员有一千套编码规范[通俗易懂]

    《Python 快速入门》一千个程序员有一千套编码规范[通俗易懂]一千个读者有一千个哈姆莱特。–莎士比亚一千个程序员有一千套编码规范。–不吃西红柿

发表回复

您的电子邮箱地址不会被公开。

关注全栈程序员社区公众号