echarts，中文API

ECharts是一款基于JavaScript、HTML5、CSS3技术的开源可视化图表库，由百度EFE团队开发维护。ECharts提供了各种类型的图表展示，如折线图、柱状图、散点图、饼图、地图等等。该库的引入操作简单，且对于用户定制化、扩展性方面提供的API也非常的全面。

一、ECharts的引入

在网页中引入ECharts有两种方式：通过CDN引入、或下载后通过本地文件引入。

通过CDN引入：

在HTML文件中，添加下面的代码：

```html

```

下载并通过本地文件引入：

在ECharts的官网(http://echarts.apache.org/index.html) 下载最新版本的ECharts库，并解压缩到你的项目中。在HTML文件中添加下面的代码：

```html

```

注：这里假设echarts.min.js文件放在当前HTML文件的同级目录下。

二、基本用法

使用ECharts制作图表需要先准备好数据，绑定数据后采用ECharts提供的一系列API对图表属性进行设置。下面通过一个柱状图的示例，详细介绍ECharts的用法。

1. 准备数据

在写示例之前，我们需要先定义好要展示的数据。假设我们要制作的是销售额统计柱状图，我们可以为数据起一个变量名为“data”。数据格式为一个由多个对象组成的数组，每个对象包含x坐标和y坐标的值，例如：

```javascript

var data = [

{ name: '1月', value: 100 },

{ name: '2月', value: 200 },

{ name: '3月', value: 300 },

{ name: '4月', value: 400 },

{ name: '5月', value: 500 },

{ name: '6月', value: 600 }

];

```

2. 准备容器

在HTML文件中，添加一个div标签做为容器，设置其宽度和高度。例如：

```html

```

3. 初始化ECharts

在JavaScript文件中，初始化ECharts。如下：

```javascript

// 基于准备好的dom，初始化echarts实例

var myChart = echarts.init(document.getElementById('main'));

```

4. 设置图表属性

在初始化之后，可以使用ECharts的方法设置图表属性，代码如下：

```javascript

// 指定图表的配置项和数据

var option = {

// 设置图表的标题

title: {

text: '柱状图示例'

},

// 设置图表的x轴和y轴

xAxis: {

data: ['1月', '2月', '3月', '4月', '5月', '6月']

},

yAxis: {},

// 设置柱状图的数据

series: [{

name: '销量',

type: 'bar',

data: [100, 200, 300, 400, 500, 600]

}]

};

// 使用刚指定的配置项和数据显示图表。

myChart.setOption(option);

```

然后，你就可以在浏览器中看到一个简单的柱状图了。

三、常用API

ECharts提供了很多API，以满足用户对图表的定制化需求。下面介绍一些常用API。

1. setOption

该方法用于设置图表的配置项和数据。代码如下：

```javascript

myChart.setOption(option);

```

2. clear

该方法用于清空图表。代码如下：

```javascript

myChart.clear();

```

3. resize

该方法用于调整图表容器的大小。代码如下：

```javascript

myChart.resize();

```

4. dispose

该方法用于释放图表实例，以及解绑所有事件处理器。代码如下：

```javascript

myChart.dispose();

```

5. on

该方法用于绑定事件处理器。代码如下：

```javascript

myChart.on('click', function(params) {

console.log(params);

});

```

params参数对象中包含了该事件的信息，例如params.name表示该事件所对应的x轴坐标的值。

以上是ECharts的基本入门，如需了解更多细节可以参考ECharts的官方文档(http://echarts.apache.org/index.html)。