首页 新闻 会员 周边

[echarts]多grid的柱状图,怎么绘制双Y轴?

0
悬赏园豆:120 [待解决问题]

要求实现多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],
}
]
};

不由分说的主页 不由分说 | 初学一级 | 园豆:20
提问于:2021-11-28 12:21
< >
分享
所有回答(2)
0

在yAxis里面就可以设置,直接复制两个就行了,如下参考链接:

https://blog.csdn.net/lilongwei4321/article/details/82013027

https://www.cnblogs.com/zhinian-/p/11864680.html

熊泽-学习中的苦与乐 | 园豆:2267 (老鸟四级) | 2021-11-29 09:53
0

原来这样就可以了,感谢来自946954124的答疑解惑~

不由分说 | 园豆:20 (初学一级) | 2021-11-29 10:14
清除回答草稿
   您需要登录以后才能回答,未注册用户请先注册