Apache ECharts
ECharts

ECharts 常用配置项

# ECharts 常用配置项

ECharts 通过配置项和数据来控制图表的显示和行为。配置项是一个包含图表各个部分属性的对象，通过灵活配置这些属性，可以实现各种复杂的图表效果。以下是 ECharts 常用的配置项说明：

# 1. title（标题）

title 配置项用于设置图表的主标题和副标题。

const option = {
  title: {
    text: '主标题',  // 主标题的文本内容
    subtext: '副标题',  // 副标题的文本内容
    left: 'center',  // 标题在水平轴上的位置，这里设置为居中
    textStyle: {
      fontSize: 24,  // 主标题文本的字体大小
      fontWeight: 'bold',  // 主标题文本的字体粗细
      color: '#333'  // 主标题文本的颜色
    },
    subtextStyle: {
      fontSize: 14,  // 副标题文本的字体大小
      color: '#aaa'  // 副标题文本的颜色
    }
  }
};

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16

text: 主标题文本内容，类型为 string。
subtext: 副标题文本内容，类型为 string。
left: 标题的水平位置，类型为 string 或 number。可以是 'left'、'center'、'right'，也可以是具体的像素值或百分比（如 '20%'）。
top: 标题的垂直位置，类型为 string 或 number，使用方法与 left 类似。
textStyle: 主标题文本的样式，类型为 object，可以设置字体、颜色、粗细等属性。
- fontSize: 字体大小，类型为 number。
- fontWeight: 字体粗细，类型为 string，可以是 'normal'、'bold'、'bolder'、'lighter' 或数字值。
- color: 字体颜色，类型为 string，可以使用颜色名称、十六进制颜色值、RGB 颜色值等。
subtextStyle: 副标题文本的样式，配置方式与 textStyle 相同。

tooltip 配置项用于设置图表中的提示框，提示框显示数据点的详细信息。

const option = {
  tooltip: {
    trigger: 'item',  // 触发类型，'item' 表示数据项触发
    formatter: '{a} <br/>{b}: {c}',  // 提示框内容的格式化模板
    backgroundColor: 'rgba(50, 50, 50, 0.7)',  // 提示框的背景颜色
    borderColor: '#333',  // 提示框的边框颜色
    borderWidth: 1,  // 提示框的边框宽度
    textStyle: {
      color: '#fff',  // 提示框中文本的颜色
      fontSize: 14  // 提示框中文本的字体大小
    }
  }
};

1
2
3
4
5
6
7
8
9
10
11
12
13

trigger: 触发类型，类型为 string。可以是 'item'（数据项触发）、'axis'（坐标轴触发）或 'none'（不触发）。
formatter: 提示框内容的格式化函数或模板字符串。可以是一个返回字符串的函数，用于自定义提示内容。
- 使用 {a}、{b}、{c} 等占位符，分别表示系列名称、数据项名称、数据值。
backgroundColor: 提示框的背景颜色，类型为 string。
borderColor: 提示框的边框颜色，类型为 string。
borderWidth: 提示框的边框宽度，类型为 number。
textStyle: 提示框文本的样式，类型为 object。

# 3. legend（图例）

legend 配置项用于设置图表中的图例。图例是对数据系列进行标识和说明的区域。

const option = {
  legend: {
    data: ['销量'],  // 图例的数据项，每一项对应一个系列的名称
    orient: 'horizontal',  // 图例的排列方向，'horizontal' 表示水平排列
    left: 'center',  // 图例在水平轴上的位置，这里设置为居中
    top: 'top',  // 图例在垂直轴上的位置，这里设置为顶部
    textStyle: {
      color: '#333',  // 图例项文本的颜色
      fontSize: 12  // 图例项文本的字体大小
    }
  }
};

1
2
3
4
5
6
7
8
9
10
11
12

data: 图例的数据项，类型为 Array，每一项对应系列名称或手动设置的图例项。
orient: 图例的排列方向，类型为 string，可以是 'horizontal'（水平）或 'vertical'（垂直）。
left: 图例的水平位置，类型为 string 或 number，使用方法与 title.left 类似。
top: 图例的垂直位置，类型为 string 或 number，使用方法与 title.top 类似。
textStyle: 图例项的文本样式，类型为 object。

