Vue使用Echart5

## 一、安装Echarts5

#### 1、CDN

在 https://www.jsdelivr.com/package/npm/echarts 选择 `dist/echarts.js`，点击并保存为 `/src/js/echarts.js` 文件。

在项目根目录新建一个 `index.html` 文件，内容如下：

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

#### 2、NPM

```bash
npm install echarts --save
```

#### 3、简单图表示例

```html
<template>
  <div class="home">
    <div id="main" style="height: 500px;width: 100%;" ref="main"></div>
  </div>
</template>

## 二、初始化

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

#### 1、指定尺寸

在初始化时指定`opts`参数中的宽高属性

```html
<template>
  <div class="home">
    <div id="main" ref="main"></div>
  </div>
</template>

#### 2、动态调整尺寸

借助浏览器的 `ResizeObserver` API 来实现组件尺寸监听，也可以通过`chart.resize({width:...,height:...});`来指定图表尺寸

```html
<template>
  <div class="home">
    <div id="main" style="height: 500px;width: 100%;" ref="main" v-resize="handleResize"></div>
  </div>
</template>

export default {
  name: 'HomeView',
  components: {},
  mounted() {
    this.initChart()
  },
  data() {
    return {
      chart: null
    }
  },
  methods: {
    initChart() {
      this.chart = echarts.init(this.$refs.main);
      this.chart.setOption({
        title: {
          text: 'ECharts 入门示例'
        },
        tooltip: {},
        legend: {},
        xAxis: {
          data: ['衬衫', '羊毛衫', '雪纺衫', '裤子', '高跟鞋', '袜子']
        },
        yAxis: {},
        series: [{
          name: '销量',
          type: 'bar',
          data: [5, 20, 36, 10, 10, 20]
        }]
      });
    },
    handleResize() {
      // 图表实例调用 resize 方法，实现图表自适应
      this.chart.resize();
    },
  }, directives: {
    resize: {
      bind(el, binding) {
        const resizeObserver = new ResizeObserver(entries => {
          entries.forEach(entry => {
            const {width, height} = entry.contentRect;
            binding.value({width, height});
          });
        });
        resizeObserver.observe(el);
        el._resizeObserver = resizeObserver;
      },
      unbind(el) {
        if (el._resizeObserver) {
          el._resizeObserver.disconnect();
        }
      }
    }
  }
}
</script>
```

## 三、样式

可以通过设置样式，改变图形元素或者文字的颜色、明暗、大小等

#### 1、颜色主题

ECharts5 除了一贯的默认主题外，还内置了`'dark'`主题。可以像这样切换成深色模式：

```js
this.chart = echarts.init(this.$refs.main, 'dark');
```

其他的主题，没有内置在 ECharts 中，需要自己加载。可以通过官方提供的 [主题编辑器](https://echarts.apache.org/zh/theme-builder.html)来可视化编辑主题，并将其下载保存为`json`格式

如果主题保存为 JSON 文件，则需要自行加载和注册，例如：

```html
<template>
  <div class="home">
    <div id="main" style="height: 500px;width: 100%;" ref="main"></div>
  </div>
</template>

export default {
  name: 'HomeView',
  components: {},
  mounted() {
    this.initChart()
  },
  data() {
    return {
      chart: null
    }
  },
  methods: {
    initChart() {
      // 假定下载的主题为vintage
      fetch('../theme/vintage.json')
          .then(r => r.json())
          .then(theme => {
            echarts.registerTheme('vintage', theme);
            this.chart = echarts.init(this.$refs.main, 'vintage');
            this.chart.setOption({
              title: {
                text: 'ECharts 入门示例'
              },
              tooltip: {},
              legend: {},
              xAxis: {
                data: ['衬衫', '羊毛衫', '雪纺衫', '裤子', '高跟鞋', '袜子']
              },
              yAxis: {},
              series: [{
                name: '销量',
                type: 'bar',
                data: [5, 20, 36, 10, 10, 20]
              }]
            });
          });
    }
  }
}
</script>
```

**注意**：主题文件必须放在`public`文件夹下，否则项目构建后会找不到文件。

#### 2、直接修改

直接的样式设置是比较常用设置方式。纵观 ECharts 的 `option` 中，很多地方可以设置 `itemStyle`、`lineStyle`、`areaStyle`、`label` 等等。这些的地方可以直接设置图形元素的颜色、线宽、点的大小、标签的文字、标签的样式等等。

```html
<template>
  <div class="home">
    <div id="main" style="height: 500px;width: 100%;" ref="main"></div>
  </div>
</template>

常见的属性：

**color**: 使用函数为每个柱子设置不同的颜色

**borderColor**: 设置柱子边框颜色为黑色

**borderWidth**: 设置边框宽度为 1 像素

**borderRadius**: 设置柱子顶部圆角

**shadowColor**: 设置阴影颜色

**shadowBlur**: 设置阴影模糊度

**shadowOffsetX/Y**: 设置阴影偏移量

#### 3、高亮样式

在鼠标悬浮到图形元素上时，一般会出现高亮的样式。默认情况下，高亮的样式是根据普通样式自动生成的。但是高亮的样式也可以自己定义，主要是通过 `emphasis` 属性来定制。`emphasis` 中的结构，和普通样式的结构相同

```html
<template>
  <div class="home">
    <div id="main" style="height: 500px;width: 100%;" ref="main"></div>
  </div>
</template>

export default {
  name: 'HomeView',
  components: {},
  mounted() {
    this.initChart()
  },
  data() {
    return {
      chart: null
    }
  },
  methods: {
    initChart() {
      this.chart = echarts.init(this.$refs.main);
      this.chart.setOption({
        title: {
          text: 'ECharts 入门示例'
        },
        tooltip: {},
        legend: {},
        xAxis: {
          data: ['衬衫', '羊毛衫', '雪纺衫', '裤子', '高跟鞋', '袜子']
        },
        yAxis: {},
        series: [{
          name: '销量',
          type: 'bar',
          data: [5, 20, 36, 10, 10, 20],
          itemStyle: {
            borderRadius: [5, 5, 0, 0], // 圆角设置，分别为左上、右上、右下、左下
            shadowColor: 'rgba(0, 0, 0, 0.5)',
            shadowBlur: 10,
            shadowOffsetX: 0,
            shadowOffsetY: 2
          },
          emphasis: {
            itemStyle: {
              color: '#ff0000', // 高亮时的颜色
              borderColor: '#ffffff', // 高亮时的边框颜色
              borderWidth: 2, // 高亮时的边框宽度
              shadowBlur: 20, // 高亮时的阴影模糊度
              shadowColor: 'rgba(255, 0, 0, 0.8)' // 高亮时的阴影颜色
            },
            label: {
              show: true, // 显示标签
              fontSize: 16, // 标签字体大小
              fontWeight: 'bold' // 标签字体粗细
            }
          }
        }]
      });
    }
  }
}
</script>
```

## 四、数据集

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

#### 1、在`series`中设置数据

这种方式的优点是，适于对一些特殊的数据结构（如“树”、“图”、超大数据）进行一定的数据类型定制。 但是缺点是，常需要用户先处理数据，把数据分割设置到各个系列（和类目轴）中。此外，不利于多个系列共享一份数据，也不利于基于原始数据进行图表类型、系列的映射安排。

```html
<template>
  <div class="home">
    <div id="main" style="height: 500px;width: 100%;" ref="main"></div>
  </div>
</template>

export default {
  name: 'HomeView',
  components: {},
  mounted() {
    this.initChart()
  },
  data() {
    return {
      chart: null
    }
  },
  methods: {
    initChart() {
      const 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]
          }
        ]
      };
      this.chart = echarts.init(this.$refs.main);
      this.chart.setOption({
        title: {
          text: 'ECharts 入门示例'
        },
        tooltip: {},
        legend: {},
        ...option
      });
    }
  }
}
</script>
```

#### 2、在`dataset`中设置数据

在 `数据集` 中，会有这些好处：

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

```html
<template>
  <div class="home">
    <div id="main" style="height: 500px;width: 100%;" ref="main"></div>
  </div>
