【金融大屏项目】—— Echarts水滴图（echarts-liquidfill）

api文档：https://github.com/ecomfe/echarts-liquidfill#api

LiquidfillChart组件代码：

import React, { PureComponent } from 'react';
import echarts from 'echarts/lib/echarts';
import 'echarts-liquidfill';
import styles from './index.less';

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

  componentDidMount() {
    const { data } = this.props;
    this.initLiquidfillChart(data);
    // 窗口改变重新加装定时器并重绘echarts
    window.addEventListener('resize', () => {
      this.initLiquidfillChart(data);
    });
  }

  componentDidUpdate() {
    const { data } = this.props;
    // 数据改变重绘echarts
    this.initLiquidfillChart(data);
    // 窗口改变重新加装定时器并重绘echarts
    window.addEventListener('resize', () => {
      this.initLiquidfillChart(data);
    });
  }

  initLiquidfillChart = (data) => {
    if (data.length > 0) {
      const { id, diameter, center, color } = this.props;
      const myChart = echarts.init(document.getElementById(id));
      const option = {
        grid: {
          left: 0,
          right: 0,
          top: 0,
          bottom: 0,
          containLabel: true
        },
        series: [{
          type: 'liquidFill',
          radius: diameter,
          center: center,
          color: color,
          data: data,
          backgroundStyle: {
            borderColor: color[0],
            borderWidth: 2,
            color: 'transparent'
          },
          outline: {
            borderDistance: 5,
            itemStyle: {
              borderColor: color[0],
              borderWidth: 1,
            }
          },
          label: {
            show: true,
            color: '#fff',
            fontSize: 18,
            fontWeight: 400,
            padding: [0, 0, -6, 0],
            align: 'center',
            baseline: 'bottom',
            position: 'inside'
          },
          phase: 0,
          period: 4000,
          waveLength: '100%',
          animationDuration: 0,
          animationDurationUpdate: 2000,
          animationEasingUpdate: 'cubicOut'
        }]
      };
      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 LiquidfillChart;

LiquidfillChart.defaultProps = {
  id: 'liquidfillChart',
  width: '100%',
  height: '100%',
  color: ['#DAD44A'],
  // diameter: '67px', //直径
  diameter: '97.1%', //直径
  center: ['50%', '50%'],
  data: [0.27]
};

less代码：

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

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

页面组件引用：

<LiquidfillChart id='sandboxNczylChart' diameter='100%' color={sandboxNczylColor} data={sandboxNczylData} />

---

---

注：转载请注明出处