echarts 金字塔

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>Title</title>

</head>

<body>

<div id="main" style="width: 600px;height:400px;"></div>

<script src="http://echarts.baidu.com/dist/echarts.min.js"></script>

<script>

  var data = [[15, 0], [-50, 10], [-56.5, 20], [-46.5, 30], [-22.1, 40]];

  var myChart = echarts.init(document.getElementById('main'));

  myChart.setOption({

    tooltip : {

      trigger: 'axis',

      axisPointer : {            // 坐标轴指示器，坐标轴触发有效

        type : 'shadow'        // 默认为直线，可选为：'line' | 'shadow'

      }

    },

    legend: {

      data:['支出', '收入']

    },

    grid: {

      left: '3%',

      right: '4%',

      bottom: '3%',

      containLabel: true

    },

    xAxis : [

      {

        type : 'value',

        axisLabel:{

          formatter:function(value) {

            return Math.abs(value);

          }

        }

      }

    ],

    yAxis : [

      {

        type : 'category',

        axisTick : {show: false},

        data : ['周一','周二','周三','周四','周五','周六','周日']

      }

    ],

    series : [

      {

        name:'收入',

        type:'bar',

        stack: '总量',

        data:[320, 302, 341, 374, 390, 450, 420]

      },

      {

        name:'支出',

        type:'bar',

        stack: '总量',

        data:[-120, -132, -101, -134, -190, -230, -210]

      }

    ]

  });

</script>

</body>

</html>
巴特西

echarts 金字塔

最新文章

热门文章
