数据怎么转化成图形分析？快来学习Echarts5开发技术

た入场券 2024-04-06 12:29 13阅读 0赞

**目录**

一. Apache ECharts

1.1 引入 Apache ECharts

1.2 开始简单的图表

二. 图表容器及大小

三. 数据集

四. 多个 dataset 以及如何引用他们

五. 使用 transform 进行数据转换

六. 坐标轴

6.1 x 轴、y 轴

6.2 轴线

6.3 刻度

6.4 刻度标签

6.5 示例

七. 图例

7.1 布局

八. 基本柱状图

8.1 最简单的柱状图

8.2 多系列的柱状图

8.3 柱状图样式设置

8.4 柱条宽度和高度

8.5 柱条间距

8.6 为柱条添加背景色

8.7 堆叠柱状图

8.8 基础折线图

九. 笛卡尔坐标系中的折线图

十. 折线图样式设置

10.1折线的样式

10.2 数据点的样式

十一. 在数据点处显示数值

11.1 堆叠折线图

11.2 阶梯线图

11.3 基础饼图

11.4 圆环图

11.5 南丁格尔图（玫瑰图）

11.6 基础散点图

11.7 基础的过渡动画

十二. 过渡动画的配置

12.1 动画时长

12.2 动画缓动

十三. 异步加载

总结

--------------------

## 一. Apache ECharts ##

> Apache ECharts 支持多种下载方式，从 [jsDelivr][] CDN 上获取为例，介绍如何快速安装。
> 
> 在 [echarts CDN by jsDelivr - A CDN for npm and GitHub][jsDelivr] 选择 `dist/echarts.js`，点击并保存为 `echarts.js` 文件。

### 1.1 引入 Apache ECharts ###

> 在刚才保存 `echarts.js` 的目录新建一个 `index.html` 文件，内容如下：

<!DOCTYPE html>
    <html>
      <head>
        <meta charset="utf-8" />
        
        <script src="echarts.js"></script>
      </head>
    </html>

> 打开这个 `index.html`，你会看到一片空白。但是不要担心，打开控制台确认没有报错信息，就可以进行下一步。

### 1.2 开始简单的图表 ###

> 在绘图前我们需要为 ECharts 准备一个定义了高宽的 DOM 容器。在刚才的例子 `</head>` 之后，添加：

> 然后就可以通过 [echarts.init][] 方法初始化一个 echarts 实例并通过 [setOption][] 方法生成一个简单的柱状图，下面是完整代码。

<!DOCTYPE html>
    <html>
      <head>
        <meta charset="utf-8" />
        <title>ECharts</title>
        
        <script src="echarts.js"></script>
      </head>
      <body>
        
        <div id="main" style="width: 600px;height:400px;"></div>
        <script type="text/javascript">
          // 基于准备好的dom，初始化echarts实例
          var myChart = echarts.init(document.getElementById('main'));
    
          // 指定图表的配置项和数据
          var option = {
            title: {
              text: 'ECharts 入门示例'
            },
            tooltip: {},
            legend: {
              data: ['销量']
            },
            xAxis: {
              data: ['衬衫', '羊毛衫', '雪纺衫', '裤子', '高跟鞋', '袜子']
            },
            yAxis: {},
            series: [
              {
                name: '销量',
                type: 'bar',
                data: [5, 20, 36, 10, 10, 20]
              }
            ]
          };
    
          // 使用刚指定的配置项和数据显示图表。
          myChart.setOption(option);
        </script>
      </body>
    </html>

结果截图：

![d28db4e54d21d0de81e92a9d21bf9ccb.png][]

--------------------

## 二. 图表容器及大小 ##

初始化

在 HTML 中定义有宽度和高度的父容器（推荐）

通常来说，需要在 HTML 中先定义一个 `<div>` 节点，并且通过 CSS 使得该节点具有宽度和高度。初始化的时候，传入该节点，图表的大小默认即为该节点的大小，除非声明了 `opts.width` 或 `opts.height` 将其覆盖。

<div id="main" style="width: 600px;height:400px;"></div>
    <script type="text/javascript">
      var myChart = echarts.init(document.getElementById('main'));
    </script>

需要注意的是，使用这种方法在调用 `echarts.init` 时需保证容器已经有宽度和高度了。

指定图表的大小

如果图表容器不存在宽度和高度，或者，你希望图表宽度和高度不等于容器大小，也可以在初始化的时候指定大小。

<div id="main"></div>
    <script type="text/javascript">
      var myChart = echarts.init(document.getElementById('main'), null, {
        width: 600,
        height: 400
      });
    </script>

响应容器大小的变化

监听图表容器的大小并改变图表大小

在有些场景下，我们希望当容器大小改变时，图表的大小也相应地改变。

比如，图表容器是一个高度为 400px、宽度为页面 100% 的节点，你希望在浏览器宽度改变的时候，始终保持图表宽度是页面的 100%。

这种情况下，可以监听页面的 `window.onresize` 事件获取浏览器大小改变的事件，然后调用 `echartsInstance.resize` 改变图表的大小。

为图表设置特定的大小

除了直接调用 `resize()` 不含参数的形式之外，还可以指定宽度和高度，实现图表大小不等于容器大小的效果。

myChart.resize({
      width: 800,
      height: 400
    });

--------------------

## 三. 数据集 ##

`数据集`（`dataset`）是专门用来管理数据的组件。虽然每个系列都可以在 `series.data` 中设置数据，但是从 ECharts4 支持 `数据集` 开始，更推荐使用 `数据集` 来管理数据。因为这样，数据可以被多个组件复用，也方便进行 “数据和其他配置” 分离的配置风格。毕竟，在运行时，数据是最常改变的，而其他配置大多并不会改变。

在系列中设置数据

如果数据设置在 `系列`（`series`）中，例如：

option = {
      xAxis: {
        type: 'category',
        data: ['Matcha Latte', 'Milk Tea', 'Cheese Cocoa', 'Walnut Brownie']
      },
      yAxis: {},
      series: [
        {
          type: 'bar',
          name: '2015',
          data: [89.3, 92.1, 94.4, 85.4]
        },
        {
          type: 'bar',
          name: '2016',
          data: [95.8, 89.4, 91.2, 76.9]
        },
        {
          type: 'bar',
          name: '2017',
          data: [97.7, 83.1, 92.5, 78.1]
        }
      ]
    };

![b3e5b53659f61c716e4d1ace53c00f8b.png][]

在数据集中设置数据

而数据设置在 `数据集`（`dataset`）中，会有这些好处：

*  能够贴近数据可视化常见思维方式：（I）提供数据，（II）指定数据到视觉的映射，从而形成图表。
 *  数据和其他配置可以被分离开来。数据常变，其他配置常不变。分开易于分别管理。
 *  数据可以被多个系列或者组件复用，对于大数据量的场景，不必为每个系列创建一份数据。
 *  支持更多的数据的常用格式，例如二维数组、对象数组等，一定程度上避免使用者为了数据格式而进行转换。

下面是一个最简单的 `dataset` 的例子：

option = {
      legend: {},
      tooltip: {},
      dataset: {
        // 提供一份数据。
        source: [
          ['product', '2015', '2016', '2017'],
          ['Matcha Latte', 43.3, 85.8, 93.7],
          ['Milk Tea', 83.1, 73.4, 55.1],
          ['Cheese Cocoa', 86.4, 65.2, 82.5],
          ['Walnut Brownie', 72.4, 53.9, 39.1]
        ]
      },
      // 声明一个 X 轴，类目轴（category）。默认情况下，类目轴对应到 dataset 第一列。
      xAxis: { type: 'category' },
      // 声明一个 Y 轴，数值轴。
      yAxis: {},
      // 声明多个 bar 系列，默认情况下，每个系列会自动对应到 dataset 的每一列。
      series: [{ type: 'bar' }, { type: 'bar' }, { type: 'bar' }]
    };

![8d132af0f6320a7b7973d466c9e82118.png][]

或者也可以使用常见的“对象数组”的格式：

