ECharts 核心：深度解析 options 配置项

适合人群：刚会用 echarts.init() 和 setOption()，却一面对“坐标轴爆裂”“图例乱飞”“颜色太丑”就无从下手的小伙伴。
阅读方式：先通读一遍，再对着示例里那一行“// 关键！”慢慢改自己的代码。
目标：以后任何“多系列 + 多数量级 + 多坐标轴”的折线图，都能直接套模板。

以下对 ECharts 配置项的 7 大模块进行科学、系统、无例式的语义与语法级剖析；每条键值对均附行内注释，可直接复制使用或作为规范参考。

① title — 图顶部的标题文字，用来一句话说明图表主题

title: {
  text: 'string',           // 主标题文本，空字符串表示不显示主标题
  subtext: 'string',        // 副标题文本，位于主标题下方，支持 \n 换行
  left: 'center',           // 水平定位：'left' | 'center' | 'right' | 数值(px) | 百分比
  top: 20,                  // 垂直定位：同上单位体系；控制与容器顶边的距离
  textStyle: {              // 主标题字体样式对象
    fontSize: 18,           // 字号，单位 px
    color: '#333',          // 字体颜色，合法 CSS 颜色值
    fontWeight: 'normal',   // 字重：'normal' | 'bold' | 数值 100-900
    fontFamily: 'sans-serif' // 字体族
  },
  subtextStyle: { /* 同 textStyle，作用于副标题 */ },
  show: true                // 是否显示标题组件，布尔量，默认 true
}

语义作用：在视觉编码前，向观测者提供图形的主题与元信息，减少认知负荷；支持双层级信息结构。
缺省行为：不声明时等价于 show: false 且全部字段为空，图形顶部无文字占用。

② legend — 图例列表，显示每条线的名称和颜色，可点击开关系列

legend: {
  data: ['a', 'b'],         // 图例项名称数组，必须与 series.name 严格一一对应
  orient: 'horizontal',     // 布局方向：'horizontal' | 'vertical'
  left: 'center',           // 水平定位（同 title.left 单位体系）
  top: 'auto',              // 垂直定位；'auto' 表示自动避让
  backgroundColor: 'transparent', // 背景色，支持 rgba
  borderColor: '#ccc',      // 边框色
  borderWidth: 0,           // 边框线宽，px
  borderRadius: 0,          // 圆角半径，px
  padding: 5,               // 内边距，px
  itemGap: 10,              // 图例项之间水平间隔，px
  itemWidth: 25,            // 标记图形宽度，px
  itemHeight: 14,           // 标记图形高度，px
  selectedMode: 'multiple', // 交互模式：'single' | 'multiple' | false
  selected: {},             // 初始选中状态对象，{ 'a': true, 'b': false }
  textStyle: { /* 字体样式，同 title.textStyle */ },
  show: true                // 是否渲染 legend 组件
}

语义作用：建立符号-系列映射，提供交互开关，满足“比较-筛选”认知需求。
缺省行为：未声明时默认自动生成，但仅当 series.name 存在且唯一；否则图例项为空。

③ grid — 控制绘图区域与容器边缘的距离，防止标签或图形被截断

grid: {
  left: '8%',               // 左边距，百分比相对容器宽
  right: '8%',              // 右边距
  top: 60,                  // 上边距，px
  bottom: '12%',            // 下边距，百分比相对容器高
  width: 'auto',            // 显式宽，'auto' 表示由左右边距推算
  height: 'auto',           // 显式高，同上
  containLabel: true,       // 是否把轴标签/刻度文本纳入边距计算，防裁剪
  backgroundColor: 'transparent', // 背景色
  borderColor: '#ccc',      // 边框色
  borderWidth: 0,           // 边框线宽
  shadowBlur: 0,            // 阴影模糊大小
  shadowColor: 'rgba(0,0,0,0)', // 阴影颜色
  shadowOffsetX: 0,         // 阴影水平偏移
  shadowOffsetY: 0          // 阴影垂直偏移
}

