Web大数据可视化使用Echarts图表库，提供常规的折线图、柱状图、散点图、饼图、K线图等。DataV数据可视化旨在让更多人了解其魅力，帮助非专业工程师通过图形界面轻松搭建专业水平的可视化应用，满足会议展览、业务监控、风险预警等多种业务展示需求。
一个基于Vue、DataV、Echart框架的大数据可视化(大屏展示)模板最近更新了详细说明，实现大数据可视化。通过Vue组件实现数据动态渲染和刷新，并可自由替换内部图表。部分图表采用DataV自带组件，可进行更改和更新。此外，还有150套基于Echarts实现的数据可视化大屏响应式展示效果的源码，共计150+个页面可供重新开发。
以下是一个大数据展示目录及对应的效果图：
信息展示系统
订单信息展示
数据概况
vue大数据可视化平台
项目描述：该大数据展示项目基于Vue、DataV、Echart框架，通过Vue组件实现数据动态刷新渲染和替换内部图表。某些图表采用DataV自带组件，可根据需要进行更改和更新。该项目需全屏展示(按F11)。
在实际应用中，建议按照自己的功能区域重命名文件，以便简单地区分不同的功能模块。项目环境包括Vue-cli-3.0、DataV-2.7.3、Echarts-4.6.0(如有问题可切换到4.x版本)、Webpack-4.0、Npm-6.13和Node-v12.16。
友情链接：无
文件目录：包含主要文件介绍和使用说明的文件夹
启动项目：运行项目所需的命令
. 首先，需要在项目主目录下运行以下命令安装依赖包：
```bash
npm/cnpm install
```
2. 安装依赖包完毕后，可以使用以下命令启动项目：
```bash
vue-cli serve
```
或者直接使用命令：
```bash
npm run serve
```
启动项目后，需要手动全屏(按 F11)。
3. 如果编译项目时提示没有 DataV 框架的依赖，可以输入以下命令进行手动安装：
```bash
npm install @jiaminghi/data-view
```
或者使用 yarn add @jiaminghi/data-view 进行安装。
4. ECharts 图表都是基于 common/echart/index.vue 封装组件创建的。已经对数据和屏幕改动进行了监听，能够动态渲染图表数据和大小。在监听窗口大小的模块中，使用了防抖函数来控制更新频率，节约浏览器性能。项目配置了默认的 ECharts 图表样式，文件地址为：common/echart/theme.json。
5. 封装的渲染图表组件支持传入以下参数，可根据业务需求自行添加/删除：
- id:String,唯一 id,渲染图表的节点(非必填，使用了 $el)
- className:String,class样式名称(非必填)
- options:Object,ECharts 配置(必填)
- height:String,图表高度(建议填)
- width:String,图表宽度(建议填)
6. 动态渲染图表的案例位于 components 目录下的各个图表组件。index 文件负责数据获取和处理，chart 文件负责监听和数据渲染。chart 文件的主要逻辑为：
以下是重构后的代码，主要进行了以下改进：
1. 将模板部分的代码进行了格式化。
2. 在脚本部分增加了对 Echart 组件的引入。
3. 修改了 props 部分以接收传入的数据。
4. 对 watch 部分进行了调整，使其能够正确监听数据变化并更新图表。
```html
```
在复用图表组件的案例中，中间部分的 "任务通过率与任务达标率" 可以被看作是一个模块。这个模块需要两个图表，这两个图表的结构相似，但是颜色和主要渲染的数据不同。为了实现这个功能，我们只需要传入对应的唯一id和样式即可。然后在复用的组件components/echart/center/centerChartRate里进行接收并在对应位置赋值即可。例如，在views/center.vue中定义好数据并传入这个组件。
您可以通过以下步骤更改 DataV 中的图表和边框：
1. 更改边框
- 边框是使用了 DataV 自带的组件，只需要去 views 目录下去寻找对应的位置去查找并替换就可以，具体的种类请去 DavaV 官网查看。
- 例如：`
2. 更改图表
- 直接进入 components/echart 下的文件修改成你要的 echarts 模样，可以去echarts 官方社区 官方社区里面查看案例。
一、mixins注入解决界面大小变动图表自适应适配功能
在 utils/resizeMixins.js 文件中，我们使用 mixins 注入解决了界面大小变动图表自适应适配的功能。这个功能主要应用在 common/echart/index.vue 的封装渲染组件中，对 this.chart 进行了功能注入。
二、屏幕适配
本项目借助了 flexible 插件，通过改变 rem 的值来进行适配。原设计为 1920px,适配区间为：1366px ~ 2560px。针对小屏幕(如宽为 1366px)需要自己舍弃部分动态组件进行适配的情况，例如“动态文字变换组件”会影响布局，需要手动换成一般节点。
flexible 文件位置：`common/flexible.js`,修改部分如下：
```javascript
function refreshRem() {
var width = docEl.getBoundingClientRect().width;
// 最小1366px,最大适配2560px
if (width / dpr < 1366) {
width = 1366 * dpr;
} else if (width / dpr > 2560) {
width = 2560 * dpr;
}
// 原项目是1920px我设置成24等份，这样1rem就是80px
var rem = width / 24;
docEl.style.fontSize = rem + 'px';
flexible.rem = win.rem = rem;
}
```
三、请求数据
现在的项目未使用前后端数据请求，建议使用 axios 进行数据请求。在 main.js 位置进行全局配置。以下是 axios 在 main.js 中的配置参考范例(因人而异):
```javascript
import axios from 'axios';
// 把方法放到vue的原型上，这样就可以全局使用了
Vue.prototype.$http = axios.create({
// 设置20秒超时时间
timeout: 20000,
baseURL: 'http://172.0.0.1:80080', // 这里写后端地址
});
```
一、项目重构
1. 增加了 Echart 组件复用功能，例如中间任务达标率的两个百分比图使用的是同一个组件。
2. 修复了头部右侧的图案条不对称的问题。
3. 解决了屏幕适配问题，更换了所有的尺寸单位，统一使用 rem。
4. 使用 Mixins 注入图表响应式代码。
5. 将 vue-awesome 改为按需引入的方式。
6. 封装渲染函数，抽离了数据使逻辑更加清晰。
7. 新增地图组件，并添加自动轮播功能。
二、其他说明
1. 欢迎在前端学习的路上交流，非常感谢！
2. 本项目是一个基于 React、Dva、DataV、ECharts 框架的数据大屏项目，支持数据动态刷新渲染、屏幕适配、数据请求模拟、局部样式、图表自由替换/复用等功能。
3. 请拉取 master 分支的代码，其余是开发分支。
4. 项目环境：react^16.2、webpack-4.0、npm-6.13、node-v12.16。
接口 Api 请求函数写在 services/index.js 中，并由 models/* 文件里 effects 对象的异步函数发起请求。由于在 subscriptions 里对路由进行了监听触发异步函数，所以当打开界面会自动触发对应函数，具体写法请参照 Dva 文档。请求函数使用 Dva 自带的 utils/request.js 统一使用 Get 请求，默认不支持 POST,需自行修改。
界面获取 mock 数据与 react-redux 写法类似，在 components/* 中使用 connect 高阶函数进行接收并传入各个 Chart 组件当中。图表组件主要使用了 ECharts 和 DataV 可视化框架来进行开发。图表文件在 components/*/charts 中，配置文件在 charts/options.js 里，动态数据由各个 page/index.js 进行接受和导入。ECharts 渲染函数统一封装在了 utils/chart.js 中。
样式编写使用了 styled-components 插件，通过样式组件化实现类似 Vue 中的 scoped 功能，界面中的样式不会互相影响。最简单的例子如下：
```javascript
// 样式文件 style
import styled from 'styled-components'; // 生成 div 标签
export const Index = styled.div`
display: flex;
flex-direction: column;
align-items: center;
`;
```
使用方式：
```javascript
// ...
render() {
return (
// 编译之后内容被 div 标签包裹
);
}
```
styled-components 还拥有传参、继承、定义属性等功能，如有需要请前往官网深度学习。全局样式通过 styled-components -> createGlobalStyle 引入到了 router.jsx 中并注册到全局，具体参考下方 icon 引入方式。
icon 文件使用 iconfont 图标，同样使用 styled-components 进行注册，需要多一个处理步骤。
1. 下载 unicode 文件到项目中如 assets/icon,删除多余 demo* 和 iconfont.js。
2. 将 iconfont.css 文件修改后缀为 iconfont.js。
```javascript
import { createGlobalStyle } from 'styled-components'; // 使用 styled-components 全局注册函数包裹内容并导出
export const Iconstyle = createGlobalStyle`
@font-face {
font-family: 'iconfont';
// ...其他字体样式配置
}
`;
```
4. 在 `router.jsx` 中进行注册。
屏幕适配：
本项目借助了 `utils/flexible.js` 插件，通过改变 rem 的值来进行适配，原设计为 1920px。适配区间为：1366px ~ 2560px,本项目有根据实际情况进行源文件的更改，小屏幕(如：宽为 1366px)需要自己舍弃部分动态组件进行适配，如’动态文字变换组件’会影响布局，需要手动换成一般节点。
// flexible文件位置：`common/flexible.js`,修改部分如下：
```javascript
function refreshRem() {
var width = docEl.getBoundingClientRect().width;
// 最小1366px,最大适配2560px
if (width / dpr < 1366) {
width = 1366 * dpr;
} else if (width / dpr > 2560) {
width = 2560 * dpr;
}
// 原项目是1920px我设置成24等份，这样1rem就是80px
var rem = width / 24;
docEl.style.fontSize = rem + 'px';
flexible.rem = win.rem = rem;
}
```
解决Dva版本history报错的问题：
找到node_modules中的dva包，修改lib/index.js文件。在第22行，将原来的代码：
```javascript
var _createHashHistory = _interopRequireDefault(require('history').createHashHistory);
```
修改为：
```javascript
var _createHashHistory = _interopRequireDefault(require('history').createHashHistory);
```
修改启动端口：
当项目运行编译中，如果端口出现冲突提示并同意新端口打开，可能会导致卡死情况发生。此时需要修改启动端口。在项目的package.json文件中，找到"scripts"部分，修改"start"命令内容，例如将端口修改为9000:
```json
"scripts": {
"start": "set PORT=9000 && roadhog server"
},
```
使用Hook:
如果你想使用Hook而非Class编写代码，请先卸载当前的react,然后安装支持Hook的React(>=16.8)。请注意，目前Dva脚手架生成的项目暂不支持Hook。