option = {
      legend: {},
      tooltip: {},
      dataset: {
        // 用 dimensions 指定了维度的顺序。直角坐标系中，如果 X 轴 type 为 category，
        // 默认把第一个维度映射到 X 轴上，后面维度映射到 Y 轴上。
        // 如果不指定 dimensions，也可以通过指定 series.encode
        // 完成映射，参见后文。
        dimensions: ['product', '2015', '2016', '2017'],
        source: [
          { product: 'Matcha Latte', '2015': 43.3, '2016': 85.8, '2017': 93.7 },
          { product: 'Milk Tea', '2015': 83.1, '2016': 73.4, '2017': 55.1 },
          { product: 'Cheese Cocoa', '2015': 86.4, '2016': 65.2, '2017': 82.5 },
          { product: 'Walnut Brownie', '2015': 72.4, '2016': 53.9, '2017': 39.1 }
        ]
      },
      xAxis: { type: 'category' },
      yAxis: {},
      series: [{ type: 'bar' }, { type: 'bar' }, { type: 'bar' }]
    };

![0c3c687c1687d2b6fbec6e4538eef427.png][]

数据到图形的映射

如上所述，数据可视化的一个常见思路是：（I）提供数据，（II）指定数据到视觉的映射。

简而言之，可以进行这些映射的设定：

*  指定 `数据集` 的列（column）还是行（row）映射为 `系列`（`series`）。这件事可以使用 [series.seriesLayoutBy][] 属性来配置。默认是按照列（column）来映射。
 *  指定维度映射的规则：如何从 dataset 的维度（一个“维度”的意思是一行/列）映射到坐标轴（如 X、Y 轴）、提示框（tooltip）、标签（label）、图形元素大小颜色等（visualMap）。这件事可以使用 [series.encode][] 属性，以及 [visualMap][] 组件来配置（如果有需要映射颜色大小等视觉维度的话）。上面的例子中，没有给出这种映射配置，那么 ECharts 就按最常见的理解进行默认映射：X 坐标轴声明为类目轴，默认情况下会自动对应到 `dataset.source` 中的第一列；三个柱图系列，一一对应到 `dataset.source` 中后面每一列。

下面详细解释这些映射的设定。

把数据集（ dataset ）的行或列映射为系列（series）

有了数据表之后，使用者可以灵活地配置：数据如何对应到轴和图形系列。

用户可以使用 `seriesLayoutBy` 配置项，改变图表对于行列的理解。`seriesLayoutBy` 可取值：

*  'column': 默认值。系列被安放到 `dataset` 的列上面。
 *  'row': 系列被安放到 `dataset` 的行上面。

看这个例子：

option = {
      legend: {},
      tooltip: {},
      dataset: {
        source: [
          ['product', '2012', '2013', '2014', '2015'],
          ['Matcha Latte', 41.1, 30.4, 65.1, 53.3],
          ['Milk Tea', 86.5, 92.1, 85.7, 83.1],
          ['Cheese Cocoa', 24.1, 67.2, 79.5, 86.4]
        ]
      },
      xAxis: [
        { type: 'category', gridIndex: 0 },
        { type: 'category', gridIndex: 1 }
      ],
      yAxis: [{ gridIndex: 0 }, { gridIndex: 1 }],
      grid: [{ bottom: '55%' }, { top: '55%' }],
      series: [
        // 这几个系列会出现在第一个直角坐标系中，每个系列对应到 dataset 的每一行。
        { type: 'bar', seriesLayoutBy: 'row' },
        { type: 'bar', seriesLayoutBy: 'row' },
        { type: 'bar', seriesLayoutBy: 'row' },
        // 这几个系列会出现在第二个直角坐标系中，每个系列对应到 dataset 的每一列。
        { type: 'bar', xAxisIndex: 1, yAxisIndex: 1 },
        { type: 'bar', xAxisIndex: 1, yAxisIndex: 1 },
        { type: 'bar', xAxisIndex: 1, yAxisIndex: 1 },
        { type: 'bar', xAxisIndex: 1, yAxisIndex: 1 }
      ]
    };

![b06cce6ad6e7334b8649dc3d867060da.png][]

维度（ dimension ）

常用图表所描述的数据大部分是“二维表”结构，上述的例子中，我们都使用二维数组来容纳二维表。现在，当我们把系列（ series ）对应到“列”的时候，那么每一列就称为一个“维度（ dimension ）”，而每一行称为数据项（ item ）。反之，如果我们把系列（ series ）对应到表行，那么每一行就是“维度（ dimension ）”，每一列就是数据项（ item ）。

维度可以有单独的名字，便于在图表中显示。维度名（ dimension name ）可以在定义在 dataset 的第一行（或者第一列）。例如上面的例子中，`'score'`、`'amount'`、`'product'` 就是维度名。从第二行开始，才是正式的数据。`dataset.source` 中第一行（列）到底包含不包含维度名，ECharts 默认会自动探测。当然也可以设置 `dataset.sourceHeader: true` 显示声明第一行（列）就是维度，或者 `dataset.sourceHeader: false` 表明第一行（列）开始就直接是数据。

维度的定义，也可以使用单独的 `dataset.dimensions` 或者 `series.dimensions` 来定义，这样可以同时指定维度名，和维度的类型（ dimension type ）：

var option1 = {
      dataset: {
        dimensions: [
          { name: 'score' },
          // 可以简写为 string ，表示 dimension name 。
          'amount',
          // 可以在 type 中指定维度类型。
          { name: 'product', type: 'ordinal' }
        ],
        source: [
          //...
        ]
      }
      // ...
    };
    
    var option2 = {
      dataset: {
        source: [
          // ...
        ]
      },
      series: {
        type: 'line',
        // series.dimensions 会更优先于 dataset.dimension 采纳。
        dimensions: [
          null, // 可以设置为 null 表示不想设置维度名
          'amount',
          { name: 'product', type: 'ordinal' }
        ]
      }
      // ...
    };

大多数情况下，我们并不需要去设置维度类型，因为 ECharts 会自动尝试判断。但是如果不足够准确时，可以手动设置维度类型。

维度类型（ dimension type ）可以取这些值：

*  `'number'`: 默认，表示普通数据。
 *  `'ordinal'`: 对于类目、文本这些 string 类型的数据，如果需要能在数轴上使用，须是 'ordinal' 类型。ECharts 默认会试图自动判断这个类型。但是自动判断也可能不准确，所以使用者也可以手动强制指定。
 *  `'time'`: 表示时间数据。设置成 `'time'` 则能支持自动解析数据成时间戳（timestamp），比如该维度的数据是 '2017-05-10'，会自动被解析。如果这个维度被用在时间数轴（[axis.type][] 为 `'time'`）上，那么会被自动设置为 `'time'` 类型。时间类型的支持参见 [data][]。
 *  `'float'`: 如果设置成 `'float'`，在存储时候会使用 `TypedArray`，对性能优化有好处。
 *  `'int'`: 如果设置成 `'int'`，在存储时候会使用 `TypedArray`，对性能优化有好处。

数据到图形的映射（ series.encode ）

了解了维度的概念后，我们就可以使用 [series.encode][] 来做映射。总体是这样的感觉：

var option = {
      dataset: {
        source: [
          ['score', 'amount', 'product'],
          [89.3, 58212, 'Matcha Latte'],
          [57.1, 78254, 'Milk Tea'],
          [74.4, 41032, 'Cheese Cocoa'],
          [50.1, 12755, 'Cheese Brownie'],
          [89.7, 20145, 'Matcha Cocoa'],
          [68.1, 79146, 'Tea'],
          [19.6, 91852, 'Orange Juice'],
          [10.6, 101852, 'Lemon Juice'],
          [32.7, 20112, 'Walnut Brownie']
        ]
      },
      xAxis: {},
      yAxis: { type: 'category' },
      series: [
        {
          type: 'bar',
          encode: {
            // 将 "amount" 列映射到 X 轴。
            x: 'amount',
            // 将 "product" 列映射到 Y 轴。
            y: 'product'
          }
        }
      ]
    };

![d67ea3ddd98bf6fdf0576abb1605229a.png][]

`series.encode` 声明的基本结构如下。其中冒号左边是坐标系、标签等特定名称，如 `'x'`, `'y'`, `'tooltip'` 等，冒号右边是数据中的维度名（string 格式）或者维度的序号（number 格式，从 0 开始计数），可以指定一个或多个维度（使用数组）。通常情况下，下面各种信息不需要所有的都写，按需写即可。

