简介
项目开发中会需要一些图表来展示数据的趋势、变化..,相信大家都有使用到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