语义作用：定义坐标系绘图面的 Margins，保障轴标签、刻度、数据图形不溢出容器。
缺省行为：默认各边 5% 且 containLabel: false；多轴或长标签场景下易出现裁剪。

④ xAxis & yAxis — 提供横纵坐标刻度，是数据定位的基础；双Y轴可解决数量级差异

xAxis（通常类目轴）

xAxis: {
  type: 'category',         // 轴类型：'category' | 'value' | 'time' | 'log'
  data: [],                 // 类目列表，仅在 type='category' 时生效
  boundaryGap: true,        // 类目轴两端留白策略；true 留白，false 顶头
  position: 'bottom',       // 轴位置：'top' | 'bottom'
  offset: 0,                // 轴相对于默认位置的偏移，px
  name: '',                 // 轴名称
  nameLocation: 'end',      // 名称位置：'start' | 'middle' | 'end'
  nameTextStyle: { /* 名称字体样式 */ },
  axisLine: {               // 轴线
    show: true,
    lineStyle: { color: '#333', width: 1 }
  },
  axisTick: {               // 刻度线
    show: true,
    alignWithLabel: true,   // 刻度与标签对齐
    lineStyle: { color: '#333', width: 1 }
  },
  axisLabel: {              // 刻度标签
    show: true,
    interval: 'auto',       // 显示间隔，'auto' 或数值
    rotate: 0,              // 旋转角度，防重叠
    color: '#333',          // 标签颜色
    fontSize: 12
  },
  splitLine: { show: false }, // 网格线（类目轴默认关闭）
  splitArea: { show: false }  // 网格区域
}

yAxis（通常数值轴）

yAxis: {
  type: 'value',            // 数值轴
  position: 'left',         // 'left' | 'right'；多轴时分别对应两侧
  offset: 0,                // 轴向偏移
  name: '',                 // 轴名称
  nameLocation: 'end',      // 同 xAxis
  min: 0,                   // 刻度下限；'dataMin' 表示数据最小值
  max: 'dataMax',           // 刻度上限
  interval: 'auto',         // 强制刻度间隔；'auto' 自动
  scale: false,             // 是否脱离 0 值缩放（type='value' 有效）
  axisLine: { show: true, lineStyle: {} },
  axisTick: { show: true, lineStyle: {} },
  axisLabel: { show: true, color: '#333', fontSize: 12 },
  splitLine: {             // 网格线（数值轴默认开启）
    show: true,
    lineStyle: { color: '#E0E0E0', width: 1, type: 'solid' }
  },
  splitArea: { show: false } // 交替色带
}

然后是对双Y轴的详细补充讲解：

双 Y 轴的作用

双 Y 轴主要用于解决数据数量级差异较大的问题。当多个系列的数据范围相差悬殊时，如果使用同一个 Y 轴，会导致某些系列的折线几乎贴在底部或顶部，难以直观展示其变化趋势。通过设置双 Y 轴，可以将不同数量级的数据分别映射到不同的 Y 轴上，从而清晰地展示每个系列的变化情况。

双 Y 轴的配置方法

在 ECharts 中，可以通过将 yAxis 配置为数组的形式来实现双 Y 轴。每个 Y 轴对象都可以独立配置其属性，如位置、范围、刻度间隔等。以下是一个详细的配置示例：