下面是 `series.encode` 支持的属性：

// 在任何坐标系和系列中，都支持：
    encode: {
      // 使用 “名为 product 的维度” 和 “名为 score 的维度” 的值在 tooltip 中显示
      tooltip: ['product', 'score']
      // 使用 “维度 1” 和 “维度 3” 的维度名连起来作为系列名。（有时候名字比较长，这可以避免在 series.name 重复输入这些名字）
      seriesName: [1, 3],
      // 表示使用 “维度2” 中的值作为 id。这在使用 setOption 动态更新数据时有用处，可以使新老数据用 id 对应起来，从而能够产生合适的数据更新动画。
      itemId: 2,
      // 指定数据项的名称使用 “维度3” 在饼图等图表中有用，可以使这个名字显示在图例（legend）中。
      itemName: 3
    }
    
    // 直角坐标系（grid/cartesian）特有的属性：
    encode: {
      // 把 “维度1”、“维度5”、“名为 score 的维度” 映射到 X 轴：
      x: [1, 5, 'score'],
      // 把“维度0”映射到 Y 轴。
      y: 0
    }
    
    // 单轴（singleAxis）特有的属性：
    encode: {
      single: 3
    }
    
    // 极坐标系（polar）特有的属性：
    encode: {
      radius: 3,
      angle: 2
    }
    
    // 地理坐标系（geo）特有的属性：
    encode: {
      lng: 3,
      lat: 2
    }
    
    // 对于一些没有坐标系的图表，例如饼图、漏斗图等，可以是：
    encode: {
      value: 3
    }

默认的 series.encode

值得一提的是，当 `series.encode` 并没有指定时，ECharts 针对最常见直角坐标系中的图表（折线图、柱状图、散点图、K 线图等）、饼图、漏斗图，会采用一些默认的映射规则。默认的映射规则比较简单，大体是：

*  在坐标系中（如直角坐标系、极坐标系等）

*   *  如果有类目轴（axis.type 为 'category'），则将第一列（行）映射到这个轴上，后续每一列（行）对应一个系列。
     *  如果没有类目轴，假如坐标系有两个轴（例如直角坐标系的 X Y 轴），则每两列对应一个系列，这两列分别映射到这两个轴上。

*  如果没有坐标系（如饼图）

*   *  取第一列（行）为名字，第二列（行）为数值（如果只有一列，则取第一列为数值）。

默认的规则不能满足要求时，就可以自己来配置 `encode`，也并不复杂。这是一个 [例子][Link 1]。

几个常见的 series.encode 设置方式举例

问：如何把第三列设置为 X 轴，第五列设置为 Y 轴？

答：

option = {
      series: {
        // 注意维度序号（dimensionIndex）从 0 开始计数，第三列是 dimensions[2]。
        encode: { x: 2, y: 4 }
        // ...
      }
    };

问：如何把第三行设置为 X 轴，第五行设置为 Y 轴？

答：

option = {
      series: {
        encode: { x: 2, y: 4 },
        seriesLayoutBy: 'row'
        // ...
      }
    };

问：如何把第二列设置为标签？

答： 关于标签的显示 [label.formatter][]，现在支持引用特定维度的值，例如：

series: {
      label: {
        // `'{@score}'` 表示 “名为 score” 的维度里的值。
        // `'{@[4]}'` 表示引用序号为 4 的维度里的值。
        formatter: 'aaa{@product}bbb{@score}ccc{@[4]}ddd';
      }
    }

问：如何让第 2 列和第 3 列显示在提示框（tooltip）中？

答：

option = {
      series: {
        encode: {
          tooltip: [1, 2]
          // ...
        }
        // ...
      }
    };

问：数据里没有维度名，那么怎么给出维度名？

答：

var option = {
      dataset: {
        dimensions: ['score', 'amount'],
        source: [
          [89.3, 3371],
          [92.1, 8123],
          [94.4, 1954],
          [85.4, 829]
        ]
      }
    };

视觉通道（颜色、尺寸等）的映射

数据的各种格式

多数常见图表中，数据适于用二维表的形式描述。广为使用的数据表格软件（如 MS Excel、Numbers）或者关系数据数据库都是二维表。他们的数据可以导出成 JSON 格式，输入到 `dataset.source` 中，在不少情况下可以免去一些数据处理的步骤。

假如数据导出成 csv 文件，那么可以使用一些 csv 工具如 [dsv][] 或者 [PapaParse][] 将 csv 转成 JSON。

在 JavaScript 常用的数据传输格式中，二维数组可以比较直观的存储二维表。前面的示例都是使用二维数组表示。

除了二维数组以外，dataset 也支持例如下面 key-value 方式的数据格式，这类格式也非常常见。但是这类格式中，目前并不支持 [seriesLayoutBy][series.seriesLayoutBy] 参数。

dataset: [
      {
        // 按行的 key-value 形式（对象数组），这是个比较常见的格式。
        source: [
          { product: 'Matcha Latte', count: 823, score: 95.8 },
          { product: 'Milk Tea', count: 235, score: 81.4 },
          { product: 'Cheese Cocoa', count: 1042, score: 91.2 },
          { product: 'Walnut Brownie', count: 988, score: 76.9 }
        ]
      },
      {
        // 按列的 key-value 形式。
        source: {
          product: ['Matcha Latte', 'Milk Tea', 'Cheese Cocoa', 'Walnut Brownie'],
          count: [823, 235, 1042, 988],
          score: [95.8, 81.4, 91.2, 76.9]
        }
      }
    ];

--------------------

## 四. 多个 dataset 以及如何引用他们 ##

可以同时定义多个 dataset。系列可以通过 [series.datasetIndex][] 来指定引用哪个 dataset。例如：

var option = {
      dataset: [
        {
          // 序号为 0 的 dataset。
          source: []
        },
        {
          // 序号为 1 的 dataset。
          source: []
        },
        {
          // 序号为 2 的 dataset。
          source: []
        }
      ],
      series: [
        {
          // 使用序号为 2 的 dataset。
          datasetIndex: 2
        },
        {
          // 使用序号为 1 的 dataset。
          datasetIndex: 1
        }
      ]
    };

--------------------

## 五. 使用 transform 进行数据转换 ##

Apache EChartsTM 5 开始支持了“数据转换”（ data transform ）功能。在 echarts 中，“数据转换” 这个词指的是，给定一个已有的“数据集”（[dataset][]）和一个“转换方法”（[transform][]），echarts 能生成一个新的“数据集”，然后可以使用这个新的“数据集”绘制图表。这些工作都可以声明式地完成。

抽象地来说，数据转换是这样一种公式：`outData = f(inputData)`。`f` 是转换方法，例如：`filter`、`sort`、`regression`、`boxplot`、`cluster`、`aggregate`(todo) 等等。有了数据转换能力后，我们就至少可以做到这些事情：

*  把数据分成多份用不同的饼图展现。
 *  进行一些数据统计运算，并展示结果。
 *  用某些数据可视化算法处理数据，并展示结果。
 *  数据排序。
 *  去除或直选择数据项。

数据转换基础使用

在 echarts 中，数据转换是依托于数据集（[dataset][]）来实现的. 我们可以设置 [dataset.transform][transform] 来表示，此 dataset 的数据，来自于此 transform 的结果。

下面是上述例子的效果，三个饼图分别显示了 2011、2012、2013 年的数据。

