拥有自己的图表库 | 🏆 技术专题第三期征文

2,297 阅读2分钟

简介

项目开发中会需要一些图表来展示数据的趋势、变化..,相信大家都有使用到echarts、d3、antv等,能够快速帮忙构建图表,echarts社区有很多案例能更便利获取所需图表配置。

不论前端是react、vue框架,也不论是使用echart,d3等。写完一个图表后,图表代码、配置项存储于项目中,我们再次使用时需要考虑到当前项目、业务需要,调整配置项、数据,拷贝图表代码,带来不便。

而接下来我们就是来解决这个问题--维护一套自己的图表库。

图表库开发

只是提供一种思路来维护属于自己的图表组件库,其中布局、Chart类、工具都可以按各自的想法来添加。

布局

比较常见的布局,左侧菜单,中间图表,右侧配置项。

图表class基本方法、属性

图表需要提供的方法, 直接上代码。


import { deepMerge } from '../../utils';
// 基础折线图
class Chart {
  /**
   * 构造函数
   * @param {Element} container 容器
   * @param {object} options 配置项目
   */
  constructor(container, options) {
    this.container = container;
    this.options = deepMerge({}, Chart.defaultOptions, options);
  }
  // 默认配置项
  static defaultOptions = {};
  // 初始化组件
  initChart() {}
  // 更新配置项
  updateOptions() {}
  // 更新、修改数据
  setData(data) {}
  // 销毁
  destroy() {}
}
export default Chart;

deepMerge 合并配置项方法。

function deepMergeOne(target, source) {
  if (typeof target !== 'object' || typeof source !== 'object') {
    return target;
  }
  Object.keys(source).forEach((key) => {
    const sourceValue = source[key];
    if (typeof sourceValue !== 'object') {
      target[key] = sourceValue;
      return;
    }
    if (typeof target[key] !== 'object') {
      target[key] = Array.isArray(sourceValue) ? [] : {};
    }
    deepMergeOne(target[key], sourceValue);
  });
  return target;
}
export const deepMerge = function(target, ...sources) {
  return sources.reduce(deepMergeOne, target);
};

如何使用Chart

// 初始化组件
const chart = new Chart(element, {});
chart.initChart();
chart.setData(data);

//  更新数据
chart.setData(data);
// 更新配置
chart.updateOptions(options); 
// 销毁
chart.destory();

开发的组件中有些没有 updateOptions() 方法,初期没考虑 0.0

展示不同可视化库开发的图表

d3

echarts

mapbox

工具

网格、标尺、纯净。

写在最后

第一次在公众平台上分享文章,工具代码很久没维护,之前工作需开发数据大屏和可视化拖拉拽工具,所以冒泡出写一个自己维护图表库的项目。写的不好请多多指教。

右上角还有两个canvas写的扫雷、贪吃蛇小游戏,上班摸鱼必备,嘻嘻。

源码 github