SOURCE

console 命令行工具 X clear

                    
>
console
var data = [{
      name: '芳华',
      percent: 0.4,
      a: '1'
    }, {
      name: '妖猫传',
      percent: 0.2,
      a: '1'
    }, {
      name: '机器之血',
      percent: 0.18,
      a: '1'
    }, {
      name: '心理罪',
      percent: 0.15,
      a: '1'
    }];

    var chart = new F2.Chart({
      id: 'mountNode',
      pixelRatio: window.devicePixelRatio
    });
    chart.source(data, {
      percent: {
        formatter: function formatter(val) {
          return val * 100 + '%';
        }
      }
    });
    chart.legend({
      position: 'right',
      marker: 'square'
    });
    chart.tooltip(false);
    chart.coord('polar', {
      transposed: true,
      radius: 0.85,
      innerRadius: 0.618
    });
    chart.axis(false);
    chart.interval().position('a*percent').color('name', ['#F04864', '#FACC14', '#2FC25B', '#8543E0']).adjust('stack').style({
      lineWidth: 1,
      stroke: '#fff',
      lineJoin: 'round',
      lineCap: 'round'
    });

    chart.guide().html({
      position: ['50%', '50%'],
      html: '<div style="text-align: center;width: 100px;height: 72px;vertical-align: middle;">' + '<p id="number" style="font-size: 28px;margin: 10px 10px 5px;font-weight: bold;"></p>' + '<p id="name" style="font-size: 12px;margin: 0;"></p>' + '</div>'
    });
    chart.render();

    chart.interaction('pie-select', {
      animate: {
        duration: 300,
        easing: 'backOut'
      },
      defaultSelected: {
        name: '芳华',
        percent: 0.4,
        a: '1'
      },
      onEnd: function onEnd(ev) {
        var shape = ev.shape,
          data = ev.data,
          shapeInfo = ev.shapeInfo,
          selected = ev.selected;

        if (shape) {
          if (selected) {
            $('#number').css('color', shapeInfo.color);
            $('#number').text(data.percent * 100 + '%');
            $('#name').text(data.name);
          } else {
            $('#number').text('');
            $('#name').text('');
          }
        }
      }
    });

    var data2 = [{
        day: '第1天.',
        value: -30
      }, {
        day: '第2天',
        value: -40
      }, {
        day: '第3天',
        value: 77
      }, {
        day: '第4天',
        value: 21.53
      }, {
        day: '第5天',
        value: 20
      }, {
        day: '第6天',
        value: 73.61
      }, {
        day: '第7天',
        value: 53.75
      }];

var chart2 = new F2.Chart({
  id: 'mountNode2',
  pixelRatio: window.devicePixelRatio
});
chart2.source(data2, {
  day: {
    range: [0, 1]
  },
  value: {
    nice: false,
    min: -40,
    max: 80,
    tickCount: 5
  }
});

chart2.axis('day', {
  line: null,
  label: function label(text, index, total) {
    var textCfg = {};
    if (index === 0) {
      textCfg.textAlign = 'left';
    } else if (index === total - 1) {
      textCfg.textAlign = 'right';
    }
    return textCfg;
  }
});
chart2.axis('value', {
  grid: function grid(text) {
    if (text === '0') {
      return {
        lineDash: null,
        lineWidth: 1
      };
    }
  }
});
chart2.tooltip({
  showCrosshairs: true
});
chart2.area().position('day*value');
chart2.line().position('day*value');
chart2.render();
  <link rel="stylesheet" href="https://gw.alipayobjects.com/os/rmsportal/YmDAMEQVbLJpVbKiRQVX.css">
<script src="https://gw.alipayobjects.com/os/antv/assets/f2/3.3.0/f2-all.min.js"></script>

  <script src="https://gw.alipayobjects.com/os/antv/assets/lib/jquery-3.2.1.min.js"></script>
  <!-- 在 PC 上模拟 touch 事件 -->
  <script src="https://gw.alipayobjects.com/os/rmsportal/NjNldKHIVQRozfbAOJUW.js"></script>

<div class="chart-wrapper">
    <canvas id="mountNode"></canvas>
  </div>
  <h2>分割线</h2>
  <div class="chart-wrapper">
    <canvas id="mountNode2"></canvas>
  </div>