echarts双y轴柱状图
时间: 2023-07-08 15:40:42 浏览: 125
要绘制双y轴柱状图,需要在ECharts中使用grid、xAxis、yAxis和series等配置项。其中,xAxis和yAxis分别表示x轴和y轴的配置,series表示数据系列的配置。
以下是一个简单的例子,展示如何绘制双y轴柱状图:
```javascript
option = {
grid: {
left: '3%',
right: '3%',
bottom: '3%',
containLabel: true
},
xAxis: [
{
type: 'category',
data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun']
}
],
yAxis: [
{
type: 'value',
name: 'y轴1',
axisLabel: {
formatter: '{value} ml'
}
},
{
type: 'value',
name: 'y轴2',
axisLabel: {
formatter: '{value} °C'
}
}
],
series: [
{
name: '蒸发量',
type: 'bar',
data: [2.0, 4.9, 7.0, 23.2, 25.6, 76.7, 135.6]
},
{
name: '降水量',
type: 'bar',
data: [2.6, 5.9, 9.0, 26.4, 28.7, 70.7, 175.6]
},
{
name: '平均温度',
type: 'line',
yAxisIndex: 1,
data: [2.0, 2.2, 3.3, 4.5, 6.3, 10.2, 20.3]
}
]
};
```
在上面的例子中,我们使用了一个grid来指定图表的位置和大小;使用了一个xAxis来指定x轴的数据;使用了两个yAxis来指定两个y轴的数据,第一个yAxis的名称为“y轴1”,单位为“ml”;第二个yAxis的名称为“y轴2”,单位为“°C”;最后,我们使用了三个series,其中前两个是柱状图,最后一个是折线图,使用了第二个yAxis。
希望这个例子能够帮助你绘制双y轴柱状图。
阅读全文