要求实现多grid的柱状图绘制双Y轴的功能,可以自己模拟数据,或者在官方的实例中,加入双Y轴,最好把series数据里的type改为bar,然后再弄;
链接:https://echarts.apache.org/examples/zh/editor.html?c=scatter-anscombe-quartet
数据如下:
option = {
grid: [
{ left: '7%', top: '7%', width: '38%', height: '38%' },
{ right: '7%', top: '7%', width: '38%', height: '38%' },
{ left: '7%', bottom: '7%', width: '38%', height: '38%' },
{ right: '7%', bottom: '7%', width: '38%', height: '38%' }
],
tooltip: { },
xAxis: [
{
gridIndex: 0,
type: 'category',
data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun']
},
{
gridIndex: 1,
type: 'category',
data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun']
},
{
gridIndex: 2,
type: 'category',
data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun']
},
{
gridIndex: 3,
type: 'category',
data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun']
}
],
yAxis: [
{ gridIndex: 0, type: 'value' },
{ gridIndex: 1, type: 'value' },
{ gridIndex: 2, type: 'value' },
{ gridIndex: 3, type: 'value' }
],
series: [
{
name: 'I',
type: 'bar',
xAxisIndex: 0,
yAxisIndex: 0,
data: [120, 200, 150, 80, 70, 110, 130],
},
{
name: 'I',
type: 'line',
xAxisIndex: 0,
yAxisIndex: 0,
data: [120, 200, 150, 80, 70, 110, 130],
},
{
name: 'II',
type: 'bar',
xAxisIndex: 1,
yAxisIndex: 1,
data: [120, 200, 150, 80, 70, 110, 130],
},
{
name: 'III',
type: 'bar',
xAxisIndex: 2,
yAxisIndex: 2,
data: [120, 200, 150, 80, 70, 110, 130],
},
{
name: 'IV',
type: 'bar',
xAxisIndex: 3,
yAxisIndex: 3,
data: [120, 200, 150, 80, 70, 110, 130],
}
]
};
在yAxis里面就可以设置,直接复制两个就行了,如下参考链接:
https://blog.csdn.net/lilongwei4321/article/details/82013027
https://www.cnblogs.com/zhinian-/p/11864680.html
原来这样就可以了,感谢来自946954124的答疑解惑~