某企业经营现金流（5年报趋势）

基础柱状图

某企业经营现金流（5年报趋势）

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width,height=device-height">
    <title>某企业经营现金流（5年报趋势）</title>
    <style>::-webkit-scrollbar{display:none;}html,body{overflow:hidden;height:100%;margin:0;}</style>
</head>
<body>
<div id="mountNode"></div>
<script>/*Fixing iframe window.innerHeight 0 issue in Safari*/document.body.clientHeight;</script>
<script src="https://gw.alipayobjects.com/os/antv/pkg/_antv.g2-3.5.1/dist/g2.min.js"></script>
<script src="https://gw.alipayobjects.com/os/antv/pkg/_antv.data-set-0.10.1/dist/data-set.min.js"></script>
<script src="https://gw.alipayobjects.com/os/antv/assets/lib/jquery-3.2.1.min.js"></script>
<style>
    .g2-label {
        font-size: 12px;
        text-align: center;
        line-height: 0.5;
        color: #595959;
    }

.g2-label-spec {
        font-size: 12px;
        text-align: center;
        line-height: 0.5;
        color: #595959;
        width: 400px !important;
    }

.g2-label-spec-value {
        color: #ff5250;
        font-weight: bold;
    }
</style>
<script>
  var data = [{
    year: '2013',
    value: -3.1
  }, {
    year: '2014',
    value: 0.8
  }, {
    year: '2015',
    value: 2.3
  }, {
    year: '2016',
    value: 3.5
  }, {
    year: '2017',
    value: 5.4
  }];

chart.axis('value', {
    label: null,
    title: {
      offset: 30
    }
  });
  chart.legend(false);
  chart.interval().position('year*value').opacity(1).color('year', function(val) {
    if (val === '2013') {
      return '#36c361';
    }
    return '#ff5957';
  }).label('year*value', function(year, value) {
    var offset = 15;
    if (value < 0) {
      offset *= -1;
    }
    return {
      useHtml: true,
      htmlTemplate: function htmlTemplate(text, item) {
        var d = item.point;
        if (d.year === '2014') {
          return '<div class="g2-label-spec">新产品上市破局，现金流<span class="g2-label-spec-value"> ' + d.value + ' </span>亿</div>';
        }
        return '<span class="g2-label">' + d.value + '</span>';
      },
      offset: offset
    };
  });

chart.render();
</script>
</body>
</html>

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width,height=device-height">
    <title>某企业经营现金流（5年报趋势）</title>
    <style>::-webkit-scrollbar{display:none;}html,body{overflow:hidden;height:100%;margin:0;}</style>
</head>
<body style="background: #1f1f1f;">
<div id="mountNode"></div>
<script>/*Fixing iframe window.innerHeight 0 issue in Safari*/document.body.clientHeight;</script>
<script src="https://gw.alipayobjects.com/os/antv/pkg/_antv.g2-3.5.1/dist/g2.min.js"></script>
<script src="https://gw.alipayobjects.com/os/antv/pkg/_antv.data-set-0.10.1/dist/data-set.min.js"></script>
<script src="https://gw.alipayobjects.com/os/antv/assets/lib/jquery-3.2.1.min.js"></script>
<script>G2.Global.setTheme('dark');</script>
<style>
    .g2-label {
        font-size: 12px;
        text-align: center;
        line-height: 0.5;
        color: #595959;
    }

.g2-label-spec {
        font-size: 12px;
        text-align: center;
        line-height: 0.5;
        color: #595959;
        width: 400px !important;
    }

chart.render();
</script>
</body>
</html>

图表用法

数据来源：demo数据

折线图

条形图

柱状图

饼图

点图

面积图

箱形图

烛形图

热力图

仪表盘

漏斗图

地图

雷达图

分面

关系图

其他图表

组件使用

图表用法

相关链接