</template>

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

```html
<template>
  <div class="home">
    <div id="main" style="height: 500px;width: 100%;" ref="main"></div>
  </div>
</template>

export default {
  name: 'HomeView',
  components: {},
  mounted() {
    this.initChart()
  },
  data() {
    return {
      chart: null
    }
  },
  methods: {
    initChart() {
      const option = {
        legend: {},
        tooltip: {},
        dataset: {
          // 用 dimensions 指定了维度的顺序。直角坐标系中，如果 X 轴 type 为 category，
          // 默认把第一个维度映射到 X 轴上，后面维度映射到 Y 轴上。
          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' }]
      };
      this.chart = echarts.init(this.$refs.main);
      this.chart.setOption({
        title: {
          text: 'ECharts 入门示例'
        },
        tooltip: {},
        legend: {},
        ...option
      });
    }
  }
}
</script>
```

#### 3、将`dataset`映射到`series`

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

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

```html
<template>
  <div class="home">
    <div id="main" style="height: 500px;width: 100%;" ref="main"></div>
  </div>
</template>

export default {
  name: 'HomeView',
  components: {},
  mounted() {
    this.initChart()
  },
  data() {
    return {
      chart: null
    }
  },
  methods: {
    initChart() {
      const 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', xAxisIndex: 0, yAxisIndex: 0 },
          { type: 'bar', seriesLayoutBy: 'row', xAxisIndex: 0, yAxisIndex: 0 },
          { type: 'bar', seriesLayoutBy: 'row', xAxisIndex: 0, yAxisIndex: 0 },
          // 这几个系列会出现在第二个直角坐标系中，每个系列对应到 dataset 的每一列。
          { type: 'bar', seriesLayoutBy: 'column', xAxisIndex: 1, yAxisIndex: 1 },
          { type: 'bar', seriesLayoutBy: 'column', xAxisIndex: 1, yAxisIndex: 1 },
          { type: 'bar', seriesLayoutBy: 'column', xAxisIndex: 1, yAxisIndex: 1 },
          { type: 'bar', seriesLayoutBy: 'column', xAxisIndex: 1, yAxisIndex: 1 }
        ]
      };
      this.chart = echarts.init(this.$refs.main);
      this.chart.setOption({
        title: {
          text: 'ECharts 入门示例'
        },
        ...option
      });
    }
  }
}
</script>
```

#### 4、维度`dimension`

常用图表所描述的数据大部分是`二维表`结构。当把系列（`series`）对应到`列`的时候，那么每一列就称为一个`维度(dimension)`，而每一行称为数据项（`item`）。反之，如果把系列（`series`）对应到表行，那么每一行就是`维度(dimension)`，每一列就是数据项（`item`）。

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

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

```js
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](https://echarts.apache.org/option.html#series.data)。
- `float`: 如果设置成 `float`，在存储时候会使用 `TypedArray`，对性能优化有好处。
- `int`: 如果设置成 `int`，在存储时候会使用 `TypedArray`，对性能优化有好处。

#### 5、数据到图形的映射

```html
<template>
  <div class="home">
    <div id="main" style="height: 500px;width: 100%;" ref="main"></div>
  </div>
</template>

export default {
  name: 'HomeView',
  components: {},
  mounted() {
    this.initChart()
  },
  data() {
    return {
      chart: null
    }
  },
  methods: {
    initChart() {
      const 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'
            }
          }
        ]
      };
      this.chart = echarts.init(this.$refs.main);
      this.chart.setOption({
        title: {
          text: 'ECharts 入门示例'
        },
        tooltip: {},
        legend: {},
        ...option
      });
    }
  }
}
</script>
```

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

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

```js
// 在任何坐标系和系列中，都支持：
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`。

## 五、数据转换

在 echarts 中，`数据转换` 这个词指的是，给定一个已有的`数据集(dataset)`和一个`转换方法(transform)`，echarts 能生成一个新的`数据集`，然后可以使用这个新的`数据集`绘制图表。

抽象地来说，数据转换是这样一种公式：`outData = f(inputData)`。`f` 是转换方法，例如：`filter`、`sort`、`regression`、`boxplot`、`cluster`、`aggregate`(todo) 等等。

#### 1、简单使用

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

```html
<template>
  <div class="home">
    <div id="main" style="height: 500px;width: 100%;" ref="main"></div>
  </div>
