#  DataVisualization 

**Repository Path**: aduia/DataVisualization

## Basic Information

- **Project Name**:  DataVisualization 
- **Description**: 数据可视化&大屏展示
- **Primary Language**: JavaScript
- **License**: Not specified
- **Default Branch**: master
- **Homepage**: http://aduia.gitee.io/datavisualization/
- **GVP Project**: No

## Statistics

- **Stars**: 11
- **Forks**: 2
- **Created**: 2020-04-08
- **Last Updated**: 2022-08-21

## Categories & Tags

**Categories**: Uncategorized

**Tags**: None

## README

#  DataVisualization [![star](https://gitee.com/aduia/DataVisualization/badge/star.svg?theme=white)](https://gitee.com/aduia/DataVisualization/stargazers)

#### 介绍
数据可视化&大屏展示

#### Demo演示
演示地址：http://aduia.gitee.io/datavisualization/

#### 使用技术
- div + css 布局
- flex 布局
- Less
- 原生js + jQuery 使用
- rem适配
- ECharts

#### 结构目录

```
|-- index.html --页面部分
|-- css
|   |-- index.css
|   |-- index.less --Less编译后会自动生成css文件
|-- font
|   |-- DS-DIGIT.TTF --图标字体文件
|-- images --页面图片部分
|-- js
    |-- china.js --中国地图文件
    |-- echarts.min.js --ECharts文件
    |-- flexible.js --页面自适应文件（1024px-1920px）
    |-- index.js --主体js文件
    |-- jquery.js --jQuery文件（JavaScript库）
```

#### Echarts-基础配置

> 需要了解的主要配置：`series` `xAxis` `yAxis` `grid` `tooltip` `title` `legend` `color` 

- series

  - 系列列表。每个系列通过 `type` 决定自己的图表类型
  - 大白话：图标数据，指定什么类型的图标，可以多个图表重叠。

- xAxis：直角坐标系 grid 中的 x 轴

  - boundaryGap: 坐标轴两边留白策略 true，这时候刻度只是作为分隔线，标签和数据点都会在两个刻度之间的带(band)中间。

- yAxis：直角坐标系 grid 中的 y 轴

- grid：直角坐标系内绘图网格。 

- title：标题组件

- tooltip：提示框组件

- legend：图例组件

- color：调色盘颜色列表

#### Echarts-map使用（扩展）

参考社区的例子：https://gallery.echartsjs.com/editor.html?c=x0-ExSkZDM  (模拟飞机航线)