0
点赞
收藏
分享

微信扫一扫

echarts双y轴,YAxis配置,以及多个y轴和数据之间对应的关系


双y轴,YAxis配置

let newYAxis = {
4: [
{
//双y轴配置
type: 'value',
nameRotate: 0.1, // 坐标轴名字旋转,角度值
nameTextStyle: {
color: 'rgba(0,0,0,0.70)',
fontSize: 12,
fontWeight: 400
},
nameGap: 28, // 坐标轴名称与轴线之间的距离
name: i18n.t('hcp_bi_wait_timeout_time'),
minInterval: 1, // 自动计算的坐标轴最小间隔大小,设置成1保证坐标轴分割刻度显示成整数
// splitNumber: 5, // 坐标轴的分割段数
// alignTicks: true, // v5.3.0 支持在多个 y 轴为数值轴的时候,可以开启该配置项自动对齐刻度
splitLine: {
show: true //坐标轴在 grid 区域中的分隔线。
},
splitArea: {
show: false, // 坐标轴在 grid 区域中的分隔区域,默认不显示
areaStyle: {
color: ['#fff', '#fafbfc'],
opacity: 0.5
}
},
axisTick: {
show: false // 坐标轴刻度相关设置
},
axisLine: {
show: false, // 坐标轴轴线
lineStyle: {
color: '#bfbfbf'
}
}
},
{
type: 'value',
nameRotate: -0.1,
nameTextStyle: {
color: 'rgba(0,0,0,0.70)',
fontSize: 12,
fontWeight: 400
},
nameGap: 28,
name: i18n.t('hcp_bi_people_num_overrun'),
minInterval: 1,
// splitNumber: 5,
// alignTicks: true,
splitLine: {
show: false
},
splitArea: {
show: false,
areaStyle: {
color: ['#fff', '#fafbfc'],
opacity: 0.5
}
},
axisTick: {
show: false
},
axisLine: {
show: false,
lineStyle: {
color: '#bfbfbf'
}
}
}
],
6: [
{
type: 'value',
nameRotate: 0.1,
nameTextStyle: {
color: 'rgba(255,255,255,255.70)',
fontSize: 12,
fontWeight: 400
},
nameGap: 14,
name: i18n.t('hcp_bi_wait_timeout_time'),
minInterval: 1,
splitLine: {
show: true,
lineStyle: {
color: ['rgba(255,255,255,0.08)'],
width: 1
}
},
splitArea: {
show: false
},
axisTick: {
show: false
},
axisLine: {
show: false,
lineStyle: {
color: 'rgba(255,255,255,0.20)'
}
},
axisLabel: {
color: 'rgba(255,255,255,0.40)',
margin: 5
}
},
{
type: 'value',
name: i18n.t('hcp_bi_people_num_overrun'),
nameGap: 14,
nameRotate: -0.1,
nameTextStyle: {
color: 'rgba(255,255,255,255.70)',
fontSize: 12,
fontWeight: 400
},
splitLine: {
show: false
},
splitArea: {
show: false
},
axisTick: {
show: false // 坐标轴刻度相关设置
},
axisLine: {
show: false,
lineStyle: {
color: 'rgba(255,255,255,0.40)',
fontWeight: 'normal'
}
},
axisLabel: {
color: 'rgba(255,255,255,0.40)',
margin: 5
}
}
]
};

echarts双y轴,YAxis配置,以及多个y轴和数据之间对应的关系_echarts

这两个系列的数据已第二个y轴为标准

echarts双y轴,YAxis配置,以及多个y轴和数据之间对应的关系_前端_02


举报

相关推荐

0 条评论