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

    效果如下:

  • 相关阅读:
    每日日报2020.12.1
    每日日报2020.11.30
    981. Time Based Key-Value Store
    1146. Snapshot Array
    565. Array Nesting
    79. Word Search
    43. Multiply Strings
    Largest value of the expression
    1014. Best Sightseeing Pair
    562. Longest Line of Consecutive One in Matrix
  • 原文地址:https://www.cnblogs.com/art-poet/p/12870357.html
Copyright © 2011-2022 走看看