yAxis: [
  {
    // 第一个 Y 轴（左侧）
    type: 'value',            // 数值轴
    name: 'small / medium',   // 轴名称
    position: 'left',         // 轴位置：'left' | 'right'
    min: 0,                   // 刻度下限
    max: 800,                 // 刻度上限
    interval: 100,            // 刻度间隔
    axisLine: { show: true, lineStyle: { color: '#333', width: 1 } },
    axisTick: { show: true, lineStyle: { color: '#333', width: 1 } },
    axisLabel: { show: true, color: '#333', fontSize: 12 },
    splitLine: { show: true, lineStyle: { color: '#E0E0E0', width: 1, type: 'solid' } }
  },
  {
    // 第二个 Y 轴（右侧）
    type: 'value',            // 数值轴
    name: 'large / huge',     // 轴名称
    position: 'right',        // 轴位置：'left' | 'right'
    min: 0,                   // 刻度下限
    max: 80000,               // 刻度上限
    interval: 10000,          // 刻度间隔
    axisLine: { show: true, lineStyle: { color: '#333', width: 1 } },
    axisTick: { show: true, lineStyle: { color: '#333', width: 1 } },
    axisLabel: { show: true, color: '#333', fontSize: 12 },
    splitLine: { show: true, lineStyle: { color: '#E0E0E0', width: 1, type: 'solid' } }
  }
]

关键配置项说明

• type：轴类型，固定为 'value'，表示数值轴。
• name：轴名称，用于标识该 Y 轴所对应的数据类型。
• position：轴的位置，可以是 'left' 或 'right'。双 Y 轴通常一个在左侧，一个在右侧。
• min 和 max：分别表示 Y 轴的刻度下限和上限。可以根据数据的最大值和最小值进行调整，以确保数据能够清晰地展示。
• interval：刻度间隔。可以根据需要手动设置，也可以使用 'auto' 让 ECharts 自动计算。
• axisLine、axisTick、axisLabel：分别用于配置轴线、刻度线和刻度标签的样式。
• splitLine：网格线的样式。默认情况下，数值轴的网格线是开启的，可以通过 show 属性控制其显示与否。

在系列中指定 Y 轴

在 series 配置中，需要通过 yAxisIndex 属性来指定每个系列所对应的 Y 轴。例如：

series: [
  {
    name: 'small', type: 'line', yAxisIndex: 0,
    data: rawData.map(d => d.small),
    smooth: true, symbol: 'circle', itemStyle: { color: '#5470c6' }
  },
  {
    name: 'medium', type: 'line', yAxisIndex: 0,
    data: rawData.map(d => d.medium),
    smooth: true, symbol: 'diamond', itemStyle: { color: '#91cc75' }
  },
  {
    name: 'large', type: 'line', yAxisIndex: 1,
    data: rawData.map(d => d.large),
    smooth: true, symbol: 'triangle', itemStyle: { color: '#fac858' }
  },
  {
    name: 'huge', type: 'line', yAxisIndex: 1,
    data: rawData.map(d => d.huge),
    smooth: true, symbol: 'rect', itemStyle: { color: '#ee6666' }
  }
]

• yAxisIndex：指定该系列所对应的 Y 轴索引。0 表示第一个 Y 轴（左侧），1 表示第二个 Y 轴（右侧）。

注意事项

1. 数据范围适配：确保每个系列的数据范围与所对应的 Y 轴范围相匹配，避免数据超出 Y 轴范围导致显示异常。
2. 轴名称清晰：为每个 Y 轴设置清晰的名称，方便用户理解不同 Y 轴所代表的数据类型。
3. 颜色区分：为不同 Y 轴的系列设置不同的颜色，以便用户区分。

通过以上配置，你可以轻松实现双 Y 轴的效果，解决数据数量级差异较大的问题，使图表更加清晰易读。

语义作用：提供空间-数值映射的度量基准；多轴场景下实现数量级解耦。
缺省行为：不声明时自动创建单轴，但无法自定义比例与位置。

⑤ series — 定义每条线的类型、数据、样式等，是图形真正的绘制指令