</template>

export default {
  name: 'HomeView',
  components: {},
  mounted() {
    this.initChart()
  },
  data() {
    return {
      chart: null
    }
  },
  methods: {
    initChart() {
      const 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]
            ]
          },
          {
            // 这个 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
          }
        ]
      };
      this.chart = echarts.init(this.$refs.main);
      this.chart.setOption({
        title: {
          text: 'ECharts 入门示例'
        },
        tooltip: {},
        legend: {},
        ...option
      });
    }
  }
}
</script>
```

#### 2、链式声明`transform`

理论上，任何 transform 都可能有多个输入或多个输出。但是，如果一个 transform 被链式声明，它只能获取前一个 transform 的第一个输出作为输入（第一个 transform 除外），以及它只能把自己的第一个输出给到后一个 transform （最后一个 transform 除外）。

```html
<template>
  <div class="home">
    <div id="main" style="height: 500px;width: 100%;" ref="main"></div>
  </div>
</template>

```

#### 3、filter

##### 示例

```html
<template>
  <div class="home">
    <div id="main" style="height: 500px;width: 100%;" ref="main"></div>
  </div>
</template>

export default {
  name: 'HomeView',
  components: {},
  mounted() {
    this.initChart()
  },
  data() {
    return {
      chart: null
    }
  },
  methods: {
    initChart() {
      const option = {
        dataset: [
          {
            source: [
              ['Product', 'Sales', 'Price', 'Year'],
              ['Cake', 123, 32, 2011],
              ['Latte', 231, 14, 2011],
              ['Tofu', 235, 5, 2011],
              ['Milk Tee', 341, 25, 2011],
              ['Porridge', 122, 29, 2011],
              ['Cake', 143, 30, 2012],
              ['Latte', 201, 19, 2012],
              ['Tofu', 255, 7, 2012],
              ['Milk Tee', 241, 27, 2012],
              ['Porridge', 102, 34, 2012],
              ['Cake', 153, 28, 2013],
              ['Latte', 181, 21, 2013],
              ['Tofu', 395, 4, 2013],
              ['Milk Tee', 281, 31, 2013],
              ['Porridge', 92, 39, 2013],
              ['Cake', 223, 29, 2014],
              ['Latte', 211, 17, 2014],
              ['Tofu', 345, 3, 2014],
              ['Milk Tee', 211, 35, 2014],
              ['Porridge', 72, 24, 2014]
            ]
          },
          {
            transform: {
              type: 'filter',
              config: { dimension: 'Year', '=': 2011 }
              // 这个筛选条件表示，遍历数据，筛选出维度（ dimension ）
              // 'Year' 上值为 2011 的所有数据项。
            }
          }
        ],
        series: {
          type: 'pie',
          datasetIndex: 1
        }
      };
      this.chart = echarts.init(this.$refs.main);
      this.chart.setOption({
        title: {
          text: 'ECharts 入门示例'
        },
        tooltip: {},
        legend: {},
        ...option
      });
    }
  }
}
</script>
```

**注意**：`config.dimension` 指定了维度，能设成这样的值：

- 设定成声明在 dataset 中的维度名，例如 `config: { dimension: 'Year', '=': 2011 }`。不过， dataset 中维度名的声明并非强制，所以我们也可以
- 设定成 dataset 中的维度 index （index 值从 0 开始）例如 `config: { dimension: 3, '=': 2011 }`。

##### 关系比较操作符

关系操作符，可以设定这些： `>`（`gt`）、`>=`（`gte`）、`<`（`lt`）、`<=`（`lte`）、`=`（`eq`）、`!=`（`ne`、`<>`）、`reg`。（小括号中的符号或名字，是别名，设置起来作用相同）。他们首先基本地能基于数值大小进行比较，然后也有些额外的功能特性：

- 多个关系操作符能声明在一个 {} 中，例如 `{ dimension: 'Price', '>=': 20, '<': 30 }`。这表示“与”的关系，即，筛选出价格大于等于 20 小于 30 的数据项。
- data 里的值，不仅可以是数值（ number ），也可以是“类数值的字符串”（“ numeric string ”）。“类数值的字符串”本身是一个字符串，但是可以被转换为字面所描述的数值，例如 `' 123 '`。转换过程中，空格（全角半角空格）和换行符都能被消除（ trim ）。
- 如果我们需要对日期对象（JS `Date`）或者日期字符串（如 '2012-05-12'）进行比较，我们需要手动指定 `parser: 'time'`，例如 `config: { dimension: 3, lt: '2012-05-12', parser: 'time' }`。
- 纯字符串比较也被支持，但是只能用在 `=` 或 `!=` 上。而 `>`, `>=`, `<`, `<=` 并不支持纯字符串比较，也就是说，这四个操作符的右值，不能是字符串。
- `reg` 操作符能提供正则表达式比较。例如， `{ dimension: 'Name', reg: /\s+Müller\s*$/ }` 能在 `'Name'` 维度上选出姓 `'Müller'` 的数据项。

##### 逻辑比较

```js
const option = {
  dataset: [
    {
      source: [
        // ...
      ]
    },
    {
      transform: {
        type: 'filter',
        config: {
          // 使用 and 操作符。
          // 类似地，同样的位置也可以使用 “or” 或 “not”。
          // 但是注意 “not” 后应该跟一个 {...} 而非 [...] 。
          and: [
            { dimension: 'Year', '=': 2011 },
            { dimension: 'Price', '>=': 20, '<': 30 }
          ]
        }
        // 这个表达的是，选出 2011 年价格大于等于 20 但小于 30 的数据项。
      }
    }
  ],
  series: {
    type: 'pie',
    datasetIndex: 1
  }
};
```

`and`/`or`/`not` 自然可以被嵌套，例如：

```js
transform: {
  type: 'filter',
  config: {
    or: [{
      and: [{
        dimension: 'Price', '>=': 10, '<': 20
      }, {
        dimension: 'Sales', '<': 100
      }, {
        not: { dimension: 'Product', '=': 'Tofu' }
      }]
    }, {
      and: [{
        dimension: 'Price', '>=': 10, '<': 20
      }, {
        dimension: 'Sales', '<': 100
      }, {
        not: { dimension: 'Product', '=': 'Cake' }
      }]
    }]
  }
}
```

##### 解析器`parser`

还可以指定“解析器”（ parser ）来对值进行解析后再做比较。现在支持的解析器有：

- `parser: 'time'`：把原始值解析成时间戳（ timestamp ）后再做比较。这个解析器的行为，和 `echarts.time.parse` 相同，即，当原始值为时间对象（ JS `Date` 实例），或者是时间戳，或者是描述时间的字符串（例如 `'2012-05-12 03:11:22'` ），都可以被解析为时间戳，然后就可以基于数值大小进行比较。如果原始数据是其他不可解析为时间戳的值，那么会被解析为 NaN。
- `parser: 'trim'`：如果原始数据是字符串，则把字符串两端的空格（全角半角）和换行符去掉。如果不是字符串，还保持为原始数据。
- `parser: 'number'`：强制把原始数据转成数值。如果不能转成有意义的数值，那么转成 `NaN`。在大多数场景下，我们并不需要这个解析器，因为按默认策略，“像数值的字符串”就会被转成数值。但是默认策略比较严格，这个解析器比较宽松，如果我们遇到含有尾缀的字符串（例如 `'33%'`, `12px`），我们需要手动指定 `parser: 'number'`，从而去掉尾缀转为数值才能比较。

```html
<template>
  <div class="home">
    <div id="main" style="height: 500px;width: 100%;" ref="main"></div>
  </div>
