g2绘制环形堆叠条形图(玉珏图)

整理了一个环形条形图的完整demo，下面代码是结合react渲染的，当初遇到这个项目需求的时候，都快把3.x版本的文档给翻烂了，勉强实现了基本需求。

难点：

• 环形图的方向调整为逆时针，自动生成的为顺时针；
• 坐标轴上的label有hover的效果；
• 环形图的弯曲的最大程度，如果按照实际值直接展示会不好看，这时需要拿到数据的最大值处理一下
  

import React from 'react';
import G2 from '@antv/g2';

let maxActual = 0;

export default class CircleChart extends React.Component {
     
  constructor(props) {
     
    super(props)
    this.state = {
     }
  }
  componentDidMount() {
     
    const activeData = [
      {
      date: '2017', actual: 137, expected: 900 },
      {
      date: '2018', actual: 175, expected: 900 },
      {
      date: '2019', actual: 240, expected: 900 },
      {
      date: '2020', actual: 726, expected: 900 },
      {
      date: '2021', actual: 868, expected: 900 },
    ];
    activeData.forEach(item => {
     
      if (item.actual > maxActual) {
     
        maxActual = item.actual;
      }
    })
    
    const chart = new G2.Chart({
     
      container: 'circle',
      autoFit: true,
      height: 500,
      padding:'auto'
    });
   
    // chart.scale({
     
    //   expected: {
     
    //     min: 0,
    //     max: 1000,
    //     sync: 'value',
    //   },
    //   actual: {
     
    //     sync: 'value',
    //   },
    // });
    chart.source(activeData, {
           //数据最小值 注意图的类型
      'expected': {
     
        min: 0,
        max: 900 * 1.5
      },
      'actual': {
     
        min: 0,
        max: maxActual * 1.5
      },
    })
    
    chart.axis('date', {
     
      grid: null,
      line: null,
      tickLine: null,
      label: {
     
        style: {
     
          fill:'#ccc'
        }
      }
    });
    chart.axis('actual', false);
    chart.axis('expected', false);
    chart.legend(false);
    chart.tooltip({
     
      shared: true
    });
    const colors = ['#00cce3',
      '#0043ff',
      '#56d6Af',
      '#ea9b00',
      '#f36a48',
    ]
    colors.reverse()
    chart
      .interval()
      .position('date*expected')
      .color('#001A3A')
      .tooltip('expected')
      .style({
     
        opacity: 0.1,
      });
    chart
      .interval()
      .position('date*actual')
      .color('date',colors)
      .tooltip('actual');
     
    // 坐标系变换 chart.coord()
    //transpose(): 将坐标系 x 轴和 y 轴转置
    //rotate(angle): 坐标系旋转，angle 表示旋转的度数，单位为角度
    //scale(sx, sy): 坐标系缩放，sx 代表 x 方向缩放比例，sy 代表 y 方向缩放比例，单位为数值。
    chart.coord('polar', {
     
        innerRadius: 0.3
    }).transpose()
      .rotate(180)
      .scale(1, -1)

	 activeData.map(function (obj) {
     
      chart.guide().text({
     
        position: [obj.date, 0],
        content: obj.date + '',
        offsetX: 10,
        style: {
     
          textAlign: 'left',
          fill: '#fff',
          cursor: 'pointer'
        },
        appendInfo: {
     
          id: obj.date
        }
      });
    });


    chart.on('guide-text:mousemove', ev => {
     
      ev.target._attrs.fillStyle = '#00e3ff'
    });
    chart.on('guide-text:mouseleave', ev => {
     
      ev.shape._attrs.fillStyle = '#fff'
    });
	//辅助文本的点击事件
	chart.on('guide-text:click',ev=>{
     
		//进行点击之后的逻辑操作
		//注意,如果写在$state里面,需要使用的this的话,直接拿不到,需要转换一下
		let _this = this
	})
      
    chart.render();    
  }
  
  render() {
     
    return (
      <div style={
     {
     width:500,height:500,backgroundColor:'#0E152E'}}>
        <div id='circle'></div>
      </div>
    )
  }
}