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>

　　

posted @ 2018-01-08 10:41  年少的你如此美丽  阅读(4128)  评论(1)  编辑  收藏  举报