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


                ],

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

推荐阅读更多精彩内容