plugins: [
    [
      'import',
      {
        libraryName: '@td-design/charts',
        customName: (name) => {
          if (name.indexOf('create') > -1) {
            return `@td-design/charts/es/utils/${name}`;
          }
          return `@td-design/charts/es/components/${name}`;
        },
        style: true,
      },
    ],
  ],

API

从 @td-design/charts 下导出两种 API：

DOM 组件
图表生成方法

在线文档

具体导出的组件和方法详见在线文档。

主题切换方法

如果需要使用图表主题功能以实现主题配置或主题切换。

步骤一：安装环境

安装最新版 umi-plugin-antd-theme，

步骤二：基础配置

在项目 config 文件夹下新建 theme.config.json 文件，然后加入以下配置：

{
  "theme": [
    {
      "theme": "dark",
      "fileName": "dark.css",
      "modifyVars": {
        "@blue-screen-bg": "#090b2c"
      }
    },
    {
      "theme": "light",
      "fileName": "light.css",
      "modifyVars": {
        "@blue-screen-bg": "#fff"
      }
    }
  ],
  // 是否压缩css
  "min": true,
  // css module
  "isModule": true,
  // 忽略 antd 的依赖
  "ignoreAntd": false,
  // 忽略 pro-layout
  "ignoreProLayout": false,
  // 使用缓存
  "cache": true,
  // 引入外库less文件
  "extraLibraries": ["@td-design/charts"]
}

theme 下的 modifyVars 下默认可配置 antd 的自带样式变量如：@primary-color 等。

其中 extraLibraries 项目加入组件库名称后可以引入其他库的样式，并且添加组件库中定义的 less 变量到 modifyVars 下，可实现对该变量的主题色自定义配置，就可以实现组件库主题样式的统一配置。

步骤三：项目中使用经过主题色配置的变量

在 src/styles 文件夹下 default.less 下添加该变量的默认配置。如：

@blue-screen-bg: #fff;

在项目的样式文件xxx.module.less中使用该颜色变量，并从 default.less 文件中引入。antd-pro-merge-less 会自动将该组件库中处理过的样式整合入/theme/xxx.css下，缓存在 node_modules/.plugin-theme 下配合 theme/index.ts 中的主题切换方法就可以实现自定义主题色配置了。

步骤四：在项目中初始化/切换使用主题

初始化主题

global.ts 中配置初始 theme ，这里配置了 dark 为初始主题：

((global as unknown) as CustomWindow).chartConfig = {
  theme: 'dark',
};

interfaces/common.ts 下需要新增 chartConfig 属性：

// interfaces/common.ts
export interface CustomWindow extends Window {
  // 其他配置
  chartConfig: {
    theme: string;
    themeConfig?: {
      // 对应主题色
      [name: string]: {
        [name: string]: string;
      };
    };
  };
}

在 app.ts 的 render 方法中调用 themeInit 方法，新建 theme/index.ts 并放入以下代码:

// theme/index.ts文件
import { CustomWindow } from '@/interfaces/common';

/**
 * @功能描述: 获得url中的传参
 * @参数: name(指定项的key值)
 * @返回值: 若有name，则返回指定项的value，若没有name则返回一个query的json
 */
const getUrlQuery = (name?: string) => {
  let after = window.location.search || window.location.hash;
  after = after ? after.split('?')[1] : '';
  const query = {};
  const strs = after ? after.split('&') : [];
  for (let i = 0; i < strs.length; i += 1) {
    const keyValueMaps = strs[i] ? strs[i].split('=') : [];
    if (keyValueMaps.length === 2) {
      query[keyValueMaps[0]] = decodeURIComponent(keyValueMaps[1]);
    } else if (keyValueMaps[0]) {
      query[keyValueMaps[0]] = null;
    }
  }

  if (name && typeof name !== 'object') {
    return query[name];
  }

  return query;
};

/**
 * @功能描述: 跳转到修改/添加某参数后格式化过的url
 * @参数: @param paramName 参数名,@param paramValue 参数值
 * @返回值: void
 */