</template>

export default {
  name: 'HomeView',
  components: {},
  mounted() {
    this.initChart()
  },
  data() {
    return {
      chart: null
    }
  },
  methods: {
    initChart() {
      const option = {
        dataset: [
          {
            source: [
              ['Product', 'Sales', 'Price', 'Date'],
              ['Milk Tee', 311, 21, '2012-05-12'],
              ['Cake', 135, 28, '2012-05-22'],
              ['Latte', 262, 36, '2012-06-02'],
              ['Milk Tee', 359, 21, '2012-06-22'],
              ['Cake', 121, 28, '2012-07-02'],
              ['Latte', 271, 36, '2012-06-22']
              // ...
            ]
          },
          {
            transform: {
              type: 'filter',
              config: {
                dimension: 'Date',
                '>=': '2012-05',
                '<': '2012-06',
                parser: 'time'
              }
            }
          }
        ],
        series: {
          type: 'pie',
          datasetIndex: 1
        }
      };
      this.chart = echarts.init(this.$refs.main);
      this.chart.setOption({
        title: {
          text: 'ECharts 入门示例'
        },
        tooltip: {},
        legend: {},
        ...option
      });
    }
  }
}
</script>
```

#### 4、sort

`sort`是另一个内置的数据转换器，用于排序数据。目前主要能用于在类目轴（ `axis.type: 'category'` ）中显示排过序的数据。

##### 示例

```html
<template>
  <div class="home">
    <div id="main" style="height: 500px;width: 100%;" ref="main"></div>
  </div>
</template>

## 六、坐标轴

#### 1、X/Y轴

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