# 4. xAxis（x 轴）

xAxis 配置项用于设置图表的 x 轴。不同类型的图表可能需要不同类型的 x 轴。

const option = {
  xAxis: {
    type: 'category',  // x 轴类型，'category' 表示类目轴
    data: ['衬衫', '羊毛衫', '雪纺衫', '裤子', '高跟鞋', '袜子'],  // x 轴数据
    axisLine: {
      lineStyle: {
        color: '#333',  // x 轴轴线的颜色
        width: 1  // x 轴轴线的宽度
      }
    },
    axisLabel: {
      show: true,  // 是否显示 x 轴标签
      interval: 0,  // 标签的显示间隔，0 表示所有标签都显示
      rotate: 0  // 标签的旋转角度，0 表示不旋转
    }
  }
};

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17

type: x 轴的类型，类型为 string。常用值有：
- 'category': 类目轴，适用于离散的类目数据（如 ['衬衫', '羊毛衫']）。
- 'value': 数值轴，适用于连续的数值数据。
- 'time': 时间轴，适用于时间序列数据。
- 'log': 对数轴，适用于数据跨度较大的场景。
data: x 轴的数据，类型为 Array，在 'category' 类型的轴中通常使用。
axisLine: x 轴轴线的样式，类型为 object。
- lineStyle: 轴线的线条样式，类型为 object。
  - color: 线条颜色，类型为 string。
  - width: 线条宽度，类型为 number。
axisLabel: x 轴标签的样式，类型为 object。
- show: 是否显示标签，类型为 boolean。
- interval: 标签的显示间隔，类型为 number。
- rotate: 标签旋转角度，类型为 number。

# 5. yAxis（y 轴）

yAxis 配置项用于设置图表的 y 轴，通常用于展示数据的数值范围。

const option = {
  yAxis: {
    type: 'value',  // y 轴类型，'value' 表示数值轴
    axisLine: {
      lineStyle: {
        color: '#333',  // y 轴轴线的颜色
        width: 1  // y 轴轴线的宽度
      }
    },
    axisLabel: {
      show: true,  // 是否显示 y 轴标签
      interval: 'auto',  // 标签的显示间隔，'auto' 表示自动计算
      rotate: 0  // 标签的旋转角度，0 表示不旋转
    }
  }
};

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16

type: y 轴的类型，类型为 string。常用值有：
- 'value': 数值轴，适用于连续的数值数据。
- 'category': 类目轴，适用于离散的类目数据。
- 'time': 时间轴，适用于时间序列数据。
- 'log': 对数轴，适用于数据跨度较大的场景。
axisLine: y 轴轴线的样式，配置方式与 x 轴类似。
axisLabel: y 轴标签的样式，配置方式与 x 轴类似。

# 6. series（数据系列）

series 配置项用于设置图表中的数据系列。每个系列可以对应不同的图表类型（如柱状图、折线图、饼图等）。

const option = {
  series: [{
    name: '销量',  // 系列名称，用于图例显示和 tooltip 中的显示
    type: 'bar',  // 图表类型，'bar' 表示柱状图
    data: [5, 20, 36, 10, 10, 20],  // 系列数据
    itemStyle: {
      color: '#a83232'  // 柱状图的颜色
    },
    label: {
      show: true,  // 是否显示数据标签
      position: 'top',  // 标签显示的位置，'top' 表示在柱子顶部
      color: '#333',  // 标签的颜色
      fontSize: 12  // 标签的字体大小
    }
  }]
};

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16

name: 系列的名称，类型为 string，用于图例和 tooltip 中显示。
type: 图表类型，类型为 string，常见值有 'bar'（柱状图）、'line'（折线图）、'pie'（饼图）等。
data: 系列的数据，类型为 Array，数组中的每一项可以是数值或对象，取决于图表类型。
itemStyle: 系列的样式，类型为 object。
- color: 数据项的颜色，类型为 string。
label: 数据标签的样式，类型为 object。
- show: 是否显示数据标签，类型为 boolean。
- position: 标签显示的位置，类型为 string，如 'top'、'left'、'right' 等。
- color: 标签的颜色，类型为 string。
- fontSize: 标签的字体大小，类型为 number。