series: [
  {
    name: 'string',           // 系列名称，与 legend.data 严格匹配
    type: 'line',             // 图形语法：'line' | 'bar' | 'scatter' | ...
    data: [],                 // 一维数组（单系列）或二维数组（散点等）
    yAxisIndex: 0,            // 认领第几把 Y 尺，多轴时必须显式
    xAxisIndex: 0,            // 认领第几把 X 尺，多 X 轴时使用
    smooth: false,            // 是否曲线化
    symbol: 'emptyCircle',    // 拐点标记：'circle' | 'rect' | 'roundRect' | 'triangle' | 'diamond' | 'pin' | 'arrow' | 图片 URL
    symbolSize: 4,            // 拐点大小，px
    showSymbol: true,         // 是否显示拐点
    lineStyle: {              // 线体样式
      color: '#000',
      width: 2,
      type: 'solid'           // 'dashed' | 'dotted'
    },
    itemStyle: {              // 拐点样式（优先级高于 lineStyle.color）
      color: '#000',
      borderWidth: 0
    },
    areaStyle: {              // 面积图填充
      color: 'rgba(0,0,0,0.1)'
    },
    label: {                  // 单点文本标签
      show: false,
      position: 'top',
      color: '#333',
      fontSize: 12
    },
    encode: { x: 0, y: 1 },   // 数据集映射（使用 dataset 时）
    stack: null,              // 堆叠组名；相同字符串即堆叠
    emphasis: { /* 高亮样式 */ },
    select: { /* 选中样式 */ },
    show: true                // 是否渲染本系列
  }
]

语义作用：承载数据→视觉通道的最终映射规则；多系列即多个独立视觉通道。
缺省行为：未声明时无任何图形输出。

⑥ tooltip — 鼠标悬停时显示的数值提示框，便于查看具体数据

tooltip: {
  trigger: 'axis',          // 触发策略：'axis' 按轴触发 | 'item' 按点触发 | 'none'
  axisPointer: {            // 指针样式
    type: 'line',           // 'line' | 'shadow' | 'cross' | 'none'
    animation: true,        // 是否开启动画
    lineStyle: { color: '#555', width: 1, type: 'dashed' }
  },
  position: 'auto',         // 浮层位置：'auto' | 数组[x,y] | 函数
  formatter: null,          // 内容格式化：模板字符串 | 函数
  backgroundColor: 'rgba(50,50,50,0.7)', // 背景色
  borderColor: '#333',      // 边框色
  borderWidth: 0,           // 边框线宽
  padding: [5, 10],         // 内边距 [上,右,下,左]
  textStyle: { color: '#fff', fontSize: 14 },
  extraCssText: 'box-shadow: 0 2px 8px rgba(0,0,0,0.3);', // 任意 CSS
  show: true
}

语义作用：提供二次编码机会（精确数值、多系列对比），降低视觉判读误差。
缺省行为：trigger=‘item’，单点触发；无 formatter 时显示原始数值。

⑦ dataZoom & toolbox — 提供缩放、平移、导出等功能，增强图表交互性和可用性

dataZoom（区域缩放）

dataZoom: [
  {
    type: 'inside',         // 内置型（滚轮/触摸）
    xAxisIndex: 0,          // 作用于第 1 条 X 轴
    start: 0,               // 起止百分比
    end: 100,
    zoomOnMouseWheel: true, // 滚轮缩放
    moveOnMouseMove: true   // 拖拽平移
  },
  {
    type: 'slider',         // 滑块型（底部拖条）
    xAxisIndex: 0,
    start: 0,
    end: 100,
    height: 20,             // 滑条高度
    bottom: 20              // 距离底部
  }
]

toolbox（工具栏）

toolbox: {
  feature: {
    saveAsImage: {          // 下载 PNG
      title: '保存',
      name: 'chart',
      backgroundColor: '#fff',
      pixelRatio: 2         // 高清导出
    },
    restore: { title: '还原' },   // 还原初始状态
    dataView: { title: '数据', readOnly: false }, // 数据编辑弹窗
    dataZoom: { title: { zoom: '区域缩放', back: '区域缩放还原' } },
    magicType: {            // 动态类型切换
      title: {
        line: '切换为折线图',
        bar: '切换为柱状图'
      },
      type: ['line', 'bar']
    }
  },
  right: 20,
  top: 20
}

