# EChartsStudy

**Repository Path**: zpj80231/EChartsStudy

## Basic Information

- **Project Name**: EChartsStudy
- **Description**: 把常用的ECharts图表整理一下，方便日后的使用。主要有柱状图、折线图、饼图、迁徙图、接入百度地图等。
- **Primary Language**: JavaScript
- **License**: Not specified
- **Default Branch**: master
- **Homepage**: http://zpj80231.gitee.io/echartsstudy/
- **GVP Project**: No

## Statistics

- **Stars**: 0
- **Forks**: 0
- **Created**: 2019-08-03
- **Last Updated**: 2020-12-19

## Categories & Tags

**Categories**: Uncategorized

**Tags**: None

## README

# ECharts Study

> 把常用的ECharts图表整理一下，方便日后的使用

## 常用网址

- 在ECharts官网运行编辑实例：https://www.echartsjs.com/gallery/editor.html?c=doc-example/getting-started
- ECharts`option`中各参数详细配置项：https://echarts.baidu.com/option.html#grid

## 图表展示如下

- 柱+折线图

![](img/柱+折线图.png)

- 饼图

![](img/饼图.png)

- 迁徙图

![](img/迁徙图.png)

- 接入百度地图

![](img/接入百度地图.png)

## 使用服务端返回数据的异步加载和更新

详见官网：[异步数据加载和更新](https://echarts.baidu.com/tutorial.html#异步数据加载和更新)

```javascript
function method(init的char,option参数,查询条件1,查询条件2,查询条件3){
	//ECharts 默认有提供了一个简单的加载动画。只需要调用 showLoading 方法显示。数据加载完成后再调用 hideLoading 方法隐藏加载动画。
    chart.showLoading({
		text: '加载中...'
	});
    
	$.ajax({
		type:"POST",
		data:{"查询条件1":查询条件1,'查询条件2':查询条件2,'查询条件3':查询条件3},
        url:"/zhidinglianjie",
        success:function(data){
           if(data){
               	/*注意填入数据的格式：
               	series: [{
                    // 根据名字对应到相应的系列
                    name: '销量',
                    data: [53, 25, 26, 20, 32, 25]
        		}]*/
				option.series[0].data =  data.data
				option.series[1].data = data.categories
				chart.setOption(option);
           }else{
                
           }
            //数据加载完成后再调用 hideLoading 方法隐藏加载动画。
			chart.hideLoading();
        },
        error:function(jqXHR){
			chart.hideLoading();
        }
	});
}
```