引言
在数据可视化领域，ECharts 是一个功能强大且灵活的 JavaScript 图表库，它支持多种图表类型，包括折线图、柱状图、饼图等。其中，实现双 X 轴的折线图是一种常见需求，尤其适用于需要同时展示两种不同量纲或时间尺度的数据场景。例如，你可能需要在同一个图表中显示温度变化（左 X 轴）和湿度变化（右 X 轴），或者在时间序列数据中叠加不同粒度的时间轴（如小时和天）。这种双轴设计可以帮助用户更直观地比较数据，但配置起来需要特别注意轴的同步和数据映射。
本文将详细指导你如何使用 ECharts 创建一个带有双 X 轴的折线图，包括从基础设置到高级配置的完整步骤。我们将通过一个实际的例子来演示：假设我们有一组销售数据，左 X 轴表示月份（1-12月），右 X 轴表示季度（Q1-Q4），并绘制两条折线分别对应销售额和增长率。文章还会解析常见问题及其解决方案，确保你能高效地应用到项目中。
ECharts 的双 X 轴实现依赖于其强大的坐标轴系统，通过配置
xAxis
数组来定义多个轴，并使用
series
中的
xAxisIndex
属性将数据绑定到特定轴。整个过程基于 ECharts 5.x 版本（最新稳定版），如果你使用的是旧版本，建议升级以获得更好的兼容性和性能。
准备工作
在开始编码前，确保你的开发环境已就绪：
引入 ECharts 库
：可以通过 CDN 或 npm 安装。推荐使用 CDN 方式快速测试：
如果使用 npm：
npm install echarts
，然后在项目中导入
import * as echarts from ‘echarts’;
。
HTML 结构
：创建一个容器元素用于渲染图表：
数据准备
：准备示例数据。我们将使用 JavaScript 对象模拟数据，便于演示。实际项目中，你可能从 API 获取数据。
浏览器环境
：确保在现代浏览器（如 Chrome、Firefox）中测试，ECharts 依赖 Canvas 或 SVG 渲染。
现在，让我们进入核心步骤。
详细步骤：创建双 X 轴折线图
步骤 1: 初始化 ECharts 实例
首先，在 JavaScript 中初始化 ECharts 实例。这是所有图表的起点。
// 获取 DOM 容器
const chartDom = document.getElementById(‘chart’);
// 初始化 ECharts 实例
const myChart = echarts.init(chartDom);
这一步创建了一个图表对象
myChart
，后续的所有配置都将通过
myChart.setOption(option)
应用。
步骤 2: 定义数据
我们使用示例数据：左 X 轴为月份（1-12），右 X 轴为季度（Q1-Q4）。假设销售额数据对应月份，增长率数据对应季度。
// 左 X 轴数据：月份
const months = [‘1月’, ‘2月’, ‘3月’, ‘4月’, ‘5月’, ‘6月’, ‘7月’, ‘8月’, ‘9月’, ’10月’, ’11月’, ’12月’];
// 右 X 轴数据：季度（映射到月份位置，用于定位）
const quarters = [‘Q1’, ‘Q2’, ‘Q3’, ‘Q4’];
// 销售额数据（对应月份）
const salesData = [120, 132, 101, 134, 90, 230, 210, 220, 180, 200, 250, 280];
// 增长率数据（对应季度，需要扩展到月份长度，用 null 填充非季度位置）
const growthData = [5, null, null, 8, null, null, 12, null, null, 15, null, null]; // 只在季度位置有值
说明
：双 X 轴的关键是数据对齐。增长率数据只在季度位置有值，其他位置用
null
填充，这样折线图会自动跳过这些点，形成季度间的线段。如果你的数据是独立的，可以使用不同的数据长度，但需要确保轴配置正确。
步骤 3: 配置 option 对象
option
对象是 ECharts 的核心配置。我们将逐步构建它。
3.1 配置 title（可选，但推荐）
添加标题以提高可读性。
title: {
text: ‘销售数据双 X 轴折线图’,
subtext: ‘左轴：月份销售额 | 右轴：季度增长率’,
left: ‘center’
}
3.2 配置 tooltip（工具提示）
启用 tooltip 以显示数据详情。
tooltip: {
trigger: ‘axis’, // 触发方式：轴线触发
axisPointer: {
type: ‘cross’ // 十字准星指示器
}
}
3.3 配置 legend（图例）
显示图例，便于区分两条折线。
legend: {
data: [‘销售额’, ‘增长率’],
top: 40
}
3.4 配置双 X 轴（核心部分）
ECharts 的
xAxis
是一个数组，支持多个轴。我们定义两个轴：
第一个轴（索引 0）：左 X 轴，类型为 ‘category’（分类轴），数据为月份。
第二个轴（索引 1）：右 X 轴，类型也为 ‘category’，数据为季度。注意，我们需要设置
position: ‘bottom’
或 ‘top’，但默认是底部。为了双轴，我们让第二个轴也显示在底部，但通过
offset
属性微调位置，避免重叠。
xAxis: [
{
// 左 X 轴：月份
type: ‘category’,
data: months,
position: ‘bottom’, // 显示在底部
axisLabel: {
formatter: ‘{value}’ // 标签格式化
},
name: ‘月份’, // 轴名称
nameLocation: ‘end’
},
{
// 右 X 轴：季度
type: ‘category’,
data: quarters,
position: ‘bottom’, // 同样在底部
offset: 40, // 向下偏移 40px，避免与第一个轴重叠
axisLabel: {
formatter: ‘{value}’
},
name: ‘季度’,
nameLocation: ‘end’
}
]
关键点
：
type: ‘category’
适用于离散数据（如月份、季度）。
offset
用于视觉分离双轴。如果你希望一个在上一个在下，可以设置
position: ‘top’
和
position: ‘bottom’
。
双 X 轴的刻度默认不自动对齐，需要手动确保数据索引匹配（如我们的示例中，季度数据只在特定月份位置有值）。
3.5 配置 Y 轴
Y 轴通常只有一个，但可以配置多个。这里我们用一个 Y 轴，支持两种数据（销售额和增长率），通过
min
和
max
调整范围。
yAxis: {
type: ‘value’,
name: ‘数值’,
min: 0, // 最小值
axisLabel: {
formatter: ‘{value}’
}
}
如果你需要双 Y 轴（一个左一个右），可以类似 xAxis 用数组配置，但本例中双 X 轴就够了。
3.6 配置 series（数据系列）
series 是折线图的数据部分。我们定义两个系列：
销售额：绑定到左 X 轴（xAxisIndex: 0）。
增长率：绑定到右 X 轴（xAxisIndex: 1）。
series: [
{
name: ‘销售额’,
type: ‘line’, // 折线图
data: salesData,
xAxisIndex: 0, // 绑定到第一个 X 轴
smooth: true, // 平滑曲线
lineStyle: {
width: 2,
color: ‘#5470c6’
},
itemStyle: {
color: ‘#5470c6’
},
areaStyle: { // 可选：填充区域
color: ‘rgba(84, 112, 198, 0.2)’
}
},
{
name: ‘增长率’,
type: ‘line’,
data: growthData,
xAxisIndex: 1, // 绑定到第二个 X 轴
smooth: true,
lineStyle: {
width: 2,
color: ‘#91cc75’,
type: ‘dashed’ // 虚线，便于区分
},
itemStyle: {
color: ‘#91cc75’
}
}
]
说明
：
xAxisIndex
指定数据绑定的 X 轴索引（从 0 开始）。
smooth: true
使折线平滑，提升美观度。
对于增长率数据，由于有
null
值，折线会在季度间自动连接，形成跳跃效果。如果不想连接，可以设置
connectNulls: false
（默认）。
3.7 完整 option 对象
将以上部分组合成完整的
option
：
const option = {
title: {
text: ‘销售数据双 X 轴折线图’,
subtext: ‘左轴：月份销售额 | 右轴：季度增长率’,
left: ‘center’
},
tooltip: {
trigger: ‘axis’,
axisPointer: {
type: ‘cross’
}
},
legend: {
data: [‘销售额’, ‘增长率’],
top: 40
},
xAxis: [
{
type: ‘category’,
data: months,
position: ‘bottom’,
axisLabel: {
formatter: ‘{value}’
},
name: ‘月份’,
nameLocation: ‘end’
},
{
type: ‘category’,
data: quarters,
position: ‘bottom’,
offset: 40,
axisLabel: {
formatter: ‘{value}’
},
name: ‘季度’,
nameLocation: ‘end’
}
],
yAxis: {
type: ‘value’,
name: ‘数值’,
min: 0,
axisLabel: {
formatter: ‘{value}’
}
},
series: [
{
name: ‘销售额’,
type: ‘line’,
data: salesData,
xAxisIndex: 0,
smooth: true,
lineStyle: {
width: 2,
color: ‘#5470c6’
},
itemStyle: {
color: ‘#5470c6’
},
areaStyle: {
color: ‘rgba(84, 112, 198, 0.2)’
}
},
{
name: ‘增长率’,
type: ‘line’,
data: growthData,
xAxisIndex: 1,
smooth: true,
lineStyle: {
width: 2,
color: ‘#91cc75’,
type: ‘dashed’
},
itemStyle: {
color: ‘#91cc75’
}
}
]
};
步骤 4: 渲染图表并处理响应式
应用配置并监听窗口变化以实现响应式：
// 渲染图表
myChart.setOption(option);
// 响应式调整
window.addEventListener(‘resize’, function() {
myChart.resize();
});
现在，将所有代码放入一个 HTML 文件中，在浏览器中打开，你将看到一个双 X 轴折线图：底部有两行标签（月份和季度），两条折线分别对应数据。
步骤 5: 自定义和扩展（可选）
动态数据
：使用
myChart.setOption({ series: [{ data: newData }] })
更新数据。
交互
：添加
dataZoom
组件支持缩放：
dataZoom: [
{ type: ‘inside’, xAxisIndex: [0, 1] }, // 支持两个轴的缩放
{ type: ‘slider’, xAxisIndex: [0, 1] }
]
主题
：使用
echarts.init(chartDom, ‘dark’)
切换暗黑主题。
常见问题解析
在实现双 X 轴折线图时，开发者常遇到以下问题。我们逐一解析原因和解决方案。
问题 1: 轴标签重叠或显示不全
原因
：双 X 轴默认在同一位置，标签容易重叠，尤其是数据密集时。
解决方案
：
使用
offset
属性偏移轴位置，如上例中的
offset: 40
。
调整
axisLabel
的
rotate
或
interval
：
axisLabel: {
rotate: 45, // 旋转标签
interval: 0 // 显示所有标签
}
如果标签太多，考虑使用
dataZoom
隐藏部分标签，只在缩放时显示。
问题 2: 数据与轴不匹配，导致折线错位
原因
：双轴数据长度不同或索引不对齐，ECharts 默认按索引映射数据。
解决方案
：
确保
series
中的
data
长度与绑定的
xAxis
数据长度一致。如果不同，用
null
填充（如上例的增长率数据）。
对于时间轴（非 category），使用
type: ‘time’
并确保数据是时间戳格式：
xAxis: [{ type: ‘time’ }, { type: ‘time’ }]
验证：在 tooltip 中打印数据索引，调试映射关系。
问题 3: 两个轴的刻度不自动同步
原因
：category 轴的刻度基于数据数组，独立计算。
解决方案
：
手动设置
min
和
max
来对齐范围：
xAxis: [
{ type: ‘category’, data: months, min: 0, max: 11 },
{ type: ‘category’, data: quarters, min: 0, max: 3 } // 假设季度对应 0-3 索引
]
如果是时间轴，使用
min
和
max
指定时间范围：
xAxis: [{ type: ‘time’, min: ‘2023-01-01’, max: ‘2023-12-31’ }]
对于复杂场景，考虑使用
axisPointer
的
link
属性同步两个轴的指示器：
axisPointer: {
link: [{ xAxisIndex: [0, 1] }]
}
问题 4: 性能问题，大数据量下卡顿
原因
：双轴 + 大数据量导致渲染负担重。
解决方案
：
使用
progressive
渐进渲染：
series: [{ progressive: 1000 }] // 每批渲染 1000 个点
优化数据：采样或聚合数据，减少点数。
切换到 SVG 渲染（如果 Canvas 不支持）：
echarts.init(chartDom, null, { renderer: ‘svg’ })
。
问题 5: 移动端适配不佳
原因
：双轴标签在小屏上挤压。
解决方案
：
使用媒体查询调整
offset
和
axisLabel
：
@media (max-width: 768px) {
#chart { height: 400px; }
}
在 JS 中动态配置：
const isMobile = window.innerWidth < 768;
const offset = isMobile ? 20 : 40;
// 在 option 中使用 offset 变量
隐藏次要轴：移动端只显示一个轴，通过
show: false
隐藏另一个。
问题 6: 自定义主题或颜色不生效
原因
：ECharts 默认主题覆盖自定义样式。
解决方案
：
在
series
中明确指定
lineStyle
和
itemStyle
。
使用
color
数组全局定义调色板：
color: ['#5470c6', '#91cc75', '#fac858']
如果使用自定义主题，确保在
init
时传入。
结论
通过以上步骤，你可以轻松使用 ECharts 创建双 X 轴折线图。从初始化到配置双轴，再到处理数据绑定，整个过程强调了索引对齐和视觉分离的重要性。示例代码可以直接复制运行，并根据实际数据调整。常见问题解析覆盖了 80% 的开发痛点，帮助你避免陷阱。
在实际项目中，双 X 轴常用于金融、气象或业务分析场景。建议多参考 ECharts 官方文档（
https://echarts.apache.org/zh/option.html）以探索更多高级功能，如多
Y 轴或混合图表。如果你的数据涉及实时更新，结合 WebSocket 可以实现动态双轴图。遇到具体问题，欢迎提供更多细节进一步调试！