怎么在echarts上多个y轴

最近被叫去写数据后台的页面,嗯,我是一个java开发,还是偏数据方向,但是,不能让cto和师傅失望,ok,但是会写的慢一点。(说这句话的时候我已经给后台写了7个页面,包括接口和sql)。

其实echarts对前端来说挺简单的,我主要写给那些和我一样非前端的,如有错误,可以提,不接受批评,谢谢。

这里写图片描述

这里写代码片
var lineChartDataOne = {
        title: {
            text: ''
        },
        tooltip: {
            trigger: 'axis',
            axisPointer: {
                type: 'cross',
                label: {
                    backgroundColor: '#6a7985'
                }
            }
        },
        toolbox: {
            feature: {
                dataZoom: {
                    yAxisIndex: 'none'
                },
                restore: {},
                saveAsImage: {}
            }
        },
        legend: {
            data:['整体销售率','供应商销售率','整体收入','供应商收入'],
            x: 'right'
        },
        toolbox: {
            feature: {
                saveAsImage: {}
            }
        },
        grid: {
            left: '3%',
            right: '4%',
            bottom: '3%',
            containLabel: true
        },
        dataZoom: [
                // {    //是否显示下方拖拉条
            //     show: true,
            //     realtime: true,
            //     start: 65,
            //     end: 85
            // }
            // ,
            {
                type: 'inside',
                realtime: true,
                start: 0,
                end: 100
            }
        ],
        xAxis: [
            {
                type: 'category',
                boundaryGap: false,
                data: []
            }
        ],
        yAxis: [
            {       //两个y轴,同理两个x轴也一样
                name: '销售率(%)',
                type: 'value',
                max: null
            },
            {
                name: '收入(元)',
                //nameLocation: 'start',
                max: null,
                type: 'value',
                inverse: false //起始点
            }
        ],
        series: [
            {
                name: '整体销售率',
                type: 'line',
                //stack: '总量', //折线是否带下方阴影

                //areaStyle: {normal: {}},
                data: []
            },
            {
                name: '供应商销售率',
                type: 'line',
                //stack: '总量',

                //areaStyle: {normal: {}},
                data: []
            },
            {
                name: '整体收入',
                type: 'line',
                yAxisIndex:1,
                //stack: '总量',

                smooth:true,
                //areaStyle: {normal: {}},
                data: []
            },

            {
                name: '供应商收入',
                type: 'line',
                yAxisIndex:1,
               // stack: '总量',

                smooth:true,
                //areaStyle: {normal: {}},
                data: []
            }

        ]
    },

聪明的小伙伴看代码就能看懂了把,如果不懂就问我或者去echarts官网的配置项里全局搜索。

之后的效果是这样的:
(改天去公司截图—-汗)

欢迎关注我的微博@住街对面的查理,我的生活很有趣,你要不要来看一看。

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值