语义作用：dataZoom 提供窗口-聚合交互；toolbox 提供导出-还原-编辑生产力工具。
缺省行为：均未声明，无缩放条、无工具按钮。

下面写了一个案例，供读者练习

在这里先把数据项给大家：

const rawData = [
  { month: '2022-11', small: 100, medium: 200, large: 500, huge: 5000 },
  { month: '2022-12', small: 105, medium: 210, large: 550, huge: 5500 },
  { month: '2023-01', small: 110, medium: 220, large: 600, huge: 6000 },
  { month: '2023-02', small: 115, medium: 230, large: 650, huge: 6500 },
  { month: '2023-03', small: 120, medium: 240, large: 700, huge: 7000 },
  { month: '2023-04', small: 125, medium: 250, large: 750, huge: 7500 },
  { month: '2023-05', small: 130, medium: 260, large: 800, huge: 8000 },
  { month: '2023-06', small: 135, medium: 270, large: 850, huge: 8500 },
  { month: '2023-07', small: 140, medium: 280, large: 900, huge: 9000 },
  { month: '2023-08', small: 145, medium: 290, large: 950, huge: 9500 },
  { month: '2023-09', small: 150, medium: 300, large: 1000, huge: 10000 },
  { month: '2023-10', small: 155, medium: 310, large: 1050, huge: 10500 },
  { month: '2023-11', small: 160, medium: 320, large: 1100, huge: 11000 },
  { month: '2023-12', small: 165, medium: 330, large: 1150, huge: 11500 },
  { month: '2024-01', small: 170, medium: 340, large: 1200, huge: 12000 },
  { month: '2024-02', small: 175, medium: 350, large: 1250, huge: 12500 },
  { month: '2024-03', small: 180, medium: 360, large: 1300, huge: 13000 },
  { month: '2024-04', small: 185, medium: 370, large: 1350, huge: 13500 },
  { month: '2024-05', small: 190, medium: 380, large: 1400, huge: 14000 },
  { month: '2024-06', small: 195, medium: 390, large: 1450, huge: 14500 },
  { month: '2024-07', small: 200, medium: 400, large: 1500, huge: 15000 },
  { month: '2024-08', small: 205, medium: 410, large: 1550, huge: 15500 },
  { month: '2024-09', small: 210, medium: 420, large: 1600, huge: 16000 },
  { month: '2024-10', small: 215, medium: 430, large: 1650, huge: 16500 },
  { month: '2024-11', small: 220, medium: 440, large: 1700, huge: 17000 },
  { month: '2024-12', small: 225, medium: 450, large: 1750, huge: 17500 },
  { month: '2025-01', small: 230, medium: 460, large: 1800, huge: 18000 },
  { month: '2025-02', small: 235, medium: 470, large: 1850, huge: 18500 },
  { month: '2025-03', small: 240, medium: 480, large: 1900, huge: 19000 },
  { month: '2025-04', small: 245, medium: 490, large: 1950, huge: 19500 },
  { month: '2025-05', small: 250, medium: 500, large: 2000, huge: 20000 },
  { month: '2025-06', small: 255, medium: 510, large: 2050, huge: 20500 },
  { month: '2025-07', small: 260, medium: 520, large: 2100, huge: 21000 },
  { month: '2025-08', small: 265, medium: 530, large: 2150, huge: 21500 },
  { month: '2025-09', small: 270, medium: 540, large: 2200, huge: 22000 },
  { month: '2025-10', small: 275, medium: 550, large: 2250, huge: 22500 },
  { month: '2025-11', small: 280, medium: 560, large: 2300, huge: 23000 },
  { month: '2025-12', small: 285, medium: 570, large: 2350, huge: 23500 },
  { month: '2026-01', small: 290, medium: 580, large: 2400, huge: 24000 },
  { month: '2026-02', small: 295, medium: 590, large: 2450, huge: 24500 },
  { month: '2026-03', small: 297, medium: 772, large: 3117, huge: 78119 }
];