![img](https://pic.soki.me/file/piclist/charts_axis_img02-1765775703006.jpg)

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

```js
const option = {
  xAxis: {
    // ...
  },
  yAxis: {
    // ...
  }
};
```

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

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

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

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

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

```html
<template>
  <div class="home">
    <div id="main" style="height: 500px;width: 100%;" ref="main"></div>
  </div>
</template>

export default {
  name: 'HomeView',
  components: {},
  mounted() {
    this.initChart()
  },
  data() {
    return {
      chart: null
    }
  },
  methods: {
    initChart() {
      const option = {
        dataset: [
          {
            dimensions: ['name', 'age', 'profession', 'score', 'date'],
            source: [
              [' Hannah Krause ', 41, 'Engineer', 314, '2011-02-12'],
              ['Zhao Qian ', 20, 'Teacher', 351, '2011-03-01'],
              [' Jasmin Krause ', 52, 'Musician', 287, '2011-02-14'],
              ['Li Lei', 37, 'Teacher', 219, '2011-02-18'],
              [' Karle Neumann ', 25, 'Engineer', 253, '2011-04-02'],
              [' Adrian Groß', 19, 'Teacher', null, '2011-01-16'],
              ['Mia Neumann', 71, 'Engineer', 165, '2011-03-19'],
              [' Böhm Fuchs', 36, 'Musician', 318, '2011-02-24'],
              ['Han Meimei ', 67, 'Engineer', 366, '2011-03-12']
            ]
          },
          {
            transform: {
              type: 'sort',
              // 按分数排序
              config: [
                // 对两个维度按声明的优先级分别排序。
                {dimension: 'profession', order: 'desc'},
                {dimension: 'score', order: 'desc'}
              ]
            }
          }
        ],
        // 声明一个 X 轴，类目轴（category）。默认情况下，类目轴对应到 dataset 第一列。
        xAxis: {type: 'category'},
        // 声明多个 Y 轴
        yAxis: [
          {
            type: 'value',
            name: '年龄',
            position: 'left',
            axisLine: {
              show: true,
              lineStyle: {
                color: '#5470C6'
              }
            },
            axisLabel: {
              formatter: '{value} 岁'
            }
          },
          {
            type: 'value',
            name: '分数',
            position: 'right',
            axisLine: {
              show: true,
              lineStyle: {
                color: '#91CC75'
              }
            },
            axisLabel: {
              formatter: '{value} 分'
            }
          }
        ],
        series: [
          {
            name: '年龄',
            type: 'bar',
            yAxisIndex: 0, // 使用第一个Y轴
            datasetIndex: 1,
            encode: {
              x: 'name',
              y: 'age'
            }
          },
          {
            name: '分数',
            type: 'bar',
            yAxisIndex: 1, // 使用第二个Y轴
            datasetIndex: 1,
            encode: {
              x: 'name',
              y: 'score'
            }
          }
        ]
        // ...
      };
      this.chart = echarts.init(this.$refs.main);
      this.chart.setOption({
        title: {
          text: 'ECharts 入门示例'
        },
        tooltip: {},
        legend: {},
        ...option
      });
    }
  }
}
</script>
```

#### 2、轴线

可以根据实际情况调整，例如轴线两端的箭头，轴线的样式等

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

#### 3、刻度

可以根据实际情况调整，例如刻度线的长度，样式等

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

#### 4、刻度标签

可以根据实际情况调整，例如文字对齐方式，自定义刻度标签内容等

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

## 七、图例

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

#### 1、布局

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

```html
<template>
  <div class="home">
    <div id="main" style="height: 500px;width: 100%;" ref="main"></div>
  </div>
</template>

export default {
  name: 'HomeView',
  components: {},
  mounted() {
    this.initChart()
  },
  data() {
    return {
      chart: null
    }
  },
  methods: {
    initChart() {
      const 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' }]
      };
      this.chart = echarts.init(this.$refs.main);
      this.chart.setOption({
        title: {
          text: 'ECharts 入门示例'
        },
        tooltip: {},
        legend: {},
        ...option
      });
    }
  }
}
</script>
```

对于图例较多时，可以使用可滚动翻页的图例

```js
const option = {
  legend: {
    type: 'scroll',
    orient: 'vertical',
    right: 10,
    top: 20,
    bottom: 20,
    data: ['图例一', '图例二', '图例三' /* ... */, , '图例n']
    // ...
  }
  // ...
};
```

#### 2、样式

在深色系背景下、为了方便阅读，建议给图例加上半透明的浅色背景层，文字颜色设置为浅色。

```js
const option = {
  legend: {
    data: ['图例一', '图例二', '图例三'],
    backgroundColor: '#ccc',
    textStyle: {
      color: '#ccc'
      // ...
    }
    // ...
  }
  // ...
};
```

图例的颜色标签有很多种设计方式、针对不同的图表、图例样式也会有所不同。

![img](https://pic.soki.me/file/piclist/charts_sign_img04-1765788326239.png)

```js
const option = {
  legend: {
    data: ['图例一', '图例二', '图例三'],
    icon: 'rect'
    // ...
  }
  // ...
};
```

#### 3、交互

根据场景需要，图例可支持交互操作，点击控制显示或隐藏对应的数据列；

```js
const option = {
  legend: {
    data: ['图例一', '图例二', '图例三'],
    selected: {
      图例一: true,
      图例二: true,
      图例三: false
    }
    // ...
  }
  // ...
};
```

#### 4、图例注意事项

图例要注意视情况使用，有些双轴图包含了多种图表类型，不同类型的图例样式要有所区分。

```js
const option = {
  legend: {
    data: [
      {
        name: '图例一',
        icon: 'rect'
      },
      {
        name: '图例二',
        icon: 'circle'
      },
      {
        name: '图例三',
        icon: 'pin'
      }
    ]
    // ...
  },
  series: [
    {
      name: '图例一'
      // ...
    },
    {
      name: '图例二'
      // ...
    },
    {
      name: '图例三'
      // ...
    }
  ]
  // ...
};
```

当图表只有一种数据信息时，用图表标题说明数据信息即可。建议此时不要加上图例。

## 八、事件与行为

在 ECharts 中事件分为两种类型，一种是用户鼠标操作点击，或者 hover 图表的图形时触发的事件，还有一种是用户在使用可以交互的组件后触发的行为事件，例如在切换图例开关时触发的 `legendselectchanged` 事件（这里需要注意切换图例开关是不会触发 `'legendselected'` 事件的），数据区域缩放时触发的 `datazoom` 事件等等。

#### 1、鼠标事件的处理

```html
<template>
  <div class="home">
    <div id="main" style="height: 500px;width: 100%;" ref="main"></div>
  </div>
</template>

**注意**：ECharts 中的事件名称对应 DOM 事件名称，均为小写的字符串。

所有的鼠标事件包含参数 `params`，这是一个包含点击图形的数据信息的对象，如下格式：

```ts
type EventParams = {
  // 当前点击的图形元素所属的组件名称，
  // 其值如 'series'、'markLine'、'markPoint'、'timeLine' 等。
  componentType: string;
  // 系列类型。值可能为：'line'、'bar'、'pie' 等。当 componentType 为 'series' 时有意义。
  seriesType: string;
  // 系列在传入的 option.series 中的 index。当 componentType 为 'series' 时有意义。
  seriesIndex: number;
  // 系列名称。当 componentType 为 'series' 时有意义。
  seriesName: string;
  // 数据名，类目名
  name: string;
  // 数据在传入的 data 数组中的 index
  dataIndex: number;
  // 传入的原始数据项
  data: Object;
  // sankey、graph 等图表同时含有 nodeData 和 edgeData 两种 data，
  // dataType 的值会是 'node' 或者 'edge'，表示当前点击在 node 还是 edge 上。
  // 其他大部分图表中只有一种 data，dataType 无意义。
  dataType: string;
  // 传入的数据值
  value: number | Array;
  // 数据图形的颜色。当 componentType 为 'series' 时有意义。
  color: string;
};
```

如何区分鼠标点击到了哪里：

```js
this.chart.on('click', (params) => {
  if (params.componentType === 'markPoint') {
    // 点击到了 markPoint 上
    if (params.seriesIndex === 5) {
      // 点击到了 index 为 5 的 series 的 markPoint 上。
    }
  } else if (params.componentType === 'series') {
    if (params.seriesType === 'graph') {
      if (params.dataType === 'edge') {
        // 点击到了 graph 的 edge（边）上。
      } else {
        // 点击到了 graph 的 node（节点）上。
      }
    }
  }
});
```

使用 `query` 只对指定的组件的图形元素的触发回调：

```js
chart.on(eventName, query, handler);
```

`query` 可为 `string` 或者 `Object`。

如果为 `string` 表示组件类型。格式可以是 `mainType` 或者 `mainType.subType`。例如：

```js
chart.on('click', 'series', function() {});
chart.on('click', 'series.line', function() {});
chart.on('click', 'dataZoom', function() {});
chart.on('click', 'xAxis.category', function() {});
```

如果为 `Object`，可以包含以下一个或多个属性，每个属性都是可选的：

```ts
{
  ${mainType}Index: number // 组件 index
  ${mainType}Name: string // 组件 name
  ${mainType}Id: string // 组件 id
  dataIndex: number // 数据项 index
  name: string // 数据项 name
  dataType: string // 数据项 type，如关系图中的 'node', 'edge'
  element: string // 自定义系列中的 el 的 name
}
```

#### 2、组件交互的行为事件

在 ECharts 中基本上所有的组件交互行为都会触发相应的事件，常用的事件和事件对应参数在 [events](https://echarts.apache.org//api.html#events) 文档中有列出。

下面是监听一个图例开关的示例：

```html
<template>
  <div class="home">
    <div id="main" style="height: 500px;width: 100%;" ref="main"></div>
  </div>
</template>

#### 3、代码触发 ECharts 中组件的行为

上面提到诸如 `'legendselectchanged'` 事件会由组件交互的行为触发，那除了用户的交互操作，有时候也会有需要在程序里调用方法触发图表的行为，诸如显示 tooltip，选中图例。

在 ECharts 通过调用 `myChart.dispatchAction({ type: '' })` 触发图表行为，统一管理了所有动作，也可以方便地根据需要去记录用户的行为路径。

常用的动作和动作对应参数在 [action](https://echarts.apache.org//api.html#action) 文档中有列出。

下面示例演示了如何通过 `dispatchAction` 去轮流高亮饼图的每个扇形。

```html
<template>
  <div class="home">
    <div id="main" style="height: 500px;width: 100%;" ref="main"></div>
  </div>
</template>

export default {
  name: 'HomeView',
  components: {},
  mounted() {
    this.initChart()
  },
  data() {
    return {
      chart: null
    }
  },
  methods: {
    initChart() {
      const option = {
        title: {
          text: '饼图程序调用高亮示例',
          left: 'center'
        },
        tooltip: {
          trigger: 'item',
          formatter: '{a} <br/>{b} : {c} ({d}%)'
        },
        legend: {
          orient: 'vertical',
          left: 'left',
          data: ['直接访问', '邮件营销', '联盟广告', '视频广告', '搜索引擎']
        },
        series: [
          {
            name: '访问来源',
            type: 'pie',
            radius: '55%',
            center: ['50%', '60%'],
            data: [
              { value: 335, name: '直接访问' },
              { value: 310, name: '邮件营销' },
              { value: 234, name: '联盟广告' },
              { value: 135, name: '视频广告' },
              { value: 1548, name: '搜索引擎' }
            ],
            emphasis: {
              itemStyle: {
                shadowBlur: 10,
                shadowOffsetX: 0,
                shadowColor: 'rgba(0, 0, 0, 0.5)'
              }
            }
          }
        ]
      };
      this.chart = echarts.init(this.$refs.main);
      this.chart.setOption({
        title: {
          text: 'ECharts 入门示例'
        },
        tooltip: {},
        legend: {},
        ...option
      });

#### 4、监听“空白处”的事件

有时候，开发者需要监听画布的“空白处”所触发的事件。比如，当需要在用户点击“空白处”的时候重置图表时。

在讨论这个功能之前，我们需要先明确两种事件。zrender 事件和 echarts 事件。

```js
this.chart.getZr().on('click', function(event) {
  // 该监听器正在监听一个`zrender 事件`。
});
this.chart.on('click', function(event) {
  // 该监听器正在监听一个`echarts 事件`。
});
```

zrender 事件与 echarts 事件不同。前者是当鼠标在任何地方都会被触发，而后者是只有当鼠标在图形元素上时才能被触发。事实上，echarts 事件是在 zrender 事件的基础上实现的，也就是说，当一个 zrender 事件在图形元素上被触发时，echarts 将触发一个 echarts 事件给开发者。

有了 zrender 事件，我们就可以实现监听空白处的事件，具体如下：

```js
this.chart.getZr().on('click', function(event) {
  // 没有 target 意味着鼠标/指针不在任何一个图形元素上，它是从“空白处”触发的。
  if (!event.target) {
    // 点击在了空白处，做些什么。
  }
});
```

## 九、其他内容

文档所有内容均参考[快速上手 - 使用手册 - Apache ECharts](https://echarts.apache.org/handbook/zh/get-started)，更多详细内容请查看官方手册。

## 一、安装Echarts5

#### 1、CDN

在 https://www.jsdelivr.com/package/npm/echarts 选择 `dist/echarts.js`，点击并保存为 `/src/js/echarts.js` 文件。

在项目根目录新建一个 `index.html` 文件，内容如下：

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

#### 2、NPM

```bash
npm install echarts --save
```

#### 3、简单图表示例

```html
<template>
  <div class="home">
    <div id="main" style="height: 500px;width: 100%;" ref="main"></div>
  </div>
</template>

## 二、初始化

#### 1、指定尺寸

在初始化时指定`opts`参数中的宽高属性

```html
<template>
  <div class="home">
    <div id="main" ref="main"></div>
  </div>
</template>

#### 2、动态调整尺寸

借助浏览器的 `ResizeObserver` API 来实现组件尺寸监听，也可以通过`chart.resize({width:...,height:...});`来指定图表尺寸

```html
<template>
  <div class="home">
    <div id="main" style="height: 500px;width: 100%;" ref="main" v-resize="handleResize"></div>
  </div>
</template>

## 三、样式

可以通过设置样式，改变图形元素或者文字的颜色、明暗、大小等

#### 1、颜色主题

ECharts5 除了一贯的默认主题外，还内置了`'dark'`主题。可以像这样切换成深色模式：

```js
this.chart = echarts.init(this.$refs.main, 'dark');
```

如果主题保存为 JSON 文件，则需要自行加载和注册，例如：

```html
<template>
  <div class="home">
    <div id="main" style="height: 500px;width: 100%;" ref="main"></div>
  </div>
</template>

**注意**：主题文件必须放在`public`文件夹下，否则项目构建后会找不到文件。

#### 2、直接修改

```html
<template>
  <div class="home">
    <div id="main" style="height: 500px;width: 100%;" ref="main"></div>
  </div>
</template>

常见的属性：

**color**: 使用函数为每个柱子设置不同的颜色

**borderColor**: 设置柱子边框颜色为黑色

**borderWidth**: 设置边框宽度为 1 像素

**borderRadius**: 设置柱子顶部圆角

**shadowColor**: 设置阴影颜色

**shadowBlur**: 设置阴影模糊度

**shadowOffsetX/Y**: 设置阴影偏移量

#### 3、高亮样式

```html
<template>
  <div class="home">
    <div id="main" style="height: 500px;width: 100%;" ref="main"></div>
  </div>
</template>

export default {
  name: 'HomeView',
  components: {},
  mounted() {
    this.initChart()
  },
  data() {
    return {
      chart: null
    }
  },
  methods: {
    initChart() {
      this.chart = echarts.init(this.$refs.main);
      this.chart.setOption({
        title: {
          text: 'ECharts 入门示例'
        },
        tooltip: {},
        legend: {},
        xAxis: {
          data: ['衬衫', '羊毛衫', '雪纺衫', '裤子', '高跟鞋', '袜子']
        },
        yAxis: {},
        series: [{
          name: '销量',
          type: 'bar',
          data: [5, 20, 36, 10, 10, 20],
          itemStyle: {
            borderRadius: [5, 5, 0, 0], // 圆角设置，分别为左上、右上、右下、左下
            shadowColor: 'rgba(0, 0, 0, 0.5)',
            shadowBlur: 10,
            shadowOffsetX: 0,
            shadowOffsetY: 2
          },
          emphasis: {
            itemStyle: {
              color: '#ff0000', // 高亮时的颜色
              borderColor: '#ffffff', // 高亮时的边框颜色
              borderWidth: 2, // 高亮时的边框宽度
              shadowBlur: 20, // 高亮时的阴影模糊度
              shadowColor: 'rgba(255, 0, 0, 0.8)' // 高亮时的阴影颜色
            },
            label: {
              show: true, // 显示标签
              fontSize: 16, // 标签字体大小
              fontWeight: 'bold' // 标签字体粗细
            }
          }
        }]
      });
    }
  }
}
</script>
```

## 四、数据集

#### 1、在`series`中设置数据

```html
<template>
  <div class="home">
    <div id="main" style="height: 500px;width: 100%;" ref="main"></div>
  </div>
</template>

#### 2、在`dataset`中设置数据

在 `数据集` 中，会有这些好处：

```html
<template>
  <div class="home">
    <div id="main" style="height: 500px;width: 100%;" ref="main"></div>
  </div>
</template>

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

```html
<template>
  <div class="home">
    <div id="main" style="height: 500px;width: 100%;" ref="main"></div>
  </div>
</template>

#### 3、将`dataset`映射到`series`

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

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

```html
<template>
  <div class="home">
    <div id="main" style="height: 500px;width: 100%;" ref="main"></div>
  </div>
</template>

export default {
  name: 'HomeView',
  components: {},
  mounted() {
    this.initChart()
  },
  data() {
    return {
      chart: null
    }
  },
  methods: {
    initChart() {
      const 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', xAxisIndex: 0, yAxisIndex: 0 },
          { type: 'bar', seriesLayoutBy: 'row', xAxisIndex: 0, yAxisIndex: 0 },
          { type: 'bar', seriesLayoutBy: 'row', xAxisIndex: 0, yAxisIndex: 0 },
          // 这几个系列会出现在第二个直角坐标系中，每个系列对应到 dataset 的每一列。
          { type: 'bar', seriesLayoutBy: 'column', xAxisIndex: 1, yAxisIndex: 1 },
          { type: 'bar', seriesLayoutBy: 'column', xAxisIndex: 1, yAxisIndex: 1 },
          { type: 'bar', seriesLayoutBy: 'column', xAxisIndex: 1, yAxisIndex: 1 },
          { type: 'bar', seriesLayoutBy: 'column', xAxisIndex: 1, yAxisIndex: 1 }
        ]
      };
      this.chart = echarts.init(this.$refs.main);
      this.chart.setOption({
        title: {
          text: 'ECharts 入门示例'
        },
        ...option
      });
    }
  }
}
</script>
```

#### 4、维度`dimension`

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

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

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

#### 5、数据到图形的映射

```html
<template>
  <div class="home">
    <div id="main" style="height: 500px;width: 100%;" ref="main"></div>
  </div>
</template>

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

// 单轴（singleAxis）特有的属性：
encode: {
  single: 3
}

// 极坐标系（polar）特有的属性：
encode: {
  radius: 3,
  angle: 2
}

// 地理坐标系（geo）特有的属性：
encode: {
  lng: 3,
  lat: 2
}

// 对于一些没有坐标系的图表，例如饼图、漏斗图等，可以是：
encode: {
  value: 3
}
```

**默认的 series.encode**

默认的规则不能满足要求时，就可以自己来配置 `encode`。

## 五、数据转换

抽象地来说，数据转换是这样一种公式：`outData = f(inputData)`。`f` 是转换方法，例如：`filter`、`sort`、`regression`、`boxplot`、`cluster`、`aggregate`(todo) 等等。

#### 1、简单使用

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

```html
<template>
  <div class="home">
    <div id="main" style="height: 500px;width: 100%;" ref="main"></div>
  </div>
</template>

#### 2、链式声明`transform`

```html
<template>
  <div class="home">
    <div id="main" style="height: 500px;width: 100%;" ref="main"></div>
  </div>
</template>

```

#### 3、filter

##### 示例

```html
<template>
  <div class="home">
    <div id="main" style="height: 500px;width: 100%;" ref="main"></div>
  </div>
</template>

**注意**：`config.dimension` 指定了维度，能设成这样的值：

##### 关系比较操作符

##### 逻辑比较

`and`/`or`/`not` 自然可以被嵌套，例如：

##### 解析器`parser`

还可以指定“解析器”（ parser ）来对值进行解析后再做比较。现在支持的解析器有：

```html
<template>
  <div class="home">
    <div id="main" style="height: 500px;width: 100%;" ref="main"></div>
  </div>
</template>

export default {
  name: 'HomeView',
  components: {},
  mounted() {
    this.initChart()
  },
  data() {
    return {
      chart: null
    }
  },
  methods: {
    initChart() {
      const option = {
        dataset: [
          {
            source: [
              ['Product', 'Sales', 'Price', 'Date'],
              ['Milk Tee', 311, 21, '2012-05-12'],
              ['Cake', 135, 28, '2012-05-22'],
              ['Latte', 262, 36, '2012-06-02'],
              ['Milk Tee', 359, 21, '2012-06-22'],
              ['Cake', 121, 28, '2012-07-02'],
              ['Latte', 271, 36, '2012-06-22']
              // ...
            ]
          },
          {
            transform: {
              type: 'filter',
              config: {
                dimension: 'Date',
                '>=': '2012-05',
                '<': '2012-06',
                parser: 'time'
              }
            }
          }
        ],
        series: {
          type: 'pie',
          datasetIndex: 1
        }
      };
      this.chart = echarts.init(this.$refs.main);
      this.chart.setOption({
        title: {
          text: 'ECharts 入门示例'
        },
        tooltip: {},
        legend: {},
        ...option
      });
    }
  }
}
</script>
```

#### 4、sort

`sort`是另一个内置的数据转换器，用于排序数据。目前主要能用于在类目轴（ `axis.type: 'category'` ）中显示排过序的数据。

##### 示例

```html
<template>
  <div class="home">
    <div id="main" style="height: 500px;width: 100%;" ref="main"></div>
  </div>
</template>

## 六、坐标轴

#### 1、X/Y轴

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

![img](https://pic.soki.me/file/piclist/charts_axis_img02-1765775703006.jpg)

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

```js
const option = {
  xAxis: {
    // ...
  },
  yAxis: {
    // ...
  }
};
```

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

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

```html
<template>
  <div class="home">
    <div id="main" style="height: 500px;width: 100%;" ref="main"></div>
  </div>
</template>

#### 2、轴线

可以根据实际情况调整，例如轴线两端的箭头，轴线的样式等

#### 3、刻度

可以根据实际情况调整，例如刻度线的长度，样式等

#### 4、刻度标签

可以根据实际情况调整，例如文字对齐方式，自定义刻度标签内容等

## 七、图例

#### 1、布局

```html
<template>
  <div class="home">
    <div id="main" style="height: 500px;width: 100%;" ref="main"></div>
  </div>
</template>

对于图例较多时，可以使用可滚动翻页的图例

#### 2、样式

在深色系背景下、为了方便阅读，建议给图例加上半透明的浅色背景层，文字颜色设置为浅色。

图例的颜色标签有很多种设计方式、针对不同的图表、图例样式也会有所不同。

![img](https://pic.soki.me/file/piclist/charts_sign_img04-1765788326239.png)

```js
const option = {
  legend: {
    data: ['图例一', '图例二', '图例三'],
    icon: 'rect'
    // ...
  }
  // ...
};
```

#### 3、交互

根据场景需要，图例可支持交互操作，点击控制显示或隐藏对应的数据列；

#### 4、图例注意事项

图例要注意视情况使用，有些双轴图包含了多种图表类型，不同类型的图例样式要有所区分。

当图表只有一种数据信息时，用图表标题说明数据信息即可。建议此时不要加上图例。

## 八、事件与行为

#### 1、鼠标事件的处理

```html
<template>
  <div class="home">
    <div id="main" style="height: 500px;width: 100%;" ref="main"></div>
  </div>
</template>

**注意**：ECharts 中的事件名称对应 DOM 事件名称，均为小写的字符串。

所有的鼠标事件包含参数 `params`，这是一个包含点击图形的数据信息的对象，如下格式：

如何区分鼠标点击到了哪里：

使用 `query` 只对指定的组件的图形元素的触发回调：

```js
chart.on(eventName, query, handler);
```

`query` 可为 `string` 或者 `Object`。

如果为 `string` 表示组件类型。格式可以是 `mainType` 或者 `mainType.subType`。例如：

如果为 `Object`，可以包含以下一个或多个属性，每个属性都是可选的：

#### 2、组件交互的行为事件

在 ECharts 中基本上所有的组件交互行为都会触发相应的事件，常用的事件和事件对应参数在 [events](https://echarts.apache.org//api.html#events) 文档中有列出。

下面是监听一个图例开关的示例：

```html
<template>
  <div class="home">
    <div id="main" style="height: 500px;width: 100%;" ref="main"></div>
  </div>
</template>

#### 3、代码触发 ECharts 中组件的行为

在 ECharts 通过调用 `myChart.dispatchAction({ type: '' })` 触发图表行为，统一管理了所有动作，也可以方便地根据需要去记录用户的行为路径。

常用的动作和动作对应参数在 [action](https://echarts.apache.org//api.html#action) 文档中有列出。

下面示例演示了如何通过 `dispatchAction` 去轮流高亮饼图的每个扇形。

```html
<template>
  <div class="home">
    <div id="main" style="height: 500px;width: 100%;" ref="main"></div>
  </div>
</template>

#### 4、监听“空白处”的事件

有时候，开发者需要监听画布的“空白处”所触发的事件。比如，当需要在用户点击“空白处”的时候重置图表时。

在讨论这个功能之前，我们需要先明确两种事件。zrender 事件和 echarts 事件。

有了 zrender 事件，我们就可以实现监听空白处的事件，具体如下：

## 九、其他内容

文档所有内容均参考[快速上手 - 使用手册 - Apache ECharts](https://echarts.apache.org/handbook/zh/get-started)，更多详细内容请查看官方手册。

最后修改：2025 年 12 月 15 日

👆请简单粗暴地爱我。

发表评论取消回复
使用cookie技术保留您的个人信息以便您下次快速评论，继续评论表示您已同意该条款

Spring框架依赖注入

MySQL知识扩展

Day12 - JDBC驱动安装及其简单使用方法

Java常用注解表

Electron的简介

SpringBoot文件上传

Day18 - Redis安装与基础操作

Day3 - while、for和数组的实际应用

Day17 - 部署Java服务器环境

Java各种程序或框架创建流程

Vue使用Echart5

发表评论 取消回复 使用cookie技术保留您的个人信息以便您下次快速评论，继续评论表示您已同意该条款

Vue使用Echart5

发表评论取消回复
使用cookie技术保留您的个人信息以便您下次快速评论，继续评论表示您已同意该条款