# echarts数据可视化

**Repository Path**: upupupy/ecarts-data-visualization

## Basic Information

- **Project Name**: echarts数据可视化
- **Description**: echarts的七个图表以及全局的api以及实例对象的方法，koa快速上手
- **Primary Language**: Unknown
- **License**: Not specified
- **Default Branch**: master
- **Homepage**: None
- **GVP Project**: No

## Statistics

- **Stars**: 0
- **Forks**: 0
- **Created**: 2021-07-07
- **Last Updated**: 2021-07-08

## Categories & Tags

**Categories**: Uncategorized

**Tags**: None

## README

### 各个图表的英文单词

```
bar
line
scatter/effectScatter
pie
map
radar
gauge
```

### 使用场景

```
柱状图：柱状图描述的是分类数据，呈现的是每一个分类中有多少
折线图：常用来分析数据随时间的变化趋势
散点图：可以帮助我们推断出不同维度数据之间的相关性
饼图：可以帮助用户快速了解不同分类的数据占比情况
地图：帮助我们从宏观的角度快速看出不同的地理位置上数据的差异
雷达图：可以用来分析多个维度的数据与标准数据的对比情况
仪表盘：可以更加直观的表现出某个指标的进度或者实际情况
```

### 主题的使用

#### 内置主题

```javascript
在Echarts中默认内置了两套主题：light,dark
在初始化对象方法init中可以指明
  var chart = echarts.init(dom,'light')
  var chart = echarts.init(dom,'dark')
```

#### 自定义主题

```html
自定义主题
1、在主题编辑器中编辑主题
2、下载主题，是一个js文件
3、引入主题js文件
4、在init方法中使用主题
```

### 调色盘

它是一组颜色，图形，系列会自动从其中选择颜色

`主题调色盘`

`全局调色盘`

```javascript
option:{
	color:['red','green','blue']
}
```

`局部调色盘`

```javascript
series:[{
	type:'bar',
	color:['red','green','blue']
}]
```

`调色盘的作用遵循就近原则`

### 样式

`直接样式`

```javascript
itemStyle textStyle lineStyle areaStyle label
```

`高亮样式`

```javascript
在emphasis中包裹itemStyle textStyle lineStyle areaStyle label
```

`样式的作用也遵循就近原则`

### 自适应

当浏览器的大小发生变化的时候，如果想让图表也能随之适配变化

```javascript
1、监听窗口大小变化事件
2、在事件处理函数中调用Echarts实例对象的resize即可
	window.onsize = function(){
		myChart.resize();
	}
```

### 加载动画

Echarts已经内置好了加载数据的动画，我们只需要在合适的时机显示或者隐藏即可

```javascript
// 显示加载动画(获取数据之前)
mChart.showLoading()
// 隐藏加载动画（获取数据之后）
mCharts.hideLoading()
```

### 增量动画

数据发生改变，图表也发生改变。

```javascript
// 设置新的option,只需要考虑到变化的部分就可以
// 新旧option的关系并不是相互覆盖的关系，是互相整合的关系
```

### 动画的配置

```javascript
// 开启动画
animation:true
// 动画时长
animationDuration:5000
// 缓动动画
animationEasing:'bounceOut'
// 动画阈值
animationThreshold:8   // 单种形式的元素数量大于这个阈值时会关闭动画
```

### 全局echarts对象

```javascript
// init 方法
初始化Echarts实例对象
使用主题
// registerTheme方法
注册主题
只有注册过的主题，才能在init方法中使用该主题
// registerMap方法
注册地图
$.get('/china.json',function(chinajson){
    echarts.registerMap('china',chinajson)
})
geo组件使用地图数据
var option = {
    geo:{
        type:'map',
        map:'china'
    }
}
// connect方法
一个页面中可以有多个独立的图表
每一个图表对应一个Echarts实例对象
connect可以实现多图关联，传入联动目标为Echarts实例对象，支持数组。
	保存图片的自动拼接
    刷新按钮
    重置按钮
    提示框联动 图例选择 数据范围修改等
```

### echarts实例对象

```javascript
setOption
resize
on/off
dispatchAction
clear
dispose

// setOption方法
	1、设置或修改图表实例的配置项以及数据
    2、多次调用setOption方法
    合并新的配置和旧的配置
    增量动画
// resize 方法
    1、重新计算和绘制图表
    2、一般和window对象的resize事件结合使用
    window.onresize = function(){
        myChart.resize()
    }
// on/off方法
	1、绑定或者解绑事件处理函数
    2、鼠标事件
    	常见事件：'click','dblclick','mousedown','mousemove','mouseup'等
        常见参数arg:和事件相关的数据信息
    3、ECharts事件
    	常见事件：'legendselectchanged','datazoom','pieselectchanged','mapselectchanged'等
        常见参数arg:和事件相关的数据信息
// dispatchAction方法
     1、触发某些行为
     2、使用代码模拟用户的行为
     myCharts.dispatchAction({
         type:'highlight',//事件类型
         seriesIndex:0,//图表索引
         dataIndex:1//图表中哪一项高亮
     })
// clear方法
	1、清空当前实例，会移除实例中所有的组件和图表
    2、清空之后可以再次setOption
// dispose方法
    1、销毁实例
    2、销毁后实例无法再被使用
```