const getFormatedUrl = (paramName: string, paramValue: string) => {
  const params = getUrlQuery();
  const { origin, pathname } = window.location;
  let newUrl = `${origin}${pathname}?`;
  // 除了paramName之外的参数数组
  const otherParamsKeys = Object.keys(params).filter(item => item !== paramName);
  otherParamsKeys.forEach((item, idx) => {
    newUrl = newUrl.concat(`${idx !== 0 ? '&' : ''}${item}=${params[item]}`);
  });
  const formatedUrl = `${newUrl}${otherParamsKeys.length > 0 ? '&' : ''}${paramName}=${paramValue}`;
  window.location.href = formatedUrl;
};

/**
 * @功能描述: 初始化自定义主题色/重新设定主题色
 * @参数: 如果需要修改主题可传入主题theme，否则可不传
 * @返回值: 无
 */
export const themeInit = (customTheme?: string) => {
  const { chartConfig } = (global as unknown) as CustomWindow;
  let { theme } = chartConfig;
  let styleLink = document.getElementById('theme-style') as HTMLLinkElement;
  const body = document.getElementsByTagName('body')[0];
  const newTheme = customTheme || getUrlQuery('theme');
  if (newTheme) {
    ((global as unknown) as CustomWindow).chartConfig.theme = newTheme;
    // 如果地址存在theme参数，使用该theme
    theme = newTheme;
    if (customTheme) {
      getFormatedUrl('theme', theme);
    }
  } else {
    // 如果地址不存在theme参数，添加theme
    getFormatedUrl('theme', theme);
  }

  if (styleLink) {
    // 假如存在id为theme-style 的link标签，直接修改其href
    if (theme) {
      styleLink.href = `/theme/${theme}.css`;
      body.className = `body-warp-${theme}`; // 切换自定义组件的主题
    }
  } else {
    // 不存在的话，则新建一个
    styleLink = document.createElement('link');
    styleLink.type = 'text/css';
    styleLink.rel = 'stylesheet';
    styleLink.id = 'theme-style';
    if (theme) {
      styleLink.href = `/theme/${theme}.css`;
      body.className = `body-warp-${theme}`; // 切换自定义组件的主题
    }
    document.body.append(styleLink);
  }
};

切换主题

1.如果需要切换主题的功能，则需要配置chartConfig中的themeConfig属性，在themeConfig下需要配置对应主题的属性。

比如：需要dark和light的主题切换，则可以配置chartConfig如下：

((global as unknown) as CustomWindow).chartConfig = {
  theme: 'dark',
  themeConfig: {
    // 暗黑主题
    dark: {
      // 图例文字颜色
      legendColor: 'rgba(255, 255, 255, 0.6)',
      // 图表文字颜色
      fontColor: 'rgba(255, 255, 255, 0.4)',
      // 环形图
      donutConfig: {
        // 环形边缘颜色(间隔颜色)
        stroke: '#122749',
      },
      // 注水图
      liquidConfig: {
        statistic: {
          // 中间指标字体颜色
          fill: '#fff',
        },
      },
      // 径向堆叠柱形图
      radialStackConfig: {
        // 空区的颜色
        emptyFillColor: 'rgba(255, 255, 255, 0.1)',
      },
    },
    // 白色主题
    light: {
      // 图例文字颜色
      legendColor: '#666',
      // 图表文字颜色
      fontColor: '#666',
      // 环形图
      donutConfig: {
        // 环形边缘颜色(间隔颜色)
        stroke: '#fff',
      },
      // 注水图
      liquidConfig: {
        statistic: {
          // 中间指标字体颜色
          fill: '#333',
        },
      },
      // 径向堆叠柱形图
      radialStackConfig: {
        // 空区的颜色
        emptyFillColor: 'rgba(235, 248, 255, 0.7)',
      },
    },
  },
};

目前主题库有dark和light，上面的属性(如legendColor)是全部目前图表库暴露的可配置属性，都是可选可不选的，如果不传会用默认的主题设置。如果是自定义的其他主题，图表库则会默认使用dark主题颜色作为模板。

2.调用 themeInit 方法(从 theme/index.ts 中引入)并传入主题名称即可。如：

import { themeInit } from '@/theme';

// 切换为 light 主题
themeInit('light');

注：在 global.less 中的样式不会被整合，所以修改不会生效。

Keywords

FAQs

Is @td-design/charts popular?

Is @td-design/charts well maintained?

Package last updated on 24 Jun 2020

Did you know?

Socket for GitHub automatically highlights issues in each pull request and monitors the health of all your open source dependencies. Discover the contents of your packages and block harmful activity before you install or update your dependencies.

Install