var option = {
      dataset: [
        {
          // 这个 dataset 的 index 是 `0`。
          source: [
            ['Product', 'Sales', 'Price', 'Year'],
            ['Cake', 123, 32, 2011],
            ['Cereal', 231, 14, 2011],
            ['Tofu', 235, 5, 2011],
            ['Dumpling', 341, 25, 2011],
            ['Biscuit', 122, 29, 2011],
            ['Cake', 143, 30, 2012],
            ['Cereal', 201, 19, 2012],
            ['Tofu', 255, 7, 2012],
            ['Dumpling', 241, 27, 2012],
            ['Biscuit', 102, 34, 2012],
            ['Cake', 153, 28, 2013],
            ['Cereal', 181, 21, 2013],
            ['Tofu', 395, 4, 2013],
            ['Dumpling', 281, 31, 2013],
            ['Biscuit', 92, 39, 2013],
            ['Cake', 223, 29, 2014],
            ['Cereal', 211, 17, 2014],
            ['Tofu', 345, 3, 2014],
            ['Dumpling', 211, 35, 2014],
            ['Biscuit', 72, 24, 2014]
          ]
          // id: 'a'
        },
        {
          // 这个 dataset 的 index 是 `1`。
          // 这个 `transform` 配置，表示，此 dataset 的数据，来自于此 transform 的结果。
          transform: {
            type: 'filter',
            config: { dimension: 'Year', value: 2011 }
          }
          // 我们还可以设置这些可选的属性： `fromDatasetIndex` 或 `fromDatasetId`。
          // 这些属性，指定了，transform 的输入，来自于哪个 dataset。例如，
          // `fromDatasetIndex: 0` 表示输入来自于 index 为 `0` 的 dataset 。又例如，
          // `fromDatasetId: 'a'` 表示输入来自于 `id: 'a'` 的 dataset。
          // 当这些属性都不指定时，默认认为，输入来自于 index 为 `0` 的 dataset 。
        },
        {
          // 这个 dataset 的 index 是 `2`。
          // 同样，这里因为 `fromDatasetIndex` 和 `fromDatasetId` 都没有被指定，
          // 那么输入默认来自于 index 为 `0` 的 dataset 。
          transform: {
            // 这个类型为 "filter" 的 transform 能够遍历并筛选出满足条件的数据项。
            type: 'filter',
            // 每个 transform 如果需要有配置参数的话，都须配置在 `config` 里。
            // 在这个 "filter" transform 中，`config` 用于指定筛选条件。
            // 下面这个筛选条件是：选出维度（ dimension ）'Year' 中值为 2012 的所有
            // 数据项。
            config: { dimension: 'Year', value: 2012 }
          }
        },
        {
          // 这个 dataset 的 index 是 `3`。
          transform: {
            type: 'filter',
            config: { dimension: 'Year', value: 2013 }
          }
        }
      ],
      series: [
        {
          type: 'pie',
          radius: 50,
          center: ['25%', '50%'],
          // 这个饼图系列，引用了 index 为 `1` 的 dataset 。也就是，引用了上述
          // 2011 年那个 "filter" transform 的结果。
          datasetIndex: 1
        },
        {
          type: 'pie',
          radius: 50,
          center: ['50%', '50%'],
          datasetIndex: 2
        },
        {
          type: 'pie',
          radius: 50,
          center: ['75%', '50%'],
          datasetIndex: 3
        }
      ]
    };

![82f3ea08443481653245abdb33ae773b.png][]

使用 transform 时的几个要点：

*  在一个空的 dataset 中声明 `transform`, `fromDatasetIndex`/`fromDatasetId` 来表示我们要生成新的数据。
 *  系列引用这个 dataset 。

--------------------

## 六. 坐标轴 ##

直角坐标系中的 x/y 轴。

### 6.1 x 轴、y 轴 ###

x 轴和 y 轴都由轴线、刻度、刻度标签、轴标题四个部分组成。部分图表中还会有网格线来帮助查看和计算数据

![9f01fa71761c19d375ac988b8608dc1a.png][]

普通的二维数据坐标系都有 x 轴和 y 轴，通常情况下，x 轴显示在图表的底部，y 轴显示在左侧，一般配置如下：

option = {
      xAxis: {
        // ...
      },
      yAxis: {
        // ...
      }
    };

x 轴常用来标示数据的维度，维度一般用来指数据的类别，是观察数据的角度，例如“销售时间” “销售地点” “产品名称”等。y 轴常常用来标示数据的数值，数值是用来具体考察某一类数据的数量值，也是我们需要分析的指标，例如“销售数量”和“销售金额”等。

option = {
      xAxis: {
        type: 'time',
        name: '销售时间'
        // ...
      },
      yAxis: {
        type: 'value',
        name: '销售数量'
        // ...
      }
      // ...
    };

当 x 轴（水平坐标轴）跨度很大，可以采用区域缩放方式灵活显示数据内容。

option = {
      xAxis: {
        type: 'time',
        name: '销售时间'
        // ...
      },
      yAxis: {
        type: 'value',
        name: '销售数量'
        // ...
      },
      dataZoom: [
        // ...
      ]
      // ...
    };

在二维数据中，轴也可以有多个。ECharts 中一般情况下单个 grid 组件最多只能放两个 x/y 轴，多于两个 x/y 轴需要通过配置 [offset][] 属性防止同个位置多个轴的重叠。两个 x 轴显示在上下，两个 y 轴显示在左右两侧。

option = {
      xAxis: {
        type: 'time',
        name: '销售时间'
        // ...
      },
      yAxis: [
        {
          type: 'value',
          name: '销售数量'
          // ...
        },
        {
          type: 'value',
          name: '销售金额'
          // ...
        }
      ]
      // ...
    };

### 6.2 轴线 ###

ECharts 提供了轴线 [axisLine][] 相关的配置，我们可以根据实际情况调整，例如轴线两端的箭头，轴线的样式等。

option = {
      xAxis: {
        axisLine: {
          symbol: 'arrow',
          lineStyle: {
            type: 'dashed'
            // ...
          }
        }
        // ...
      },
      yAxis: {
        axisLine: {
          symbol: 'arrow',
          lineStyle: {
            type: 'dashed'
            // ...
          }
        }
      }
      // ...
    };

### 6.3 刻度 ###

ECharts 提供了轴线 [axisTick][] 相关的配置，我们可以根据实际情况调整，例如刻度线的长度，样式等。

option = {
      xAxis: {
        axisTick: {
          length: 6,
          lineStyle: {
            type: 'dashed'
            // ...
          }
        }
        // ...
      },
      yAxis: {
        axisTick: {
          length: 6,
          lineStyle: {
            type: 'dashed'
            // ...
          }
        }
      }
      // ...
    };

### 6.4 刻度标签 ###

ECharts 提供了轴线 [axisLabel][] 相关的配置，我们可以根据实际情况调整，例如文字对齐方式，自定义刻度标签内容等。

option = {
      xAxis: {
        axisLabel: {
          formatter: '{value} kg',
          align: 'center'
          // ...
        }
        // ...
      },
      yAxis: {
        axisLabel: {
          formatter: '{value} 元',
          align: 'center'
          // ...
        }
      }
      // ...
    };

### 6.5 示例 ###

图左侧的 y 轴代表东京月平均气温，右侧的 y 轴表示东京降水量，x 轴表示时间。两组 y 轴在一起，反映了平均气温和降水量间的趋势关系。

option = {
      tooltip: {
        trigger: 'axis',
        axisPointer: { type: 'cross' }
      },
      legend: {},
      xAxis: [
        {
          type: 'category',
          axisTick: {
            alignWithLabel: true
          },
          data: [
            '1月',
            '2月',
            '3月',
            '4月',
            '5月',
            '6月',
            '7月',
            '8月',
            '9月',
            '10月',
            '11月',
            '12月'
          ]
        }
      ],
      yAxis: [
        {
          type: 'value',
          name: '降水量',
          min: 0,
          max: 250,
          position: 'right',
          axisLabel: {
            formatter: '{value} ml'
          }
        },
        {
          type: 'value',
          name: '温度',
          min: 0,
          max: 25,
          position: 'left',
          axisLabel: {
            formatter: '{value} °C'
          }
        }
      ],
      series: [
        {
          name: '降水量',
          type: 'bar',
          yAxisIndex: 0,
          data: [6, 32, 70, 86, 68.7, 100.7, 125.6, 112.2, 78.7, 48.8, 36.0, 19.3]
        },
        {
          name: '温度',
          type: 'line',
          smooth: true,
          yAxisIndex: 1,
          data: [
            6.0,
            10.2,
            10.3,
            11.5,
            10.3,
            13.2,
            14.3,
            16.4,
            18.0,
            16.5,
            12.0,
            5.2
          ]
        }
      ]
    };

![0f407c9bc1fe04bf40c0b2672b5d3f30.png][]

--------------------

## 七. 图例 ##

