简单介绍

一个数据展示大屏。适用于中小型项目展示，只做学习交流。

技术栈

前端：vue+echarts+axios+vue-router+less
后台：node+koa2+websocket
开发IDE：IDEA

项目展示

PS:图表使用数据均为自造数据，与任何应用或者数据均无关。
项目展示效果：
1、图表自动切换，图表不同类目切换效果
2、大屏主题切换
3、单独图表放大缩小效果

开发准备

一、前端项目的准备

1.1. vue-cli 脚手架创建项目

1.1.1 脚手架环境安装

node install -g @vue/cli

1.1.2 项目创建

vue create version

本项目中具体使用的配置：

项目搭建完成，运行项目：

cd version
npm run serve

1.2 项目的基本配置

在项目根目录下创建 vue.config.js 文件
在文件中增加代码

// 使用vue-cli创建出来的vue工程, Webpack的配置是被隐藏起来了的// 如果想覆盖Webpack中的默认配置,需要在项目的根路径下增加vue.config.js文件
module.exports = {devServer: {port: 8999, // 端口号的配置open: true // 自动打开浏览器}
}

1.3.全局echarts 对象

1.3.1.引入 echarts 包
a、将插件，地图相关数据 static 目录复制到 public 目录之下

b、在 public/index.html 文件中引入 echarts.min.js 文件

1.3.2.挂载到 Vue 原型上
在 src/main.js 文件中挂载
由于在 index.html 中已经通过script标签引入了 echarts.js 文件夹, 故在 window 全局对象中是
存在 echarts 全局对象, 将其挂载到 Vue 的原型对象上

// 将全局echarts对象挂载到Vue的原型对象上
// 将全局的echarts对象挂载到Vue的原型对象上
// 别的组件中 this.$echarts
Vue.prototype.$echarts = window.echarts

1.3.3.使用全局 echarts 对象
在其他组件中使用

this.$echarts

PS:：echarts API传送门

1.4. axios 的处理

1.4.1.安装 axios 包

npm install axi

1.4.2.封装 axios 对象
在 src/main.js 文件中配置 axios 并且挂载到Vue的原型对象上

import axios from 'axios'
axios.defaults.baseURL = 'http://127.0.0.1:8888/api/'
// 将axios挂载到Vue的原型对象上
Vue.prototype.$http = axios
......

1.4.3.使用 axios 对象
在其他组件中使用

this.$http

2.图表组件的开发

在项目的初期, 先开发每一个单独的图表，在最后将所有的图表合并到一个界面，目前项目已基本搭建完成，只展示部分项目截图，想要了解的同学可以直接下载学习。
代码已添加相关注释，大家有不理解的可以一起在评论区探讨。
前端项目代码：前端代码传送门
后台代码：后台项目传送门
代码开发学习笔记：学习笔记
以下以seller.vue为例：
2.1、组件结构设计
在 src/components/ 目录下建立 Seller.vue , 这个组件是真实展示图表的组件
给外层div增加类样式 com-container
建立一个显示图表的div元素
给新增的这个div增加类样式 com-chart

<!-- 商家销量统计的横向柱状图 -->
<template><div class="com-container">
<!--    ref vue绑定DOM元素 --><div class="com-chart" ref="seller_ref"></div></div>
</template>
<style lang="less" scoped></style>

2.2、图表 Seller.vue 基本功能的实现
1.在mounted生命周期中初始化 echartsInstance 对象

mounted () {this.initChart()},

2.在mounted中获取服务器的数据

mounted () {this.initChart()// this.getData()this.$socket.send({action: 'getData',socketType: 'sellerData',chartName: 'seller',value: ''})window.addEventListener('resize', this.screenAdapter)// 界面加载完成，主动适应屏幕this.screenAdapter()},

3.将获取到的数据设置到图表上

//  更新数据updateChart () {const start = (this.currentPage - 1) * 5 // 0const end = this.currentPage * 5// slice 包含start 不包含endconst showData = this.allData.slice(start, end)const sellerNames = showData.map((item) => {return item.name})const sellerValues = showData.map((item) => {return item.value})// 抽离样式optionconst dataOption = {yAxis: {data: sellerNames},series: [{data: sellerValues}]}this.chartInstance.setOption(dataOption)}

4、数据的处理, 每5个元素显示一页

更多项目资料，如果感兴趣，大家可以直接传送门去取资料了解
前端项目代码：前端代码传送门
后台代码：后台项目传送门
代码开发学习笔记：学习笔记

vue+echarts实现数据展示大屏相关推荐

【echarts画数据可视化大屏】
目录前言一.数据清洗 1.去除重复值 2.处理缺失值 3.处理异常值二.数据处理(将数据打包成绘制需要的格式) 1.条形图数据处理 2.折线图数据处理 3.玫瑰图数据处理 4.柱状图数据处理 5 ...
基于js+echarts实现数据可视化大屏展示
vue+echarts大屏数据可视化展示点击进入写在前面: 本项目中使用的是echarts图表库,ECharts 提供了常规的折线图.柱状图.散点图.饼图.K线图,用于统计的盒形图,用于地理数据可视 ...
前端使用echarts实现数据可视化大屏展示
1.vue中如何使用echarts完成大屏展示:移步到这里 2.原生js项目中如何使用echarts完成大屏展示:移步到这里
vue+echarts+3D地图制作大屏
基于3d地图做的一些效果,首先看下效果图准备工作:下载echarts 和3d地图需要用到的依赖包,版本随意就行下载依赖之后,在页面引入,引入网上下载的地图json文 ...
vue+echarts+自适应实现可视化大屏展示效果
展示效果: 一.分辨率按照1920px*1080px,16:9展示效果最佳,不同分辨率可自适应,但图像可能有拉伸. 二.全屏页面的自适应适配方案采用rem 方案实现自适应,可参考 https://ww ...
Vue中如何进行数据可视化大屏展示
Vue中如何进行数据可视化大屏展示在现代数据驱动的应用程序中,数据可视化大屏已经成为了非常重要的一环.通过对海量数据进行可视化展示,可以帮助用户更好地理解和分析数据,从而做出更加明智的决策.在Vue ...
基于vue+echarts 数据可视化大屏展示[附源码]
获取 ECharts 的路径有以下几种,请根据您的情况进行选择: 1) 最直接的方法是在 ECharts 的官方网站中挑选适合您的版本进行下载,不同的打包下载应用于不同的开发者功能与体积的需求,或者您 ...
数据可视化大屏电商数据展示平台开发实录(Echarts柱图曲线图、mysql筛选统计语句、时间计算、大数据量统计)
数据可视化大屏电商数据展示平台一.前言二.项目介绍三.项目展示四.项目经验分享 4.1 翻牌器 4.1.1 翻牌器-今日实时交易 4.1.2.翻牌器后端统计SUM函数的使用 4.2 不同时间指 ...
使用Vue实现数据可视化大屏功能(二)
引入数据大屏相关组件用Datav插件做大屏可视化的组件,官网地址 http://datav.jiaminghi.com/ ,整个组件库都是基于Vue React版本实现,主要用于构建大屏数据可视 ...

vue+echarts实现数据展示大屏