# 7. toolbox（工具箱）

toolbox 配置项用于为图表提供一些工具选项，如保存图片、数据视图、缩放、复位等。工具箱通常显示在图表的右上角，方便用户对图表进行操作。

const option = {
  toolbox: {
    show: true,  // 是否显示工具箱
    orient: 'horizontal',  // 工具箱的布局方向，'horizontal' 表示水平布局
    left: 'right',  // 工具箱相对图表的水平位置，设置为右侧
    top: 'top',  // 工具箱相对图表的垂直位置，设置为顶部
    feature: {
      saveAsImage: {
        show: true,  // 是否显示保存为图片的工具
        title: '保存为图片',  // 鼠标悬停在工具上时显示的提示文本
        type: 'png',  // 保存的图片格式
        pixelRatio: 2  // 保存图片的分辨率比例
      },
      restore: {
        show: true,  // 是否显示还原工具
        title: '还原'  // 鼠标悬停在工具上时显示的提示文本
      },
      dataView: {
        show: true,  // 是否显示数据视图工具
        readOnly: false,  // 是否只读（用户是否可以编辑数据视图中的内容）
        title: '数据视图',  // 鼠标悬停在工具上时显示的提示文本
        lang: ['数据视图', '关闭', '刷新']  // 数据视图的按钮文本
      },
      magicType: {
        show: true,  // 是否显示切换图表类型的工具
        type: ['line', 'bar'],  // 可切换的图表类型
        title: {
          line: '切换为折线图',  // 切换为折线图的提示文本
          bar: '切换为柱状图'  // 切换为柱状图的提示文本
        }
      }
    }
  }
};

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34

show: 是否显示工具箱，类型为 boolean。
orient: 工具箱的布局方向，类型为 string，可以是 'horizontal'（水平）或 'vertical'（垂直）。
left: 工具箱相对图表的水平位置，类型为 string 或 number。可以是 'left'、'center'、'right'，或具体的像素值或百分比。
top: 工具箱相对图表的垂直位置，类型为 string 或 number，使用方法与 left 类似。
feature: 工具项配置，类型为 object。可以配置多种工具，包括：
- saveAsImage: 保存为图片的工具，包含 show（是否显示）、title（提示文本）、type（图片格式）、pixelRatio（分辨率比例）等属性。
- restore: 还原图表的工具，包含 show（是否显示）和 title（提示文本）属性。
- dataView: 数据视图工具，允许用户查看并编辑图表数据，包含 show（是否显示）、readOnly（是否只读）、title（提示文本）和 lang（按钮文本）属性。
- magicType: 图表类型切换工具，允许用户在不同图表类型之间切换，包含 show（是否显示）、type（可切换的图表类型）和 title（提示文本）属性。

# 8. grid（网格）

grid 配置项用于设置图表的网格布局，控制图表绘图区的大小和位置。通常在折线图、柱状图等类型的图表中使用。

const option = {
  grid: {
    show: true,  // 是否显示网格区域的边框
    left: '10%',  // 网格区域离容器左侧的距离
    right: '10%',  // 网格区域离容器右侧的距离
    top: '15%',  // 网格区域离容器顶部的距离
    bottom: '10%',  // 网格区域离容器底部的距离
    containLabel: true,  // 网格区域是否包含坐标轴的刻度标签
    borderColor: '#ccc',  // 网格区域的边框颜色
    borderWidth: 1  // 网格区域的边框宽度
  }
};

1
2
3
4
5
6
7
8
9
10
11
12

show: 是否显示网格区域的边框，类型为 boolean。
left: 网格区域离容器左侧的距离，类型为 string 或 number。可以是 'left'、'center'、'right'，或具体的像素值或百分比。
right: 网格区域离容器右侧的距离，类型为 string 或 number，使用方法与 left 类似。
top: 网格区域离容器顶部的距离，类型为 string 或 number，使用方法与 left 类似。
bottom: 网格区域离容器底部的距离，类型为 string 或 number，使用方法与 left 类似。
containLabel: 是否包含坐标轴的刻度标签，类型为 boolean。设置为 true 时，网格区域会为坐标轴的刻度标签预留空间。
borderColor: 网格区域的边框颜色，类型为 string。
borderWidth: 网格区域的边框宽度，类型为 number。

