echarts 居左_Echarts双y轴左侧正常，右侧以百分比显示

在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} %'//以百分比显示

},

},

],

好了这就是全部知识点了，希望你们能学到用到！！