【金融大屏項目】—— Echarts 極坐標和柱狀圖實現圓角環形圖（polar）

ProgressCircleChart組件代碼：

import React, { PureComponent } from 'react';
import echarts from 'echarts/lib/echarts';
import 'echarts/lib/chart/pie';
import 'echarts/lib/chart/bar';
import 'echarts/lib/component/tooltip';
import 'echarts/lib/component/title';
import 'echarts/lib/component/polar';
import styles from './index.less';

class ProgressCircleChart extends PureComponent {
  constructor(props) {
    super(props);
    this.state = {};
  }

  componentDidMount() {
    const { data } = this.props;
    this.initProgressCircleChart(data);
    // 窗口改變重新加裝定時器並重繪echarts
    window.addEventListener('resize', () => {
      this.initProgressCircleChart(data);
    });
  }

  componentDidUpdate() {
    const { data } = this.props;
    // 數據改變重繪echarts
    this.initProgressCircleChart(data);
    // 窗口改變重新加裝定時器並重繪echarts
    window.addEventListener('resize', () => {
      this.initProgressCircleChart(data);
    });
  }

  initProgressCircleChart = (data) => {
    if (data.length > 0) {
      const { id, radius, center, color } = this.props;
      const myChart = echarts.init(document.getElementById(id));
      const option = {
        color: color,
        // tooltip: {
        //   trigger: 'item'
        // },
        grid: {
          left: 0,
          right: 0,
          top: 0,
          bottom: 0,
          containLabel: true
        },
        angleAxis: {
          max: data[1], // 總數
          clockwise: false, // 逆時針
          // 隱藏刻度線
          axisLine: {
            show: false
          },
          axisTick: {
            show: false
          },
          axisLabel: {
            show: false
          },
          splitLine: {
            show: false
          }
        },
        radiusAxis: {
          type: 'category',
          // 隱藏刻度線
          axisLine: {
            show: false
          },
          axisTick: {
            show: false
          },
          axisLabel: {
            show: false
          },
          splitLine: {
            show: false
          }
        },
        polar: {
          center: center,
          radius: radius //圖形大小
        },
        series: [
          // {
          //   name: '',
          //   type: 'pie',
          //   radius: radius,
          //   center: center,
          //   avoidLabelOverlap: true,
          //   hoverAnimation:false, //懸停不放大突出
          //   labelLine: {
          //     normal: {
          //       show: false
          //     }
          //   },
          //   // minAngle: 15,//最小角度
          //   startAngle:230, //起始角度
          //   data: data
          // }
          {
            type: 'bar',
            data: [{
              name: '',
              value: data[0],
              itemStyle: {
                normal: {
                  color: color[0]
                },
              }
            }],
            coordinateSystem: 'polar',
            roundCap: true,
            barWidth: 8,
            barGap: '-100%', // 兩環重疊
            z: 2,
          },{ // 灰色環
            type: 'bar',
            data: [{
              value: data[1],
              itemStyle: {
                color: color[1]
              }
            }],
            coordinateSystem: 'polar',
            roundCap: true,
            barWidth: 8,
            barGap: '-100%', // 兩環重疊
            z: 1
          }
        ]
      };
      if(id==='zncChart' || id === 'zcpuChart' || id === 'zcpChart' || id === 'zyxhChart'){
        option.title = {
          show:true,
          text: data[0],
          textAlign:'center',
          x:'45%',
          // y: 22,
          y: '23.91%',
          itemGap: 4,//主副標題縱向間隔，單位px，默認為10
          textStyle: {
            fontSize: 22,
            fontWeight: 400,
            color: '#0AC3E5'
          },
          subtextStyle:{
            fontSize: 16,
            fontWeight: 400,
            color: '#ffffff'
          }
        }
      }
      if(id==='zncChart' || id === 'zcpChart' || id === 'zyxhChart'){
        option.title.subtext = 'TB';
      }
      if(id === 'zcpuChart'){
        option.title.subtext = '核';
      }
      myChart.setOption(option);
    }
  };

  render() {
    const { data, id, width, height } = this.props;
    return (
      <div className={styles.contain}>
        <div className={styles.chart} id={id} style={{ width, height }} />
      </div>
    );
  }
}

export default ProgressCircleChart;

ProgressCircleChart.defaultProps = {
  id: 'progressCircleChart',
  width: '100%',
  height: '100%',
  // radius: [19.5, 33.5],
  radius: ['56.62%', '97.1%'],
  center: ['50%', '50%'],
  color: ['#BF00FE', 'rgba(64,0,208, 0.6)'],
  data: [ 80, 100]
};

less代碼：

.contain {
  display: flex;
  align-items: center;
  width: 100%;
  height: 100%;

  .chart {
    width: 100%;
    height: 100%;
  }
}

引用組件代碼：

<ProgressCircleChart id='zncChart' color={zncColor} radius={middleProgressRadius} data={zncData}/>

官方 Pull requests https://github.com/apache/incubator-echarts/pull/11393

 

---

注：轉載請注明出處