图例是图表中对内容区元素的注释、用不同形状、颜色、文字等来标示不同数据列，通过点击对应数据列的标记，可以显示或隐藏该数据列。图例虽然不是图表中的主要信息、却是了解图表信息的钥匙。

### 7.1 布局 ###

图例一般放在图表的右上角、也可以放在图表的底部、同一页面中的所有图例位置保持一致，可以横排对齐也可以纵排对齐。还要综合考虑整体的图表空间是适合哪种摆放方式。当图表纵向空间紧张或者内容区量过大的时候、建议摆放在图表的下方。下面是几种图例的摆放方式：

option = {
      legend: {
        // Try 'horizontal'
        orient: 'vertical',
        right: 10,
        top: 'center'
      },
      dataset: {
        source: [
          ['product', '2015', '2016', '2017'],
          ['Matcha Latte', 43.3, 85.8, 93.7],
          ['Milk Tea', 83.1, 73.4, 55.1],
          ['Cheese Cocoa', 86.4, 65.2, 82.5],
          ['Walnut Brownie', 72.4, 53.9, 39.1]
        ]
      },
      xAxis: { type: 'category' },
      yAxis: {},
      series: [{ type: 'bar' }, { type: 'bar' }, { type: 'bar' }]
    };

![3d166c94f930761e44a52595d9b7fa96.png][]

--------------------

## 八. 基本柱状图 ##

柱状图（或称条形图）是一种通过柱形的长度来表现数据大小的一种常用图表类型。

设置柱状图的方式，是将 `series` 的 `type` 设为 `'bar'`。

### 8.1 最简单的柱状图 ###

最简单的柱状图可以这样设置：

option = {
      xAxis: {
        data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun']
      },
      yAxis: {},
      series: [
        {
          type: 'bar',
          data: [23, 24, 18, 25, 27, 28, 25]
        }
      ]
    };

![1f7c18341a8f14bf317cd841cd81d44e.png][]

在这个例子中，横坐标是类目型的，因此需要在 `xAxis` 中指定对应的值；而纵坐标是数值型的，可以根据 `series` 中的 `data`，自动生成对应的坐标范围。

### 8.2 多系列的柱状图 ###

我们可以用一个系列表示一组相关的数据，如果需要实现多系列的柱状图，只需要在 `series` 多添加一项就可以了——

option = {
      xAxis: {
        data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun']
      },
      yAxis: {},
      series: [
        {
          type: 'bar',
          data: [23, 24, 18, 25, 27, 28, 25]
        },
        {
          type: 'bar',
          data: [26, 24, 18, 22, 23, 20, 27]
        }
      ]
    };

![ac357e33d2ec72d1c8ff19c18d286c40.png][]

### 8.3 柱状图样式设置 ###

柱条样式

柱条的样式可以通过 `series.itemStyle` 设置，包括：

*  柱条的颜色（`color`）；
 *  柱条的描边颜色（`borderColor`）、宽度（`borderWidth`）、样式（`borderType`）；
 *  柱条圆角的半径（`barBorderRadius`）；
 *  柱条透明度（`opacity`）；
 *  阴影（`shadowBlur`、`shadowColor`、`shadowOffsetX`、`shadowOffsetY`）。

option = {
      xAxis: {
        data: ['A', 'B', 'C', 'D', 'E']
      },
      yAxis: {},
      series: [
        {
          type: 'bar',
          data: [
            10,
            22,
            28,
            {
              value: 43,
              // 设置单个柱子的样式
              itemStyle: {
                color: '#91cc75',
                shadowColor: '#91cc75',
                borderType: 'dashed',
                opacity: 0.5
              }
            },
            49
          ],
          itemStyle: {
            barBorderRadius: 5,
            borderWidth: 1,
            borderType: 'solid',
            borderColor: '#73c0de',
            shadowColor: '#5470c6',
            shadowBlur: 3
          }
        }
      ]
    };

![47e4294febd84571f13bfc7f42f59d0b.png][]

在这个例子中，我们通过设置柱状图对应 `series` 的`itemStyle`，设置了柱条的样式。完整的配置项及其用法请参见配置项手册 `series.itemStyle`。

### 8.4 柱条宽度和高度 ###

柱条宽度可以通过 `barWidth` 设置。比如在下面的例子中，将 `barWidth` 设为 `'20%'`，表示每个柱条的宽度就是类目宽度的 20%。由于这个例子中，每个系列有 5 个数据，20% 的类目宽度也就是整个 x 轴宽度的 4%。

option = {
      xAxis: {
        data: ['A', 'B', 'C', 'D', 'E']
      },
      yAxis: {},
      series: [
        {
          type: 'bar',
          data: [10, 22, 28, 43, 49],
          barWidth: '20%'
        }
      ]
    };

![4caf552179bb6d0e4b7a69759dd13004.png][]

另外，还可以设置 `barMaxWidth` 限制柱条的最大宽度。对于一些特别小的数据，我们也可以为柱条指定最小高度 `barMinHeight`，当数据对应的柱条高度小于该值时，柱条高度将采用这个最小高度。

### 8.5 柱条间距 ###

柱条间距分为两种，一种是不同系列在同一类目下的距离 `barGap`，另一种是类目与类目的距离 `barCategoryGap`。

option = {
      xAxis: {
        data: ['A', 'B', 'C', 'D', 'E']
      },
      yAxis: {},
      series: [
        {
          type: 'bar',
          data: [23, 24, 18, 25, 18],
          barGap: '20%',
          barCategoryGap: '40%'
        },
        {
          type: 'bar',
          data: [12, 14, 9, 9, 11]
        }
      ]
    };

![527aced7e4fa4c3daf873766cde085d7.png][]

在这个例子中，`barGap` 被设为 `'20%'`，这意味着每个类目（比如 `A`）下的两个柱子之间的距离，相对于柱条宽度的百分比。而 `barCategoryGap` 是 `'40%'`，意味着柱条每侧空余的距离，相对于柱条宽度的百分比。

通常而言，设置 `barGap` 及 `barCategoryGap` 后，就不需要设置 `barWidth` 了，这时候的宽度会自动调整。如果有需要的话，可以设置 `barMaxWidth` 作为柱条宽度的上限，当图表宽度很大的时候，柱条宽度也不会太宽。

在同一坐标系上，此属性会被多个柱状图系列共享。此属性应设置于此坐标系中最后一个柱状图系列上才会生效，并且是对此坐标系中所有柱状图系列生效。

### 8.6 为柱条添加背景色 ###

有时，我们希望能够为柱条添加背景色。从 ECharts 4.7.0 版本开始，这一功能可以简单地用 `showBackground` 开启，并且可以通过 `backgroundStyle` 配置。

option = {
      xAxis: {
        type: 'category',
        data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun']
      },
      yAxis: {
        type: 'value'
      },
      series: [
        {
          data: [120, 200, 150, 80, 70, 110, 130],
          type: 'bar',
          showBackground: true,
          backgroundStyle: {
            color: 'rgba(220, 220, 220, 0.8)'
          }
        }
      ]
    };

![01db6cb618a369415be44f273683cd5c.png][]

### 8.7 堆叠柱状图 ###

堆积柱状图就是一个系列的数值“堆积”在另一个系列上，因而从他们的高度总和就能表达总量的变化。使用 EChart 实现堆积折线图的方法非常简单，只需要给一个系列的 `stack` 值设置一个字符串类型的值，这一个值表示该系列堆积的类别。也就是说，拥有同样 `stack` 值的系列将堆积在一组。

option = {
      xAxis: {
        data: ['A', 'B', 'C', 'D', 'E']
      },
      yAxis: {},
      series: [
        {
          data: [10, 22, 28, 43, 49],
          type: 'bar',
          stack: 'x'
        },
        {
          data: [5, 4, 3, 5, 10],
          type: 'bar',
          stack: 'x'
        }
      ]
    };

![b4a386d3f11c29bdc224420e4d8e992b.png][]

### 8.8 基础折线图 ###

折线图主要用来展示数据项随着时间推移的趋势或变化。

最简单的折线图

如果我们想建立一个横坐标是类目型（category）、纵坐标是数值型（value）的折线图，我们可以使用这样的方式：

