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>