JavaScript 中怎么用柯里化实现图表配置项快速复用-js教程-PHP中文网

柯里化封装图表配置的核心是将通用配置固化、动态参数延迟传入，通过多级柯里化按业务维度分层抽象，提升复用性与可维护性，适用于结构稳定、变化点明确的高频场景。

javascript 中怎么用柯里化实现图表配置项快速复用

用柯里化封装图表配置项，核心是把「变的部分」提前固化、「不变的部分」延迟传入，让同一套基础配置能灵活适配不同场景，不用重复写大段相似 config。

把通用配置抽成柯里化函数

比如 ECharts 中多数图表都共用 title、tooltip、grid、color 等设置。可以定义一个柯里化工厂函数，固定基础样式，只留 series、data、title.text 等关键变量后续传入：

const createChartConfig = (baseConfig) => (chartType) => (options) => {
  const { titleText = '', seriesData = [], extraColors = [] } = options;
  
  return {
    ...baseConfig,
    title: { ...baseConfig.title, text: titleText },
    tooltip: baseConfig.tooltip,
    grid: baseConfig.grid,
    color: [...baseConfig.color, ...extraColors],
    series: [{
      type: chartType,
      data: seriesData
    }]
  };
};

// 使用示例
const defaultConfig = {
  title: { show: true, textStyle: { fontSize: 16 } },
  tooltip: { trigger: 'axis' },
  grid: { left: '5%', right: '5%', top: '15%', bottom: '10%' },
  color: ['#5470C6', '#91CC75', '#FAC858']
};

const lineConfig = createChartConfig(defaultConfig)('line');
const barConfig = createChartConfig(defaultConfig)('bar');

const salesLine = lineConfig({ 
  titleText: '月度销售额趋势', 
  seriesData: [120, 180, 200, 160, 190] 
});

const regionBar = barConfig({ 
  titleText: '各区域销量对比', 
  seriesData: [{name: '华东', value: 320}, {name: '华南', value: 280}], 
  extraColors: ['#EE6666'] 
});

按业务维度分层柯里化（更实用）

实际项目中，配置差异常按业务线或数据源划分。可多级柯里化，逐层收窄适用范围：

Java Development Manual

Java开发手册规约集合，基于阿里巴巴Java开发手册（嵩山版）。涵盖7大维度：编程规约、异常日志、单元测试、安全规约、MySQL数据库、工程结构、设计规约。当用户需要：(1) 编写或审查Java代码 (2) 检查命名/代码规范 (3) 处理异常和日志 (4) 编写单元测试 (5) 安全编码 (6) 数据库设...

下载

第一层：固化公司级主题（字体、主色、动画开关）
第二层：绑定业务域（如「用户分析」「订单监控」），预设坐标轴格式、单位、默认图例位置
第三层：接收具体数据和标题，生成最终 config

这样既能复用，又避免过度抽象导致难维护。

配合 React / Vue 封装可复用 Hook 或 Composable

在组件中不直接拼 config，而是调用柯里化函数生成配置，让 UI 和配置逻辑解耦：

// useChartConfig.js（React）
import { useMemo } from 'react';
import { createChartConfig } from './chartUtils';

export function useChartConfig(baseTheme) {
  const getConfig = useMemo(
    () => createChartConfig(baseTheme),
    [baseTheme]
  );
  
  return getConfig;
}

// 组件内使用
function SalesChart() {
  const getSalesConfig = useChartConfig(darkTheme);
  const config = getSalesConfig('line')({
    titleText: '本周成交额',
    seriesData: weeklyData
  });

  return <echarts option="{config}"></echarts>;
}