option = {
      xAxis: {
        type: 'category',
        data: ['A', 'B', 'C']
      },
      yAxis: {
        type: 'value'
      },
      series: [
        {
          data: [120, 200, 150],
          type: 'line'
        }
      ]
    };

![62fe5cb0ba526d87022b27027b7bd872.png][]

在这个例子中，我们通过 `xAxis` 将横坐标设为类目型，并指定了对应的值；通过 `type` 将 `yAxis` 的类型设定为数值型。在 `series` 中，我们将系列类型设为 `line`，并且通过 `data` 指定了折线图三个点的取值。这样，就能得到一个最简单的折线图了。

这里 `xAxis` 和 `yAxis` 的 `type` 属性都可以隐去不写。因为坐标轴的默认类型是数值型，而 `xAxis` 指定了类目型的 `data`，所以 `ECharts` 也能识别出这是类目型的坐标轴。为了让大家更容易理解，我们特意写了 `type`。在实际的应用中，如果是 `'value'` 类型，也可以省略不写。

--------------------

## 九. 笛卡尔坐标系中的折线图 ##

如果我们希望折线图在横坐标和纵坐标上都是连续的，即在笛卡尔坐标系中，应该如何实现呢？答案也很简单，只要把 `series` 的 `data` 每个数据用一个包含两个元素的数组表示就行了。

option = {
      xAxis: {},
      yAxis: {},
      series: [
        {
          data: [
            [20, 120],
            [50, 200],
            [40, 50]
          ],
          type: 'line'
        }
      ]
    };

![3794436dba44a18ebb25dd8c42f6a659.png][]

--------------------

## 十. 折线图样式设置 ##

### 10.1折线的样式 ###

折线图中折线的样式可以通过 `lineStyle` 设置。可以为其指定颜色、线宽、折线类型、阴影、不透明度等等，具体的可以参考配置项手册 `series.lineStyle` 了解。这里，我们以设置颜色（color）、线宽（width）和折线类型（type）为例说明。

option = {
      xAxis: {
        data: ['A', 'B', 'C', 'D', 'E']
      },
      yAxis: {},
      series: [
        {
          data: [10, 22, 28, 23, 19],
          type: 'line',
          lineStyle: {
            normal: {
              color: 'green',
              width: 4,
              type: 'dashed'
            }
          }
        }
      ]
    };

![e91a8110342dbd69bee36a64f333bfc9.png][]

这里设置折线宽度时，数据点描边的宽度是不会跟着改变的，而应该在数据点的配置项中另外设置。

### 10.2 数据点的样式 ###

数据点的样式可以通过 `series.itemStyle` 指定填充颜色（color）、描边颜色（borderColor）、描边宽度（borderWidth）、描边类型（borderType）、阴影（shadowColor）、不透明度（opacity）等。与折线样式的设置十分相似，这里不再展开说明。

--------------------

### 十一. 在数据点处显示数值 ###

在系列中，这数据点的标签通过 `series.label` 属性指定。如果将 `label` 下的 `show` 指定为`true`，则表示该数值默认时就显示；如果为 `false`，而 `series.emphasis.label.show` 为 `true`，则表示只有在鼠标移动到该数据时，才显示数值。

option = {
      xAxis: {
        data: ['A', 'B', 'C', 'D', 'E']
      },
      yAxis: {},
      series: [
        {
          data: [10, 22, 28, 23, 19],
          type: 'line',
          label: {
            show: true,
            position: 'bottom',
            textStyle: {
              fontSize: 20
            }
          }
        }
      ]
    };

![95e2082295d55fe9f0937c30b018861a.png][]

空数据

在一个系列中，可能一个横坐标对应的取值是“空”的，将其设为 0 有时并不能满足我们的期望--空数据不应被其左右的数据连接。

在 ECharts 中，我们使用字符串 `'-'` 表示空数据，这对其他系列的数据也是适用的。

option = {
      xAxis: {
        data: ['A', 'B', 'C', 'D', 'E']
      },
      yAxis: {},
      series: [
        {
          data: [0, 22, '-', 23, 19],
          type: 'line'
        }
      ]
    };

![e84ff43e3a30a0d02c742a21ebb0cc46.png][]

注意区别这个例子中，“空”数据与取值为 0 的数据。

### 11.1 堆叠折线图 ###

与堆叠柱状图类似，堆叠折线图也是用系列的 `stack` 设置哪些系列堆叠在一起。

option = {
      xAxis: {
        data: ['A', 'B', 'C', 'D', 'E']
      },
      yAxis: {},
      series: [
        {
          data: [10, 22, 28, 43, 49],
          type: 'line',
          stack: 'x'
        },
        {
          data: [5, 4, 3, 5, 10],
          type: 'line',
          stack: 'x'
        }
      ]
    };

![8e3047c17aaf1e6dfbf10f273857bc57.png][]

但是不同的是，如果不加说明的话，我们很难判断出这是一个堆叠折线图，还是一个普通的折线图。所以，对于堆叠折线图而言，一般建议使用区域填充色以表明堆叠的情况。

option = {
      xAxis: {
        data: ['A', 'B', 'C', 'D', 'E']
      },
      yAxis: {},
      series: [
        {
          data: [10, 22, 28, 43, 49],
          type: 'line',
          stack: 'x',
          areaStyle: {}
        },
        {
          data: [5, 4, 3, 5, 10],
          type: 'line',
          stack: 'x',
          areaStyle: {}
        }
      ]
    };

![9ac2e220000d41c51998d771436ceb2c.png][]

### 11.2 阶梯线图 ###

阶梯线图又称方波图，它使用水平和垂直的线来连接两个数据点，而普通折线图则直接将两个点连接起来。阶梯线图能够很好地表达数据的突变。

在 ECharts 中，系列的 `step` 属性用来表征阶梯线图的连接类型，它共有三种取值：`'start'`、`'middle'` 和 `'end'`，分别表示在当前点，当前点与下个点的中间点，下个点拐弯。

option = {
      xAxis: {
        type: 'category',
        data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun']
      },
      yAxis: {
        type: 'value'
      },
      series: [
        {
          name: 'Step Start',
          type: 'line',
          step: 'start',
          data: [120, 132, 101, 134, 90, 230, 210]
        },
        {
          name: 'Step Middle',
          type: 'line',
          step: 'middle',
          data: [220, 282, 201, 234, 290, 430, 410]
        },
        {
          name: 'Step End',
          type: 'line',
          step: 'end',
          data: [450, 432, 401, 454, 590, 530, 510]
        }
      ]
    };

![a93f966c32cf53340d5ecd9d147af797.png][]

请注意这个例子中不同的 `step` 取值对应的数据点和连线的区别。

### 11.3 基础饼图 ###

饼图主要用于表现不同类目的数据在总和中的占比。每个的弧度表示数据数量的比例。

最简单的饼图

饼图的配置和折线图、柱状图略有不同，不再需要配置坐标轴，而是把数据名称和值都写在系列中。以下是一个最简单的饼图的例子。

option = {
      series: [
        {
          type: 'pie',
          data: [
            {
              value: 335,
              name: '直接访问'
            },
            {
              value: 234,
              name: '联盟广告'
            },
            {
              value: 1548,
              name: '搜索引擎'
            }
          ]
        }
      ]
    };

![31613dbb6ab1ebae079811b642667189.png][]

需要注意的是，这里是 `value` 不需要是百分比数据，ECharts 会根据所有数据的 `value` ，按比例分配它们在饼图中对应的弧度。

饼图样式设置

饼图的半径

饼图的半径可以通过 `series.radius` 设置，可以是诸如 `'60%'` 这样相对的百分比字符串，或是 `200` 这样的绝对像素数值。当它是百分比字符串时，它是相对于容器宽高中较小的一条边的。也就是说，如果宽度大于高度，则百分比是相对于高度的，反之则反；当它是数值型时，它表示绝对的像素大小。

option = {
      series: [
        {
          type: 'pie',
          data: [
            {
              value: 335,
              name: '直接访问'
            },
            {
              value: 234,
              name: '联盟广告'
            },
            {
              value: 1548,
              name: '搜索引擎'
            }
          ],
          radius: '50%'
        }
      ]
    };

![d8cf7041a01fc3d5c55fe17f1817c2ed.png][]

如果数据和为 0，不显示饼图

