基于echarts 灵活封装react饼图组件

时间 2019-11-08

原文原文链接

基于echarts 灵活封装react饼图组件

这段时间比较忙，没什么时间封装组件库，同事都不怎么会使用echarts，今天随手封装了一个echart的饼图，百十来行的代码同事用了都说好！
废话很少说封装组件以前，首先要考虑咱们的组件，都要包含哪些功能；react

窗口随动，echart的窗口resize，是须要咱们本身写的，这个确定封装(注意要作防抖处理)；
每次设置画布的元素的时候都须要传入宽高，这也须要，省事嘛；
鬼知道会不会有事件，因此事件也是确定要的；
没有数据的时候画布不能空着，加一个暂无数据的展现；
我在代码中添加一个名为options的对象这里能够补充我没有封装的功能，好比须要图例能够本身定义，传进去也是同样的；
有增长天然就有删除，删除的属性为deleteOption，和5同样都须要判断是否属性是否存在，存在则执行，不存在则忽略；

先看看完总体，有兴趣您就继续，没兴趣那就再见来不及握手：
echarts

看着仍是能够的吧!别问我为何没有图例，公司多数都是缩略图，图例基本用不上，为了一个不用的多封装一个功能没什么意思！
再看下声明的propTypes和 defaultProp 尽量少的使用isRequired （我的意见，省得后续使用者，漏传就会报错）

是否是有点多？还好吧，毕竟这么灵活！函数

做用看下注释就ok了！别说你看不懂啊！s，记住这两个必定有，由于你不知道后面的使用者或不会传错，注释最好也留下，省得被挖坟！优化

再往下看，在componentDidMount周期中接受props的属性，组装本身的option:ui

注意：init的时候记住必定要接受key，保证页面的id惟一的，若是两个画板的id重复了，会致使其余处理第一个画板之后其余的画板都是白色的，echarts不会覆盖，因此加入你的画板没有东西，那就看下是否是画板元素存在子元素，或者已经画了图形，其次在init以后咱们要clear清理画板而且取消全部绑定函数（.off），否则下次刷新图形的时候，事件会在挂载
最后在挂一下代码吧，毕竟本身刚开始写博客，技术属实是不怎么样，虽然看的很少，万一要是有人看呢哈哈！！this

import React, {PureComponent} from 'react';
import echarts from 'echarts/lib/echarts';
import 'echarts/lib/chart/pie';
import 'echarts/lib/component/title';
import 'echarts/lib/component/tooltip';
import 'echarts/lib/component/toolbox';
import 'echarts/lib/component/graphic';
import PropTypes from 'prop-types';

/*
* 饼图组件可支持环形切换，
* 包含无数据展现，onresize重绘事件
* 能够自定义option, 支持多种鼠标事件
* 暂时未封装图例，图例等其余功能可经过 options本身定义添加
* deleteOption: ['title', 'toolbox', 'tooltip', 'graphic'] 包含echarts含有的属性
*
* */

/*
 * chartsData 数据格式
 * const chartsData = [
 *  {value: 335, name: '直接访问'},
 *  {value: 310, name: '邮件营销'},
 *  {value: 234, name: '联盟广告'},
 * ]
 * */