# 9. dataZoom（数据缩放）

dataZoom 配置项用于控制图表的缩放功能，可以通过拖动或滑动的方式对图表进行缩放，常用于折线图和柱状图。

const option = {
  dataZoom: [
    {
      type: 'slider',  // 数据缩放的类型，'slider' 表示滑动条
      show: true,  // 是否显示缩放组件
      start: 10,  // 数据窗口范围的起始百分比
      end: 90,  // 数据窗口范围的结束百分比
      handleSize: '100%',  // 手柄大小
      height: '20px',  // 滑动条组件的高度
      fillerColor: 'rgba(167,183,204,0.4)',  // 填充颜色
      borderColor: '#ddd',  // 边框颜色
      showDetail: true,  // 是否显示详细数据
      realtime: true,  // 是否实时更新视图
      filterMode: 'filter'  // 数据过滤模式
    }
  ]
};

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17

type: 数据缩放的类型，类型为 string。常见值有 'inside'（内置型缩放）和 'slider'（滑动条缩放）。
show: 是否显示缩放组件，类型为 boolean。
start: 数据窗口范围的起始百分比，类型为 number。
end: 数据窗口范围的结束百分比，类型为 number。
handleSize: 手柄的大小，类型为 string 或 number，可以是具体的像素值或百分比。
height: 滑动条组件的高度，类型为 string 或 number，通常使用像素值或百分比。
fillerColor: 滑动条组件的填充颜色，类型为 string。
borderColor: 滑动条组件的边框颜色，类型为 string。
showDetail: 是否显示详细数据，类型为 boolean。
realtime: 是否实时更新视图，类型为 boolean。
filterMode: 数据过滤模式，类型为 string，可以是 'filter' 或 'none'。

# 10. visualMap（视觉映射组件）

visualMap 配置项用于映射数据值到视觉元素上，如颜色、大小等。常用于热力图、散点图等图表中，帮助用户直观地观察数据分布和变化。

const option = {
  visualMap: {
    type: 'continuous',  // 视觉映射的类型，'continuous' 表示连续型
    min: 0,  // 允许的最小值
    max: 100,  // 允许的最大值
    left: 'left',  // 视觉映射组件的位置
    top: 'bottom',  // 视觉映射组件的位置
    text: ['高', '低'],  // 文

本，表示数值的高低
    inRange: {
      color: ['#e0ffff', '#006edd']  // 颜色范围，数值从低到高
    }
  }
};

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15

type: 视觉映射的类型，类型为 string。常见值有 'continuous'（连续型）和 'piecewise'（分段型）。
min: 允许的最小值，类型为 number。
max: 允许的最大值，类型为 number。
left: 视觉映射组件的水平位置，类型为 string，可以是 'left'、'center'、'right'，或具体的像素值或百分比。
top: 视觉映射组件的垂直位置，类型为 string，使用方法与 left 类似。
text: 视觉映射组件上的文本，类型为 Array，数组中的第一个值表示数值较高时的文本，第二个值表示数值较低时的文本。
inRange: 映射到的数据范围内的视觉元素配置，类型为 object。
- color: 映射到的数据范围内的颜色，类型为 Array，数组中的第一个值表示低值的颜色，第二个值表示高值的颜色。

# 11. axisPointer（坐标轴指示器）

axisPointer 配置项用于设置坐标轴上的指示器，用于辅助用户查看图表中的数据点，通常与 tooltip 配合使用。

const option = {
  axisPointer: {
    show: true,  // 是否显示坐标轴指示器
    type: 'line',  // 指示器类型，'line' 表示直线型，'shadow' 表示阴影型
    lineStyle: {
      color: '#ccc',  // 指示器的颜色
      width: 2,  // 指示器的宽度
      type: 'solid'  // 指示器的线条类型
    }
  }
};

1
2
3
4
5
6
7
8
9
10
11