在默认情况下，如果数据值和为 0，会显示平均分割的扇形。比如，如果有 4 个数据项，并且每个数据项都是 0，则每个扇形都是 90°。如果我们希望在这种情况下不显示任何扇形，可以将 `series.stillShowZeroSum` 设为 `false`。

option = {
      series: [
        {
          type: 'pie',
          stillShowZeroSum: false,
          data: [
            {
              value: 0,
              name: '直接访问'
            },
            {
              value: 0,
              name: '联盟广告'
            },
            {
              value: 0,
              name: '搜索引擎'
            }
          ]
        }
      ]
    };

![91905f6abe80958a86a90f47029bcb5d.png][]

如果希望扇形对应的标签也不显示，可以将 `series.label.show` 设为 `false`。

option = {
      series: [
        {
          type: 'pie',
          stillShowZeroSum: false,
          label: {
            show: false
          },
          data: [
            {
              value: 0,
              name: '直接访问'
            },
            {
              value: 0,
              name: '联盟广告'
            },
            {
              value: 0,
              name: '搜索引擎'
            }
          ]
        }
      ]
    };

### 11.4 圆环图 ###

圆环图同样可以用来表示数据占总体的比例，相比于饼图，它中间空余的部分可以用来显示一些额外的文字等信息，因而也是一种常用的图表类型。

基础圆环图

在 ECharts 中，饼图的半径除了上一小节提到的，可以是一个数值或者字符串之外，还可以是一个包含两个元素的数组，每个元素可以为数值或字符串。当它是一个数组时，它的前一项表示内半径，后一项表示外半径，这样就形成了一个圆环图。

从这个角度上来说，可以认为饼图是一个内半径为 0 的圆环图，也就是说，饼图是圆环图的特例。

option = {
      title: {
        text: '圆环图的例子',
        left: 'center',
        top: 'center'
      },
      series: [
        {
          type: 'pie',
          data: [
            {
              value: 335,
              name: 'A'
            },
            {
              value: 234,
              name: 'B'
            },
            {
              value: 1548,
              name: 'C'
            }
          ],
          radius: ['40%', '70%']
        }
      ]
    };

![ee256d4050da7646cb0927d04454f39d.png][]

如果半径是数组，其中的两项也可以一项是数值，另一项是百分比形式的字符串。但是这样可能导致在某些分辨率下，内半径小于外半径。ECharts 会自动使用小的一项作为内半径，但是仍应小心这样可能会导致的非预期效果。

### 11.5 南丁格尔图（玫瑰图） ###

南丁格尔图又称玫瑰图，通常用弧度相同但半径不同的扇形表示各个类目。

ECharts 可以通过将饼图的 `series.roseType` 值设为 `'area'` 实现南丁格尔图，其他配置项和饼图是相同的。

option = {
      series: [
        {
          type: 'pie',
          data: [
            {
              value: 100,
              name: 'A'
            },
            {
              value: 200,
              name: 'B'
            },
            {
              value: 300,
              name: 'C'
            },
            {
              value: 400,
              name: 'D'
            },
            {
              value: 500,
              name: 'E'
            }
          ],
          roseType: 'area'
        }
      ]
    };

![32ab2e51e0fedd569f72fdb0c3d000eb.png][]

### 11.6 基础散点图 ###

散点图，也是一种常见的图表类型。散点图由许多“点”组成，有时，这些点用来表示数据在坐标系中的位置（比如在笛卡尔坐标系下，表示数据在 x 轴和 y 轴上的坐标；在地图坐标系下，表示数据在地图上的某个位置等）；有时，这些点的大小、颜色等属性也可以映射到数据值，用以表现高维数据。

最简单的散点图

下面是一个横坐标为类目轴、纵坐标为数值轴的最简单的散点图配置：

option = {
      xAxis: {
        data: ['Sun', 'Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat']
      },
      yAxis: {},
      series: [
        {
          type: 'scatter',
          data: [220, 182, 191, 234, 290, 330, 310]
        }
      ]
    };

![163255984c8c6522e1cdfb2a085d8fdf.png][]

### 11.7 基础的过渡动画 ###

Apache EChartsTM 中使用了平移，缩放，变形等形式的过渡动画让数据的添加更新删除，以及用户的交互变得更加顺滑。通常情况下开发者不需要操心该如何去使用动画，只需要按自己的需求使用`setOption`更新数据，ECharts 就会找出跟上一次数据之间的区别，然后自动应用最合适的过渡动画。

比如下面例子就是定时更新饼图数据（随机）的过渡动画效果。

--------------------

## 十二. 过渡动画的配置 ##

因为数据添加和数据更新往往会需要不一样的动画效果，比如我们会期望数据更新动画的时长更短，因此 ECharts 区分了这两者的动画配置：

*  对于新添加的数据，我们会应用入场动画，通过`animationDuration`, `animationEasing`, `animationDelay`三个配置项分别配置动画的时长，缓动以及延时。
 *  对于数据更新，我们会应用更新动画，通过`animationDurationUpdate`, `animationEasingUpdate`, `animationDelayUpdate`三个配置项分别配置动画的时长，缓动以及延时。

可以看到，更新动画配置是入场动画配置加上了`Update`的后缀。

在 ECharts 中每次 setOption 的更新，数据会跟上一次更新的数据做对比，然后根据对比结果分别为数据执行三种状态：添加，更新以及移除。这个比对是根据数据的`name`来决定的，例如上一次更新数据有三个`name`为`'A'`, `'B'`, `'C'`的数据，而新更新的数据变为了`'B'`, `'C'`, `'D'`的数据，则数据`'B'`, `'C'`会被执行更新，数据`'A'`会被移除，而数据`'D'`会被添加。如果是第一次更新因为没有旧数据，所以所有数据都会被执行添加。根据这三种状态 ECharts 会分别应用相应的入场动画，更新动画以及移除动画。

所有这些配置都可以分别设置在`option`最顶层对所有系列和组件生效，也可以分别为每个系列配置。

如果我们想要关闭动画，可以直接设置`option.animation`为`false`。

### 12.1 动画时长 ###

`animationDuration`和`animationDurationUpdate`用于设置动画的时长，单位为`ms`，设置较长的动画时长可以让用户更清晰的看到过渡动画的效果，但是我们也需要小心过长的时间会让用户再等待的过程中失去耐心。

设置为`0`会关闭动画，在我们只想要单独关闭入场动画或者更新动画的时候可以通过单独将相应的配置设置为`0`来实现。

### 12.2 动画缓动 ###

`animationEasing`和`animationEasingUpdate`两个配置项用于设置动画的缓动函数，缓动函数是一个输入动画时间，输出动画进度的函数：

(t: number) => number;

在 ECharts 里内置了缓入`'cubicIn'`，缓出`'cubicOut'`等常见的动画缓动函数，我们可以直接通过名字来声明使用这些缓动函数。

内置缓动函数：

![be2840510962708fc4f52996d5121b55.png][]

--------------------

## 十三. 异步加载 ##

[入门示例][Link 2]中的数据是在初始化后`setOption`中直接填入的，但是很多时候可能数据需要异步加载后再填入。`ECharts` 中实现异步数据的更新非常简单，在图表初始化后不管任何时候只要通过 jQuery 等工具异步获取数据后通过 `setOption` 填入数据和配置项就行。

或者先设置完其它的样式，显示一个空的直角坐标轴，然后获取数据后填入数据。

如下：

![b207db2154658cbc668625e7ecc64096.png][]

ECharts 中在更新数据的时候需要通过`name`属性对应到相应的系列，上面示例中如果`name`不存在也可以根据系列的顺序正常更新，但是更多时候推荐更新数据的时候加上系列的`name`数据。

--------------------

## 总结 ##

ECharts，一个使用 JavaScript 实现的开源可视化库，可以流畅的运行在 PC 和移动设备上，兼容当前绝大部分浏览器（IE9/10/11，Chrome，Firefox，Safari等），底层依赖矢量图形库 [ZRender][]，提供直观，交互丰富，可高度个性化定制的数据可视化图表。

丰富的可视化类型

