Echarts配置项详细说明

ECharts 是基于 JavaScript 的开源可视化库，通过 option 对象 配置图表的结构、数据、样式、交互等所有信息。以下按功能模块分类详细说明核心配置项：

一、顶层基础配置

顶层配置是 option 的直接属性，定义图表的全局信息与基础组件。

1. title（标题组件）

用于设置图表的主标题和副标题，支持多标题（数组形式）。
常用属性：

• text：主标题文本（如“2024年销售数据”）；
• subtext：副标题文本（如“单位：万元”）；
• left/right/top/bottom：标题位置（可选'center'/'left'/'right'或具体像素值，如10）；
• textStyle：主标题样式（包含color、fontSize、fontWeight等）；
• subtextStyle：副标题样式（同textStyle）。
  示例：

title: {
  text: '月度销售额',
  subtext: '2024年1-6月',
  left: 'center',
  textStyle: { fontSize: 18, color: '#333' }
}

2. tooltip（提示框组件）

鼠标悬停在图表元素上时显示的提示信息，支持自定义内容和样式。
核心属性：

• trigger：触发方式（必选），'item'（针对散点图、饼图等单个数据项）或'axis'（针对折线图、柱状图等整个坐标轴上的所有数据）；
• formatter：提示框内容格式化（支持字符串模板或函数），如'{a} <br/>{b}: {c}万元'（{a}为系列名，{b}为类目名，{c}为值）；
• backgroundColor：背景色（如'rgba(0,0,0,0.7)'）；
• axisPointer：坐标轴指示器（仅trigger: 'axis'生效），如{ type: 'shadow' }（阴影指示器，适合柱状图）。
  示例：

tooltip: {
  trigger: 'axis',
  formatter: '{b}月: {c}万元',
  axisPointer: { type: 'line' } // 线指示器，适合折线图
}

3. legend（图例组件）

标识不同系列的数据（如折线图的多条线、饼图的不同类别），点击可切换系列显示/隐藏。
常用属性：

• data：图例名称数组（需与series.name对应，如['产品A', '产品B']）；
• left/top：图例位置（如'right'靠右显示）；
• orient：排列方向（'horizontal'横向，'vertical'纵向）。
  示例：

legend: {
  data: ['产品A', '产品B'],
  top: 10,
  left: 'center'
}

4. grid（直角坐标系网格）

定义折线图、柱状图等直角坐标系内绘图区域的位置和大小，避免图表元素与边缘重叠。
核心属性：

• left/right/top/bottom：网格距离容器边缘的距离（如'3%'或30像素）；
• containLabel：是否包含坐标轴标签（true时自动调整网格大小以容纳标签）。
  示例：

grid: {
  left: '3%',
  right: '4%',
  bottom: '3%',
  containLabel: true
}

二、数据系列配置（series）

series 是图表的核心数据配置项，为数组形式，每个对象代表一个数据系列（如一条折线、一个饼图）。
关键属性：

• type：系列类型（必选），如'line'（折线图）、'bar'（柱状图）、'pie'（饼图）；
• name：系列名称（需与legend.data对应）；
• data：系列数据（数组形式，如[120, 200, 150]或[{ name: '手机', value: 30 }]）。

1. 折线图/柱状图特有属性

• 折线图：
  • smooth：是否平滑曲线（true为平滑，false为折线）；
  • lineStyle：线条样式（如{ width: 2, color: '#5470c6' }）。
• 柱状图：
  • barWidth：柱形宽度（如'60%'占类目宽度的比例）；
  • itemStyle：柱形样式（如{ color: '#5470c6' }）。
    示例（折线图）：

series: [{
  name: '产品A',
  type: 'line',
  data: [120, 190, 150, 230],
  smooth: true,
  lineStyle: { width: 3 },
  itemStyle: { color: '#5470c6' }
}]

2. 饼图特有属性

• radius：饼图半径（如'60%'或['40%', '70%']为环形图）；
• center：饼图中心位置（如['50%', '50%']居中）；
• label：扇区标签（如{ show: true, formatter: '{b}: {d}%' }，{d}为百分比）；
• roseType：是否为南丁格尔图（'radius'按半径区分大小，适合对比数据差异）。
  示例（环形图）：

series: [{
  type: 'pie',
  data: [
    { name: '电商', value: 40 },
    { name: '门店', value: 30 },
    { name: '批发', value: 20 }
  ],
  radius: ['40%', '70%'],
  label: { formatter: '{b}: {d}%' }
}]

三、坐标轴配置（xAxis/yAxis）

用于定义直角坐标系的坐标轴（x轴为类目轴，y轴为数值轴）。
核心属性：

• type：坐标轴类型（'category'类目轴，'value'数值轴）；
• data：x轴类目数据（如['Mon', 'Tue', 'Wed']）；
• axisLine：坐标轴线（如{ show: true }显示轴线）；
• axisLabel：坐标轴标签（如{ color: '#fff' }设置标签颜色）。
  示例：

xAxis: {
  type: 'category',
  data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun'],
  axisLine: { show: true },
  axisLabel: { color: '#333' }
},
yAxis: {
  type: 'value',
  axisLine: { show: true },
  axisLabel: { color: '#333' }
}

四、交互配置

1. dataZoom（数据区域缩放）

控制图表中可见的数据范围，支持鼠标滚轮或拖拽缩放。
核心属性：

• type：缩放类型（'inside'内缩放（鼠标滚轮）、'slider'滑动条缩放）；
• start：起始百分比（如0表示从第一个数据开始）；
• end：结束百分比（如100表示到最后一个数据结束）。
  示例：

dataZoom: [{
  type: 'slider',
  start: 0,
  end: 100
}]

2. toolbox（工具箱）

提供一系列操作图表的按钮（如保存为图片、数据视图、重置）。
核心属性：

• show：是否显示工具箱；
• feature：功能列表（如{ saveAsImage: {} }保存为图片）。
  示例：

toolbox: {
  show: true,
  feature: {
    saveAsImage: {},
    dataView: { show: true }
  }
}

五、其他常用配置

1. color（全局调色板）

定义图表的颜色数组，如['#5470c6', '#91cc75', '#fac858']，系列会依次使用这些颜色。

2. backgroundColor（背景色）

设置图表容器的背景色，如'rgba(255,255,255,0.9)'。

3. responsive（响应式）

是否开启响应式布局（true时图表会随容器大小变化自动调整）。

以上配置项覆盖了 ECharts 图表的核心需求，通过组合这些配置可实现复杂的数据可视化效果。更多详细配置可参考ECharts 官方文档。