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

2019-09-04 admin

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

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

  1. 窗口随动,echart的窗口resize,是需要我们自己写的,这个肯定封装(注意要做防抖处理);
  2. 每次设置画布的元素的时候都需要传入宽高,这也需要,省事嘛;
  3. 鬼知道会不会有事件,所以事件也是肯定要的;
  4. 没有数据的时候画布不能空着,加一个暂无数据的展示;
  5. 我在代码中添加一个名为options的对象这里可以补充我没有封装的功能,比如需要图例可以自己定义,传进去也是一样的;
  6. 有增加自然就有删除,删除的属性为deleteOption, 和5一样都需要判断是否属性是否存在,存在则执行,不存在则忽略;

先看看完整体,有兴趣您就继续,没兴趣那就再见来不及握手: 图片描述图片描述

看着还是可以的吧!别问我为什么没有图例,公司多数都是缩略图,图例基本用不上,为了一个不用的多封装一个功能没什么意思! 再看下声明的propTypes和 defaultProp 尽可能少的使用isRequired (个人意见,免得后续使用者,漏传就会报错) 图片描述 是不是有点多? 还好吧,毕竟这么灵活!

作用看下注释就ok了!别说你看不懂啊!s,记住这两个 一定有,因为你不知道后面的使用者或不会传错,注释最好也留下,免得被挖坟!

再往下看,在componentDidMount周期中接受props的属性,组装自己的option:

图片描述

注意:init的时候记住一定要接受key,保证页面的id唯一的,如果两个画板的id重复了,会导致其他处理第一个画板以后其他的画板都是白色的,echarts不会覆盖,所以加入你的画板没有东西,那就看下是不是画板元素存在子元素,或者已经画了图形,其次在init之后我们要clear清理画板 并且取消所有绑定函数(.off),不然下次刷新图形的时候,事件会在挂载 最后在挂一下代码吧,毕竟自己刚开始写博客,技术属实是不怎么样,虽然看的不多,万一要是有人看呢哈哈!!

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自己定义添加
*
* */
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, // 图形数据
    keys: 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 最多展示几个扇形,不传或者值为0 则默认不处理,建议不要大于5
    options: PropTypes.object, // 修改 更新的想要的配置,直接那eCharts的就可以
    deleteOption: PropTypes.oneOf(['title', 'toolbox', 'tooltip', 'graphic']), // 删除不需要的配置
    eventType: PropTypes.oneOf([
      'click', 'dblclick', 'mousedown', 'mousemove',
      'mouseup', 'mouseover', 'mouseout', 'globalout', 'contextmenu'
    ]), // 事件类型
  };

  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, keys, 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(`${keys}_drawingBoard`));

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

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

    //  todo:还差一个点击事件
    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} 
{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) { delete option[deleteOption] } // 删除函数 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 {keys} = this.props; return (
) } } export default PieChart;

有兴趣的朋友可以关注下option中的graphic属性,和D3比较类似,有时间分享一下用这属性做的图形!!!

[转载]原文链接:https://segmentfault.com/a/1190000020276939

本站文章除注明转载外,均为本站原创或编译。欢迎任何形式的转载,但请务必注明出处。

转载请注明:文章转载自 JavaScript中文网 [https://www.javascriptcn.com]

本文地址:https://www.javascriptcn.com/read-74258.html

文章标题:基于echarts 灵活封装react饼图组件

相关文章
2015年将会有大量基于HTML5和JS的WEB应用
随着HTML5的定稿,以及JS的迅速发展,我们有理由相信,在接下来的一年里,将会涌现出大量的WEB应用,网站的表现形式将不再仅仅局限于过去的形式,必将在2015年引来一次重大改革! ...
2015-11-12
详解angular2封装material2对话框组件
1. 说明 angular-material2自身文档不详,控件不齐,使用上造成了很大的障碍。这里提供一个方案用于封装我们最常用的alert和confirm组件。 2. 官方使用方法之alert ①编写alert内容组件 @Componen...
2017-03-13
VSCode配置react开发环境的步骤
vscode 默认配置对于 react 的 JSX 语法不友好,体现在使用自动格式化或者粘贴后默认缩进错误,尽管可以通过改变 language mode 缓解错误,但更改 language mode 后的格式化依然不够理想。 通过搭配使用 ...
2017-12-28
在 mpvue 使用 echarts 小程序组件
具体操作 下载 echarts-for-weixin 。 把其 ec-canvas 目录移动到 mpvue 项目的 static 目录下。 对 ec-canvas/ec-canvas.js 进行小调整,考虑提 pr 到 ec-c...
2018-03-11
Vue 短信验证码组件开发详解
Vue.js(读音 /vju?/, 类似于 view)是一个构建数据驱动的 web 界面的库。Vue.js 的目标是通过尽可能简单的 API 实现响应的数据绑定和组合的视图组件。 Vue.js 自身不是一个全能框架——它只聚焦于视图层。因此...
2017-03-17
Element el-upload上传组件详解
upload上传是前端开发很常用的一个功能,在Vue开发中常用的Element组件库也提供了非常好用的upload组件。 基本用法 代码: <el-upload :action="uploadActionUrl"&...
2018-03-18
基于Marquee.js插件实现的跑马灯效果示例
本文实例讲述了基于Marquee.js插件实现的跑马灯效果。分享给大家供大家参考,具体如下: 1、Marquee.js文件 /****************************************************...
2017-02-17
vuejs2.0实现分页组件使用$emit进行事件监听数据传递的方法
如果我有几个页面都需要有分页效果,不可能每个页面都去复制一下这段代码吧,意思是封装一下,变成通用的组件。 首先使用基础 Vue 构造器,创建一个“子类”,Vue.extend( options ) var barHtml = '&...
2017-03-15
使用iview的组件 Table 表格,有固定列,设置其中一个列适应屏幕大小
描述 在使用iview的组件Table表格时,有固定列,表格列宽不等。 在表格平铺时,不能自适应宽度。 问题 每个列有需要设置的宽度,有固定的列,很难调整某一列的宽度为刚刚好的。此时需要某一列自适应宽度。 解决 <template...
2018-09-28
JS基于cookie实现来宾统计记录访客信息的方法
<p>本文实例讲述了JS基于cookie实现来宾统计记录访客信息的方法。分享给大家供大家参考。具体如下:</p><p>这里使用JavaScript记录访客的来宾信息,记录是第几次来访,显示的信息有:您的名...
2017-03-29
回到顶部