ECharts 提供了常规的[折线图][Link 3]、[柱状图][Link 4]、[散点图][Link 5]、[饼图][Link 6]、[K线图][K]，用于统计的[盒形图][Link 7]，用于地理数据可视化的[地图][Link 8]、[热力图][Link 9]、[线图][Link 10]，用于关系数据可视化的[关系图][Link 11]、[treemap][]、[旭日图][Link 12]，多维数据可视化的[平行坐标][Link 13]，还有用于 BI 的[漏斗图][Link 14]，[仪表盘][Link 15]，并且支持图与图之间的混搭。

除了已经内置的包含了丰富功能的图表，ECharts 还提供了[自定义系列][Link 16]，只需要传入一个*renderItem*函数，就可以从数据映射到任何你想要的图形，更棒的是这些都还能和已有的交互组件结合使用而不需要操心其它事情。

你可以在下载界面下载包含所有图表的构建文件，如果只是需要其中一两个图表，又嫌包含所有图表的构建文件太大，也可以在在线构建中选择需要的图表类型后自定义构建。

多种数据格式无需转换直接使用

ECharts 内置的 dataset 属性（4.0+）支持直接传入包括二维表，key-value 等多种格式的数据源，通过简单的设置 encode 属性就可以完成从数据到图形的映射，这种方式更符合可视化的直觉，省去了大部分场景下数据转换的步骤。

[jsDelivr]: https://www.jsdelivr.com/package/npm/echarts
[echarts.init]: https://echarts.apache.org//api.html#echarts.init
[setOption]: https://echarts.apache.org//api.html#echartsInstance.setOption
[d28db4e54d21d0de81e92a9d21bf9ccb.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/06/aea8e4806c59462ba98c290fe12a4f74.png
[b3e5b53659f61c716e4d1ace53c00f8b.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/06/06841b8c19c5480eadb25ebdb3bc409f.png
[8d132af0f6320a7b7973d466c9e82118.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/06/a330d08c9de041a18afc15107a663ac6.png
[0c3c687c1687d2b6fbec6e4538eef427.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/06/0a641680de524de789756d269becd2ef.png
[series.seriesLayoutBy]: https://echarts.apache.org/option.html#%23series.seriesLayoutBy
[series.encode]: https://echarts.apache.org/option.html#%23series.encode
[visualMap]: https://echarts.apache.org/option.html#%23visualMap
[b06cce6ad6e7334b8649dc3d867060da.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/06/93df0c4b5f3b4143a881c6ba43cdad94.png
[axis.type]: https://echarts.apache.org/option.html#%23xAxis.type
[data]: https://echarts.apache.org/option.html#%23series.data
[d67ea3ddd98bf6fdf0576abb1605229a.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/06/54513539fe2e4c2d8bae4e4d4e9311da.png
[Link 1]: https://echarts.apache.org/examples/zh/editor.html?c=dataset-default&edit=1&reset=1
[label.formatter]: https://echarts.apache.org/option.html#%23series.label.formatter
[dsv]: https://github.com/d3/d3-dsv
[PapaParse]: https://github.com/mholt/PapaParse
[series.datasetIndex]: https://echarts.apache.org/option.html#%23series.datasetIndex
[dataset]: https://echarts.apache.org/option.html#%23dataset
[transform]: https://echarts.apache.org/option.html#%23dataset.transform
[82f3ea08443481653245abdb33ae773b.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/06/0fe426547f9a4f5fb648b7c052c2fbc9.png
[9f01fa71761c19d375ac988b8608dc1a.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/06/939f240e1b1d429b8af48f94fec7c0b1.png
[offset]: https://echarts.apache.org/option.html#xAxis.offset
[axisLine]: https://echarts.apache.org/option.html#xAxis.axisLine
[axisTick]: https://echarts.apache.org/option.html#xAxis.axisTick
[axisLabel]: https://echarts.apache.org/option.html#xAxis.axisLabel
[0f407c9bc1fe04bf40c0b2672b5d3f30.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/06/1f27aff3478f48ff87e990a7525c815f.png
[3d166c94f930761e44a52595d9b7fa96.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/06/63451b12a6d64f8bac3b00692875bb38.png
[1f7c18341a8f14bf317cd841cd81d44e.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/06/d3e77e6c7b57443697f2ada24c1a6095.png
[ac357e33d2ec72d1c8ff19c18d286c40.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/06/08608ff1b5d54fa681a55acdb9e263b1.png
[47e4294febd84571f13bfc7f42f59d0b.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/06/d08603655533491ca09b7b6158a76865.png
[4caf552179bb6d0e4b7a69759dd13004.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/06/5b2aae838d2e4fea928eff25570c2063.png
[527aced7e4fa4c3daf873766cde085d7.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/06/8ba793ecc36c409c82af09842affffca.png
[01db6cb618a369415be44f273683cd5c.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/06/cc5c08bfb7704003af55bb7c7e2cdc97.png
[b4a386d3f11c29bdc224420e4d8e992b.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/06/83ce503574e84bafaecd152a947817a9.png
[62fe5cb0ba526d87022b27027b7bd872.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/06/dedafc9051af4b4cbd569af2e9eea25e.png
[3794436dba44a18ebb25dd8c42f6a659.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/06/0f848c9d4e5544b8b47d285f2031f963.png
[e91a8110342dbd69bee36a64f333bfc9.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/06/316c3c8b549e4b07b2dd6701c32ee4b7.png
[95e2082295d55fe9f0937c30b018861a.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/06/3c62c32911e742b59da6ba2eda407f1d.png
[e84ff43e3a30a0d02c742a21ebb0cc46.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/06/d6ff2e62be914c9c90610033a430001f.png
[8e3047c17aaf1e6dfbf10f273857bc57.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/06/f0fbb93cd270477781e755876a90c8b0.png
[9ac2e220000d41c51998d771436ceb2c.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/06/7c209f2247a54137a21c0f585ba4dbee.png
[a93f966c32cf53340d5ecd9d147af797.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/06/fd401ead794a425eb8fc465f646add78.png
[31613dbb6ab1ebae079811b642667189.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/06/40ead7092f9345c692ef115fc51e8ddb.png
[d8cf7041a01fc3d5c55fe17f1817c2ed.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/06/5ec03e368faa474197175cf6a482df17.png
[91905f6abe80958a86a90f47029bcb5d.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/06/e3b32db2942c4058b991a8e7cc6c8677.png
[ee256d4050da7646cb0927d04454f39d.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/06/0b075581dd7a48378a692e1d117fdac1.png
[32ab2e51e0fedd569f72fdb0c3d000eb.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/06/a11ff0aa8bca422a83b3763f7510d2bb.png
[163255984c8c6522e1cdfb2a085d8fdf.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/06/7c4ced57071c45889006d7208b96974c.png
[be2840510962708fc4f52996d5121b55.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/06/5167cb1e7aee406989719a9a5781506a.png
[Link 2]: https://echarts.apache.org/handbook/zh/get-started
[b207db2154658cbc668625e7ecc64096.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/06/dbe9d7208b2d47408c183341b70491b1.png
[ZRender]: https://github.com/ecomfe/zrender
[Link 3]: https://echarts.apache.org/zh/option.html#series-line
[Link 4]: https://echarts.apache.org/zh/option.html#series-bar
[Link 5]: https://echarts.apache.org/zh/option.html#series-scatter
[Link 6]: https://echarts.apache.org/zh/option.html#series-pie
[K]: https://echarts.apache.org/zh/option.html#series-candlestick
[Link 7]: https://echarts.apache.org/zh/option.html#series-boxplot
[Link 8]: https://echarts.apache.org/zh/option.html#series-map
[Link 9]: https://echarts.apache.org/zh/option.html#series-heatmap
[Link 10]: https://echarts.apache.org/zh/option.html#series-lines
[Link 11]: https://echarts.apache.org/zh/option.html#series-graph
[treemap]: https://echarts.apache.org/zh/option.html#series-treemap
[Link 12]: https://echarts.apache.org/zh/option.html#series-sunburst
[Link 13]: https://echarts.apache.org/zh/option.html#series-parallel
[Link 14]: https://echarts.apache.org/zh/option.html#series-funnel
[Link 15]: https://echarts.apache.org/zh/option.html#series-gauge
[Link 16]: https://echarts.apache.org/zh/option.html#series-custom