zoukankan      html  css  js  c++  java
  • echarts 实现正负轴双柱状图

    
    
    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]
            }
        ]
    };

    效果如下:

  • 相关阅读:
    2019nc#7
    ABC133F
    2019DX#6
    2019DX#5
    2019dx#4
    解决一般图最大匹配——带花树算法
    2019nc#4
    B-generator 1_2019牛客暑期多校训练营(第五场)
    hdu-6638 Snowy Smile
    hdu-6621 K-th Closest Distance
  • 原文地址:https://www.cnblogs.com/art-poet/p/12870357.html
Copyright © 2011-2022 走看看