首页 > 其他 > 详细

echarts 实现正负轴双柱状图

时间:2020-05-11 19:22:16      阅读:840      评论:0      收藏:0      [点我收藏+]

option = {
    title: {
        show: true,
        text: ‘产品留存分析‘,
        textAlign: ‘auto‘,
        left: ‘center‘
    },
    tooltip: {
        show: false,
        trigger: ‘axis‘,
        axisPointer: {            // 坐标轴指示器,坐标轴触发有效
            type: ‘shadow‘        // 默认为直线,可选为:‘line‘ | ‘shadow‘
        }
    },
    legend: {
        show: false,
        data: [‘利润‘, ‘支出‘, ‘收入‘]
    },
    grid: {
        left: ‘3%‘,
        right: ‘4%‘,
        bottom: ‘3%‘,
        containLabel: true
    },
    xAxis: [
        {
            type: ‘value‘,show:false,
            splitLine:{
            show:false
          },
            axisTick: {
                show: false
            },
        }
    ],
    yAxis: [
        {
            type: ‘category‘,
            axisTick: {
                show: false
            },
            axisLine:{
                show: true,
                onZero:false,
                
            },
            axisTick: {
                show: false
            },
            data: [‘周一‘, ‘周二‘, ‘周三‘, ‘周四‘, ‘周五‘, ‘周六‘, ‘周日‘],
            
            splitLine:{
            show:false
          }

        }
    ],
    color: [‘#0033cc‘],
    series: [
        {
            name: ‘支出‘,
            type: ‘bar‘,
            stack: ‘总量‘,
            label: {
                show: false,
                color:‘white‘,
                // position: ‘insideRight‘,
                // distance: -11
            },
            data: [-200, -302, -341, -500, -200, -450, -800]
        },
        {
            name: ‘收入‘,
            type: ‘bar‘,
            stack: ‘总量‘,
            z:10,//防止数字被覆盖
            label: {
                show: true,
                color:‘white‘,
                position: ‘insideLeft‘,
                distance: -11
            },
            data: [200, 302, 341, 500, 200, 450, 800]
        }
    ]
};

 

效果如下:

技术分享图片

 

echarts 实现正负轴双柱状图

原文:https://www.cnblogs.com/art-poet/p/12870357.html

(0)
(0)
   
举报
评论 一句话评论(0
关于我们 - 联系我们 - 留言反馈 - 联系我们:wmxa8@hotmail.com
© 2014 bubuko.com 版权所有
打开技术之扣,分享程序人生!