show: 是否显示坐标轴指示器，类型为 boolean。
type: 指示器类型，类型为 string，常见值有 'line'（直线型）、'shadow'（阴影型）。
lineStyle: 指示器的线条样式，类型为 object。
- color: 指示器的颜色，类型为 string。
- width: 指示器的宽度，类型为 number。
- type: 指示器的线条类型，类型为 string，可以是 'solid'、'dashed'、'dotted'。

# 12. other（其他常用配置项）

animation: 控制图表的动画效果，类型为 boolean，设置为 false 可关闭动画。
color: 图表的调色盘颜色列表，类型为 Array，用于设置不同系列数据的默认颜色。
backgroundColor: 图表的背景颜色，类型为 string，可以设置为透明色 'transparent' 或具体的颜色值。
textStyle: 全局字体样式，类型为 object，可以设置 color（颜色）、fontFamily（字体）、fontSize（字体大小）等。

# 13. 配置项综合示例

结合上述配置项，一个简单的 ECharts 配置示例如下：

// 创建 ECharts 配置对象
const option = {
  title: {
    text: '某商店销售情况',  // 设置主标题内容
    subtext: '2024年8月',  // 设置副标题内容
    left: 'center',  // 标题居中显示
    textStyle: {
      fontSize: 20,  // 设置主标题字体大小
      color: '#333'  // 设置主标题字体颜色
    },
    subtextStyle: {
      fontSize: 14,  // 设置副标题字体大小
      color: '#aaa'  // 设置副标题字体颜色
    }
  },
  tooltip: {
    trigger: 'axis',  // 设定提示框的触发方式为坐标轴触发
    formatter: '{a} <br/>{b}: {c}',  // 设定提示框内容的格式
    backgroundColor: 'rgba(50, 50, 50, 0.7)',  // 提示框的背景颜色
    borderColor: '#333',  // 提示框边框颜色
    borderWidth: 1,  // 提示框边框宽度
    textStyle: {
      color: '#fff'  // 提示框文本颜色
    }
  },
  legend: {
    data: ['销量'],  // 设置图例内容，这里是 '销量'
    left: 'center',  // 图例居中显示
    top: 'top',  // 图例显示在图表的顶部
    textStyle: {
      color: '#333',  // 图例文本颜色
      fontSize: 12  // 图例文本字体大小
    }
  },
  xAxis: {
    type: 'category',  // 设定 x 轴为类目轴
    data: ['衬衫', '羊毛衫', '雪纺衫', '裤子', '高跟鞋', '袜子'],  // 设置 x 轴数据
    axisLine: {
      lineStyle: {
        color: '#333'  // 设置 x 轴轴线颜色
      }
    },
    axisLabel: {
      interval: 0,  // 设定 x 轴标签的显示间隔为 0，即全部显示
      rotate: 0  // 标签不旋转
    }
  },
  yAxis: {
    type: 'value',  // 设定 y 轴为数值轴
    axisLine: {
      lineStyle: {
        color: '#333'  // 设置 y 轴轴线颜色
      }
    }
  },
  series: [{
    name: '销量',  // 数据系列的名称
    type: 'bar',  // 图表类型为柱状图
    data: [5, 20, 36, 10, 10, 20],  // 数据系列的数据
    itemStyle: {
      color: '#a83232'  // 设置柱状图的颜色
    },
    label: {
      show: true,  // 显示数据标签
      position: 'top'  // 数据标签显示在柱子顶部
    }
  }]
};

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68

编辑此页

上次更新: 2024/12/28, 18:32:08

← ECharts 快速上手 ECharts 常见图表类型→

ECharts 常用配置项

# ECharts 常用配置项

# 1. title（标题）

# 2. tooltip（提示框）

# 3. legend（图例）

# 4. xAxis（x 轴）

# 5. yAxis（y 轴）

# 6. series（数据系列）

# 7. toolbox（工具箱）

# 8. grid（网格）

# 9. dataZoom（数据缩放）

# 10. visualMap（视觉映射组件）

# 11. axisPointer（坐标轴指示器）

# 12. other（其他常用配置项）

# 13. 配置项综合示例