echarts柱形图双y轴
时间: 2023-08-25 22:17:47 浏览: 144
在 ECharts 中创建带有双 Y 轴的柱形图可以通过配置项 yAxis 来实现。以下是一个示例配置,展示了如何创建带有双 Y 轴的柱形图:
```javascript
option = {
xAxis: {
type: 'category',
data: ['数据1', '数据2', '数据3', '数据4', '数据5']
},
yAxis: [
{
type: 'value',
name: '左侧 Y 轴',
position: 'left',
axisLabel: {
formatter: '{value} 单位1'
}
},
{
type: 'value',
name: '右侧 Y 轴',
position: 'right',
axisLabel: {
formatter: '{value} 单位2'
}
}
],
series: [
{
name: '系列1',
type: 'bar',
data: [100, 200, 300, 400, 500],
yAxisIndex: 0
},
{
name: '系列2',
type: 'bar',
data: [50, 150, 250, 350, 450],
yAxisIndex: 1
}
]
};
```
在上述配置中,通过设置 yAxis 数组来定义两个 Y 轴。每个 Y 轴通过设置 type、name、position 和 axisLabel 等属性进行配置。在 series 中,通过设置 yAxisIndex 属性将对应的系列与特定的 Y 轴关联起来。
这样,就可以创建一个带有双 Y 轴的柱形图,其中左侧 Y 轴对应的是系列1,右侧 Y 轴对应的是系列2。根据实际需求,可以根据需要设置更多的系列和 Y 轴。
希望这个示例对您有所帮助。如需了解更多关于 ECharts 的使用和配置,请参考 ECharts 官方文档。
阅读全文