在echarts实际开发中我们可能会用到柱形图,结合折线一起显示,而折现又要显示概率百分比,如图:
效果图
这时候有的小伙伴就会慌张了,不会呀怎么弄啊,开始疯狂地搜百度,其实不用,在简书关注小编就可以了啊!!
先说一下如何实现双y轴,echarts中有个控制y轴的属性叫yAxis,这个属性当我们里面只设置一个需求时,它可以为对象,当我们要设置很多需求时,它还可以是个数组,所以我们要设置双y轴,它就需要为数组,看代码:
yAxis: [
{
name: '次数',
type: 'value'
},
{
name: '概率',
type: 'value',
}
],
这时候就有两个y轴了,一个为次数另一个为概率,在series中我们要不同数据对应不同y轴显示,我们要通过yAxisIndex来控制要对应显示的y轴在yAxis数组中的下标,如:
{
name: "调用成功次数",
type: "bar",
data: [1, 2, 3, 4, 2, 3, 3],
barWidth: 38,
yAxisIndex: 0,
//显示颜色
itemStyle: {
normal: {color: "blue"}
}
},
这个数据对应的就是下标为0的次数y轴,那么我们怎么才能让概率轴以百分比数显示呢,既然是控制y轴当然得在yAxis的对应对象里操作:
yAxis: [
{
name: '次数',
type: 'value'
}, {
name: '概率',
type: 'value',
axisLabel: {
show: true,
interval: 'auto',//居中显示
formatter: '{value} %'//以百分比显示
},
},
],
好了这就是全部知识点了,希望你们能学到用到!!