echarts柱形图倒立,两边都是正数

//流失用户监控柱形图
var itemStyle = {
    normal: {
    },
    emphasis: {
        barBorderWidth: 1,
        shadowBlur: 10,
        shadowOffsetX: 0,
        shadowOffsetY: 0,
        shadowColor: 'rgba(0,0,0,0.5)'
    }
};
analyseBarChartOption = {
    // backgroundColor: '#eee',
    title: {
                text: '流失用户监控',
                x:'center'
            },
    legend: {    //小标签
        data: ['流失用户', '新增用户','净增用户'],
        x: 'center',   //标签位置
        y: 'bottom',
        itemGap: 15  //标签之间间距
        // itemHeight: 19,
        // itemWidth: 20,
        // textStyle: {
        //     color: '#999'
        // }
        },
    tooltip: {
        trigger: 'axis',
        padding: 10,
        axisPointer: { // 坐标轴指示器,坐标轴触发有效
            type: 'line' // 默认为直线,可选为:'line' | 'shadow'
        },
        formatter:function(params){ // 改鼠标悬浮提示值格式
            var relVal = params[0].name+"<br/>";
            relVal += params[0].seriesName+ ' : ' + Math.abs(params[0].value) +"<br/>";
            relVal += params[1].seriesName+ ' : ' +Math.abs(params[1].value)+"<br/>";
            relVal += params[2].seriesName+ ' : ' +Math.abs(params[2].value)+"<br/>";
            return relVal;
                }
    },
    dataZoom: {   //滚动条
        show: true,
        y: 265,
        // realtime: true,
        start: 30,
        end: 70,
        height: 12,
        handleColor: '#1a8edc',
        handleSize: 5,
        fillerColor: '#a5cdea'
    },
    xAxis: {
        // name: 'X Axis',
        silent: false,
        // axisLine: {onZero: true}, //    定位到垂直方向的0值坐标上
        axisLine: {show: false},
        splitLine: {show: false},
        splitArea: {show: false},
        axisTick: {   //刻度
            show: false
        },
        axisLabel:{   //x轴数据
            textStyle: {   //x轴数据字体设置
                color: '#666'
            }
        },
        data :  function (){  
                        var list = [];
                        for (var i = 1; i <= 11; i++) {
                            list.push(i + '日');
                        }
                        return list;
                    }()
    },
    yAxis : [
    {
        inverse: true,
        splitArea: {show: false},  //背景区域
        splitLine: {     //背景网格线
            lineStyle: {
                color: '#9ecbcc',
                width: 1
            }
        },
        type : 'value',
        axisLabel:{   //Y轴数据
        formatter:function(value){
            return Math.abs(value);   //负数取绝对值变正数
        // if (value<0) {  //另一写法
        //     return -value;
        //           }else {
        //     return value;
        // }
            },
            textStyle: {   //Y轴数据字体设置
                color: '#666'
            }
        },
        axisTick: {   //刻度
            show: false
        },
        axisLine: {   //坐标轴
            show:true,
            lineStyle: {  //坐标轴线设置
                width: 1,
                color: '#ccc'
            }
        }
    },
        {
            type : 'value',     //曲线y轴
            // name : '温度',
            axisLine: {   //坐标轴
                show:true,
                lineStyle: {  //坐标轴线设置
                    width: 1,
                    color: '#ccc'
                }
            },
            splitLine: {     //背景网格线
                show: false
            },
            axisLabel : {  //y轴数据
                show:false, //是否展示
                formatter: '{value} °C'
            },
            axisTick: {   //刻度
                show: false,
                lineStyle: {
                    color: '#76AFF4',
                    width: 1
                }
            }
        }
                ],
    grid: {
        left: 100   //整体偏移
    },
    series: [
        {
            name: '流失用户',
            type: 'bar',
            stack: 'one',
            itemStyle: itemStyle,
            data:[70, 172, 105, 80, 116, 180, 190,120,110,115,90]
        },
        {
            name: '新增用户',
            type: 'bar',
            stack: 'two',
            itemStyle: itemStyle,
            data:[-90, -172, -105, -80, -116, -180, -190,-120,-110,-115,-60]
        },
        {
            name:'净增用户',
            type:'line',
            yAxisIndex: 1,
            itemStyle: {
                normal: {
                    color: '#519933'
                }
            },
            data:[75,-72, 120, -90, 80, -100, 190, -160, 135, -70,50]
        }
    ]
};

附图;
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值