你的工作是把这些数据绘制在一张表上，写完了答案在下面

答案：

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8" />
  <title>多轴折线图模板</title>
  <script src="https://cdn.jsdelivr.net/npm/echarts@5/dist/echarts.min.js"></script>
  <style>
    #main { width: 900px; height: 500px; margin: 40px auto; }
  </style>
</head>
<body>
<div id="main"></div>
<script>
/* ---------- 1. 原始数据 ---------- */
const rawData = [
  { month: '2022-11', small: 100, medium: 200, large: 500, huge: 5000 },
  { month: '2022-12', small: 105, medium: 210, large: 550, huge: 5500 },
  /* ……中间省略，同上…… */
  { month: '2026-03', small: 297, medium: 772, large: 3117, huge: 78119 }
];

/* ---------- 2. 真正干活儿的 option ---------- */
const option = {
  /* ① 标题 */
  title: { text: '电商 4 指标趋势（多轴示例）', left: 'center' },

  /* ② 图例 */
  legend: {
    data: ['small', 'medium', 'large', 'huge'],
    bottom: 10
  },

  /* ③ 提示框 */
  tooltip: { trigger: 'axis' },

  /* ④ 网格：决定“画图区域”离四边的距离 */
  grid: {
    left: '8%', right: '15%', bottom: '15%', containLabel: true
  },

  /* ⑤ X 轴 */
  xAxis: {
    type: 'category',
    data: rawData.map(d => d.month)
  },

  /* ⑥ Y 轴：双轴解决“数量级炸裂” */
  yAxis: [
    {
      type: 'value', name: 'small / medium', position: 'left',
      min: 0, max: 800, interval: 100
    },
    {
      type: 'value', name: 'large / huge', position: 'right',
      min: 0, max: 80000, interval: 10000
    }
  ],

  /* ⑦ 系列：四条线 + 指定哪条线用哪根 Y 轴 */
  series: [
    {
      name: 'small', type: 'line', yAxisIndex: 0,
      data: rawData.map(d => d.small),
      smooth: true, symbol: 'circle', itemStyle: { color: '#5470c6' }
    },
    {
      name: 'medium', type: 'line', yAxisIndex: 0,
      data: rawData.map(d => d.medium),
      smooth: true, symbol: 'diamond', itemStyle: { color: '#91cc75' }
    },
    {
      name: 'large', type: 'line', yAxisIndex: 1,
      data: rawData.map(d => d.large),
      smooth: true, symbol: 'triangle', itemStyle: { color: '#fac858' }
    },
    {
      name: 'huge', type: 'line', yAxisIndex: 1,
      data: rawData.map(d => d.huge),
      smooth: true, symbol: 'rect', itemStyle: { color: '#ee6666' }
    }
  ]
};

/* ---------- 3. 一键渲染 ---------- */
const chart = echarts.init(document.getElementById('main'));
chart.setOption(option);
</script>
</body>
</html>

三、option 逐项拆解（对照代码看）

四、再给你 3 个“进阶按钮”

1. 数据太多挤成麻花？
   在 xAxis 同级加
   dataZoom: [{ type: 'inside', start: 0, end: 100 }] 就能滚轮缩放。

2. 想点击图例只留一条线？
   legend 默认自带开关，无需写代码；若想“单选模式”，加
   legend: { selectedMode: 'single' }。

3. 要动态改数据？
   直接 chart.setOption(newOption)，ECharts 会自动合并差异，无需销毁重绘。

五、总结

通过以上详细的配置和示例代码，你已经掌握了如何使用 ECharts 创建多系列、多数量级、多坐标轴的折线图。

这些配置项和技巧可以帮助你解决常见的图表问题，如坐标轴爆裂、图例乱飞、颜色不协调等。

希望这份教程对你有所帮助，如果有任何错误或需要进一步讨论的地方，请随时在评论区交流。祝你绘图愉快！