echarts 多x轴
时间: 2023-06-28 21:11:05 浏览: 137
Echarts 实现X轴多维效果
ECharts 中支持多个 X 轴,可以通过 option 中的 xAxis 属性来定义。在定义多个 X 轴时,需要为每个 X 轴指定一个唯一的 id,同时在 series 中指定使用哪个 X 轴。
以下是一个简单的例子,其中定义了两个 X 轴,分别对应不同的 series:
```javascript
option = {
xAxis: [
{
id: 'x1',
type: 'category',
data: ['A', 'B', 'C']
},
{
id: 'x2',
type: 'category',
data: ['D', 'E', 'F']
}
],
yAxis: {
type: 'value'
},
series: [
{
name: 'Series 1',
type: 'bar',
data: [1, 2, 3],
xAxisId: 'x1' // 指定使用 x1 轴
},
{
name: 'Series 2',
type: 'line',
data: [4, 5, 6],
xAxisId: 'x2' // 指定使用 x2 轴
}
]
};
```
以上代码中,定义了两个 X 轴,分别对应 id 为 x1 和 x2。在 series 中,分别指定使用哪个 X 轴,即通过 xAxisId 属性来指定。这样就可以实现多个 X 轴的效果。
阅读全文