echarts 金字塔

最新推荐文章于 2024-05-23 09:34:24 发布

weixin_30279315

最新推荐文章于 2024-05-23 09:34:24 发布

阅读量2.6k

点赞数

文章标签： javascript ViewUI

原文链接：http://www.cnblogs.com/jkr666666/p/8241496.html

版权

<!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>

转载于:https://www.cnblogs.com/jkr666666/p/8241496.html

weixin_30279315

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
echarts 金字塔

<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>Title</title></head><body><div id="main" style="width: 600p...
复制链接

扫一扫