const _eventType = ['click', 'dblclick', 'mousedown', 'mousemove', 'mouseup', 'mouseover', 'mouseout', 'globalout', 'contextmenu'];

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

  static propTypes = {
    chartsData: PropTypes.array.isRequired, // 图形数据
    idPrefix: PropTypes.oneOfType([
      PropTypes.string.isRequired, // 惟一标识区分多个饼图，
      PropTypes.number.isRequired, // 惟一标识区分多个饼图，
    ]),
    getCharts: PropTypes.func, // 把echarts 对象传出去
    onResize: PropTypes.func, // 全局onResize事件，
    eChartsEvent: PropTypes.func, // 图形点击事件, 返回这各图形的数据以及对应的param，echarts 对象

    title: PropTypes.string, // 标题栏，名字
    bgColor: PropTypes.string, // 背景色
    chartColor: PropTypes.array, // 扇形区域颜色
    radius: PropTypes.array, // 半径内圈半径不能够调小否则暂无数据的时候字放不下
    center: PropTypes.array, // 位置调节
    label: PropTypes.bool, // 是否展现label
    maxShow: PropTypes.number, // 需 >= 0 最多展现几个扇形，不传则默认不处理，建议不要大于5
    options: PropTypes.object, // 修改 更新的想要的配置，直接那eCharts的就能够
    deleteOption: PropTypes.array, // 删除不须要的配置
    eventType: PropTypes.oneOf(_eventType), // 事件类型
  };

  static defaultProps = {
    title: '',
    bgColor: "#fff",
    chartColor: ['#1890ff', '#13c2c2', '#52c41a', '#faad14', '#f5222d', '#722ed1', '#eb2f96', '#faad14'],
    radius: ['0', '65%'],
    center: ['50%', '55%'],
    label: false,
    eventType: 'click',
  };

  componentDidMount() {
    const {
      chartsData, idPrefix, getCharts, onResize, title, bgColor,
      chartColor, radius, center, label, maxShow, deleteOption, options,
      eChartsEvent, eventType
    } = this.props;

    let newChartsData = [];
    if (maxShow && maxShow >= 0 && chartsData.length > maxShow) {
      chartsData.sort((a, b) => {
        return b.value - a.value;
      });

      newChartsData = chartsData.slice(0, maxShow);
      let total = 0;
      chartsData.map((item, index) => {
        if (index > 4) {
          total += item.value
        }
      });
      newChartsData = [...newChartsData, {value: total, name: '其余'}];
    }
    else {
      newChartsData = [...chartsData]
    }

    let myCharts = echarts.init(document.getElementById(`${idPrefix}_pie`));

    if (getCharts && typeof func === 'function') {
      getCharts(myCharts);
    }
    myCharts.clear();

    _eventType.map(item => {
      myCharts.off(item);
    });

    let option = {
      color: newChartsData.length ? chartColor : '#bfbfbf',
      title: {
        text: title,
        top: 20,
        x: 'center'
      },
      toolbox: {
        feature: {
          saveAsImage: {
            type: 'png',
            title: '点击下载',
          }
        },
        top: 13,
        right: 13
      },
      tooltip: {
        trigger: 'item',
        formatter: "{a} <br/>{b} : {c} ({d}%)"
      },
      series: [
        {
          name: title,
          type: 'pie',
          radius,
          center,
          avoidLabelOverlap: false,
          label: {
            show: label,
          },
          labelLine: {
            normal: {
              show: label
            }
          },
          itemStyle: {
            borderWidth: 2, //设置border的宽度有多大
            borderColor: bgColor,
          },
          hoverAnimation: false,
          hoverOffset: 0,
          data: newChartsData.length ? newChartsData : [{value: 0, name: '暂无数据'}],
        },
      ],
      graphic: newChartsData.length
        ? null
        : [{
          type: 'text',
          left: 'center',
          top: radius[0] === '0' ? 'auto' : center[1],
          bottom: 10,
          cursor: 'auto',
          style: {
            text: '暂无数据',
            textAlign: 'center',
            fill: '#bfbfbf',
            fontSize: 16,
            stroke: '#bfbfbf',
            lineWidth: 0
          }
        }]
    };

    if (deleteOption) {
      deleteOption.map(item => {
        delete option[item]
      });
    } // 删除函数

    if (options) {
      option = {...option, ...options}
    } // 补充的options

    myCharts.setOption(option);

    if (eChartsEvent && typeof eChartsEvent === 'function') {
      myCharts.on(eventType, 'series', params => {
        eChartsEvent(params, chartsData, myCharts);
      });
    }

    window.onresize = () => {
      let target = this;
      if (target.resizeFlag) {
        clearTimeout(target.resizeFlag);
      }
      target.resizeFlag = setTimeout(function () {
        myCharts.resize();
        if (onResize && typeof onResize === 'function') {
          onResize();
        }
        target.resizeFlag = null;
      }, 100);
    }
  }

  render() {
    const {idPrefix} = this.props;
    return (
      <div
        id={`${idPrefix}_pie`}
        style={{width: '100%', height: '100%'}}/>
    )
  }
}

export default PieChart;

有兴趣的朋友能够关注下option中的graphic属性，和D3比较相似，有时间分享一下用这属性作的图形！！！后期本身又优化了一下，代码部分可能有所变更spa