乐趣区

基于echarts-灵活封装react柱形图组件

jiezi

现在各种框架各种库都很强大，但是也因为功能强大，导致很多配置都过于繁重，真正有用的就那么几个，今天就基于 echarts 封装一个通用 柱形图!

想要了解其他的组件可以看下我之前封装的其他组件有好的思路或者其他的也会分享出来的；
基于 antd 封装横向拖动时间轴

通用柱形图主要包含几个部分

  1. title 展示，xAxis 上 label 的展示；
  2. maxShow，柱形图展示最多不应大于 12 个不然会影响美观（或者说观察数据）；
  3. UI 方面我们需要支持修改柱形图的颜色以及柱形的宽度，无数据提示；
  4. 交互方面我们需要支持最基础的点击事件、双击事件，返回暂时固定当前点击的数据部分、所有数据集合以及 echarts 对象，除去点击事件我们还需要支持 resize，以便视口变化的时候，饼图随之重绘；
  5. 支持最普遍使用的 toolbox，tooltip 等配置；
  6. 需要支持删除、新增配置（有时候我们封装的不够完美就需要使用者执行配置一下部分）；

实现功能

基于以上几点我们开始写代码：

在 componentDidMount 周期中接受父组件传来的属性，构建最基本的 option, 在构建 option 之前我们先做下关于maxShow 的处理；

先声明一个空数据接受处理后的数据

let newChartsData = [];

然后处理 maxShow

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]
    }

*这里注意下，我们默认是不处理 maxShow，也就是说加入父级没传那么默认是全部展示的，在没有用zoom 配置的的前提下，建议 maxShow=12 是最佳的；具体时间默认 12 还是默认不处理要根据使用者处理的数据来定，我处理的数据多数情况下不会多于 12，所以默认不处理；

初始化画板，构建 option 等操作

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
          }
        }]
    };

这当中以及添加了关于无数据的展示代码，具体实现的方式请看我之前封装的基于 echarts 灵活封装 react 饼图组件这里就不在重复了；

添加删除补充配置功能、实例化 option

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

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

    myCharts.setOption(option);

添加点击事件返回值、添加 resize 防抖函数

 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);
    }

完整代码

import React, {PureComponent} from 'react';
import echarts from 'echarts/lib/echarts';
import 'echarts/lib/chart/bar';
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, 支持多种鼠标事件
* 暂时未封装 zoom，zoom 等其他功能可通过 options 自己定义添加
* deleteOption: ['title', 'toolbox', 'tooltip', 'graphic'] 包含 echarts 含有的属性
*
* */

/*
 * chartsData 格式
 * const barChartsData = {*  xAxis: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun'],
 *  data:[10, 52, 200, 334, 390, 330, 220]
 * };
 * 备用颜色：* '#13c2c2', '#52c41a', '#faad14', '#f5222d', '#722ed1', '#eb2f96', '#faad14']
 * */
const _eventType = ['click', 'dblclick', 'mousedown', 'mousemove', 'mouseup', 'mouseover', 'mouseout', 'globalout', 'contextmenu'];

class BarChart extends PureComponent {

  static propTypes = {
    chartsData: PropTypes.object.isRequired, // 图形数据
    idPrefix: PropTypes.oneOfType([
      PropTypes.string.isRequired, // 唯一标识区分多个柱形图，，PropTypes.number.isRequired, // 唯一标识区分多个柱形图，，]),
    getCharts: PropTypes.func, // 把 echarts 对象传出去
    onResize: PropTypes.func, // 全局 onResize 事件，eChartsEvent: PropTypes.func, // 图形点击事件, 返回这各图形的数据以及对应的 param，echarts 对象
    barWidth: PropTypes.string, // 柱子的宽度
    bottom: PropTypes.string || PropTypes.number, // 底部距离
    title: PropTypes.string, // 标题栏，名字
    chartColor: PropTypes.string, // 柱形区域颜色
    label: PropTypes.bool, // 是否展示 x 轴 label
    tooltip: PropTypes.bool, // 是否展示 tooltip
    options: PropTypes.object, // 修改 更新的想要的配置，直接那 eCharts 的就可以
    deleteOption: PropTypes.array, // 删除不需要的配置
    eventType: PropTypes.oneOf(_eventType), // 事件类型
  };

  static defaultProps = {
    title: '',
    barWidth: '25',
    chartColor: '#1890ff',
    label: false,
    eventType: 'click',
    bottom: '8%',
    tooltip: true
  };

  componentDidMount() {
    const {
      chartsData, idPrefix, getCharts, onResize, title, chartColor,
      label, deleteOption, options, eChartsEvent, eventType, barWidth,
      bottom
    } = this.props;
    let myCharts = echarts.init(document.getElementById(`${idPrefix}_bar`));

    if (getCharts && typeof func === 'function') {getCharts(myCharts);
    }
    _eventType.map(item => {myCharts.off(item);
    });

    let series = JSON.parse(JSON.stringify(chartsData.data));

    myCharts.clear();

    if (!chartsData.data.length) {chartsData.data = [7, 8, 6, 9]
    }

    let option = {color: series.length ? chartColor : ['#bfbfbf'],
      title: {
        text: title,
        top: 20,
        x: 'center'
      },
      toolbox: {
        feature: {
          saveAsImage: {
            type: 'png',
            title: '点击下载',
          }
        },
        top: 13,
        right: 13
      },
      tooltip: {
        trigger: 'axis',
        axisPointer: {   // 坐标轴指示器，坐标轴触发有效
          type: 'shadow' // 默认为直线，可选为：'line' | 'shadow'
        }
      },
      grid: {
        left: '3%',
        right: '4%',
        bottom: series.length ? bottom : 40,
        containLabel: true
      },
      xAxis: [
        {
          type: 'category',
          data: series.length ? chartsData.xAxis : [],
          axisTick: {alignWithLabel: true},
          axisLine: {
            lineStyle: {color: series.length ? '#333' : '#ccc',}
          },
          axisLabel: {show: series.length && label,}
        }
      ],
      yAxis: [
        {
          type: 'value',
          show: series.length,
          splitLine: {show: false,},
        }
      ],
      series: [
        {
          name: title,
          type: 'bar',
          barWidth,
          data: chartsData.data
        }
      ],
      graphic: series.length
        ? null
        : [{
          type: 'text',
          left: 'center',
          bottom: 15,
          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

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

    myCharts.setOption(option);
    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}_bar`}
        style={{width: '100%', height: '100%'}}/>
    )
  }
}

export default BarChart;

再上两张图

正常展示的

无数据的展示

配色网站

柱形图默认颜色我选用的是 ant 图库的默认配色，很多小伙伴不知道怎么配色，那下边及分享几个配色的网站（基本都是我们公司 UE 嘴里抠出来的）；

  1. antd 官方色彩 - 有这一个基本就够了
  2. Colordot – A color picker for humans
  3. Colourco.de – find your colour palette
  4. Color Scheme Designer 3_高级在线配色器_配色网
  5. Color Hunt – Trendy Color Palettes

如果觉得写的还可以，一定要点个赞再走，一定哦～

退出移动版