g2图表

<script>
  var data = [{
    type: '评估中',
    percent: 0.23
  }, {
    type: '设计中',
    percent: 0.28
  }, {
    type: '正在开发',
    percent: 0.30
  }, {
    type: '已上线',
    percent: 0.19
  }];
  var sum = 500;
  var ds = new DataSet();
  var dv = ds.createView().source(data);
  // transform 数据变换
  dv.transform({
    type: 'map',  // type运算的方法名
    callback: function callback(row) {
      row.value = parseInt(sum * row.percent);
      return row;
    }
  });


　　// 1、 创建 chart
  var chart = new G2.Chart({
    container: 'mountNode',
    forceFit: true,
    height: window.innerHeight,
    padding: 'auto'
  });

  // 2、 载入数据
  chart.source(dv);

  // 提示信息
  chart.tooltip(false);

  // 图例 即右边的表示信息
  chart.legend({
    position: 'right-center',
    offsetX: -100
  });
  
  // 坐标系  （设定 图形位置）
  chart.coord('theta', {
    radius: 0.75,
    innerRadius: 0.6
  });

 // 3、 创建图形语法 （x、y轴方向上 的各种属性设置）
 // chart.geom(“第一个 要创建的图形”).attr(“图形属性映射，即图形要设置的属性在 后面一一打点调用”)   
  chart.intervalStack().position('percent').color('type', ['#0a7aca', '#0a9afe', '#4cb9ff', '#8ed1ff']).opacity(1).label('percent', {
    offset: -18,
    textStyle: {
      fill: 'white',
      fontSize: 12,
      shadowBlur: 2,
      shadowColor: 'rgba(0, 0, 0, .45)'
    },
    rotate: 0,
    autoRotate: false,
 　　// formatter 格式化文本
    formatter: function formatter(text, item) {
      return String(parseInt(item.point.percent * 100)) + '%';
    }
  });

　　// 辅助文本
  chart.guide().html({
    position: ['50%', '50%'],
    html: '<div class="g2-guide-html"><p class="title">项目总计</p><p class="value">500</p></div>'
  });

　　// 图表事件
  chart.on('interval:mouseenter', function(ev) {    
    var data = ev.data._origin;
    $(".g2-guide-html").css('opacity', 1);
    $(".g2-guide-html .title").text(data.type);
    $(".g2-guide-html .value").text(data.value);
  });
 
　　// 图表事件
  chart.on('interval:mouseleave', function() {
    $(".g2-guide-html .title").text('项目总计');
    $(".g2-guide-html .value").text(500);
  });
 
 // 3、 渲染图形
  chart.render();
</script>