echarts 一个y轴多组x轴
时间: 2025-02-02 18:50:19 浏览: 36
### 配置 ECharts 图表以支持单 Y 轴与多 X 轴
为了创建具有单一 Y 轴和多个 X 轴的图表,在 ECharts 中可以通过定义 `xAxis` 数组来实现这一目标。对于每一个额外的 X 轴,都需要单独配置其属性,并通过 `offset` 参数调整位置防止重叠[^2]。
下面是一个具体的 JavaScript 代码实例展示如何构建这样的图表:
```javascript
option = {
tooltip: {trigger: 'axis'},
legend: {},
grid: [
{left: '10%', top: '10%'},
{left: '10%', bottom: '10%'}
],
xAxis: [
{
type: 'category',
data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun'],
position: 'bottom'
},
{
type: 'category',
data: ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul'],
axisLine: {show: true},
axisTick: {show: false},
offset: 40,
position: 'top' // 或者保持默认底部位置并仅使用偏移量
}
],
yAxis: [{
type: 'value'
}],
series: [
{
name:'Series One',
type:'line',
xAxisIndex: 0, // 关联第一个X轴
data:[2.6, 5.9, 9.0, 26.4, 28.7, 70.7, 175.6]
},
{
name:'Series Two',
type:'line',
xAxisIndex: 1, // 关联第二个X轴
data:[2.3, 5.8, 8.0, 25.4, 27.7, 69.7, 173.6]
}
]
};
```
在这个例子中,两个不同的时间序列被分配给了各自的 X 轴,而共享同一个 Y 轴用于表示数值大小。注意这里设置了 `tooltip.trigger='axis'` 来确保提示框能够沿着所选中的那条轴线移动;同时为了避免不必要的混淆,可能还需要进一步定制工具提示的行为以便更好地控制哪些元素应该响应用户的交互操作。
阅读全文
相关推荐


















