可变换主题的chart

WHAT:

基于 quantex-design chart 的二次封装，增加主题自动切换功能。

WHY:

1. 主题变化是 echart 根据不同主题进行相应地配置
2. echart 的主题是通过配置文件的方式进行设置
3. 使用 css varibles/css 样式覆盖 的方式不能满足对 echart 主题的配置要求

WHERE TO USE IT

在需要针对不同主题进行定制 echarts 时使用。

HOW TO USE IT

使用 ThemedChart

ThemedChart 基于 quantex-design Chart组件，是全量引入echarts。

1. 引入方式：import Chart from '@/components/ThemedChart';。使用 ThemedChart 替换 quantex-design chart。
2. 具体实例请看 quantex-scaffold/app/pages/sample/QuantexExamples/ThemedChart

使用 ThemedChartCore

ThemedChartCore 基于 quantext-design ChartCore组件，是按需引入echarts 组件。

1. 引入方式：import Chart from '@/components/ThemedChartCore';。使用 ThemedChartCore 替换 quantex-design chart。
2. 具体实例请看 quantex-scaffold/app/pages/sample/QuantexExamples/ThemedChartCore

ThemedChart 使用示例:

import * as React from 'react';
import { Divider } from 'antd';
- import { Chart } from '@gza/quantex-design';
+ import Chart from '@/components/ThemedChart';


const Legend = () => {
  const option = {
    dataset: {
      source: [
        ['type', '2012', '2013', '2014', '2015', '2016'],
        ['Forest', 320, 332, 301, 334, 390],
        ['Steppe', 220, 182, 191, 234, 290],
        ['Desert', 150, 232, 201, 154, 190],
        ['Wetland', 98, 77, 101, 99, 40],
      ],
    },
    legend: {},
    xAxis: {
      type: 'category',
      axisTick: {
        show: false,
      },
    },
    yAxis: {},
    series: [
      {
        type: 'bar',
        seriesLayoutBy: 'row',
      },
      {
        type: 'bar',
        seriesLayoutBy: 'row',
      },
      {
        type: 'bar',
        seriesLayoutBy: 'row',
      },
      {
        type: 'bar',
        seriesLayoutBy: 'row',
      },
    ],
  };

  const chartData: any[] = [];
  return (
    <div>
      <Divider>Legend 图例组件</Divider>
      <Chart option={option} chartData={chartData} />
    </div>
  );
};

export default Legend;

ThemedChartCore 使用示例:

quantex-scaffold 最低版本 >= 3.4.3

import * as React from 'react';
import { Divider } from 'antd';
- import { Chart } from '@gza/quantex-design';
+ import Chart from '@/components/ThemedChartCore';

+ import { LineChart, BarChart } from 'echarts/charts';
// import components, all suffixed with Component
+ import {
+   GridComponent,
+   ToolboxComponent,
+   TooltipComponent,
+   TitleComponent,
+   LegendComponent,
+   DatasetComponent,
+ } from 'echarts/components';
// Import renderer, note that introducing the CanvasRenderer or SVGRenderer is a required step
+ import { CanvasRenderer } from 'echarts/renderers';
+ import { UniversalTransition, LabelLayout } from 'echarts/features';
// use chart components
+ Chart.use([
+   BarChart,
+   LineChart,
+   TitleComponent,
+   TooltipComponent,
+   ToolboxComponent,
+   GridComponent,
+   LegendComponent,
+   DatasetComponent,
+   CanvasRenderer,
+   UniversalTransition,
+   LabelLayout,
+ ]);

const Legend = () => {
  const option = {
    dataset: {
      source: [
        ['type', '2012', '2013', '2014', '2015', '2016'],
        ['Forest', 320, 332, 301, 334, 390],
        ['Steppe', 220, 182, 191, 234, 290],
        ['Desert', 150, 232, 201, 154, 190],
        ['Wetland', 98, 77, 101, 99, 40],
      ],
    },
    legend: {},
    xAxis: {
      type: 'category',
      axisTick: {
        show: false,
      },
    },
    yAxis: {},
    series: [
      {
        type: 'bar',
        seriesLayoutBy: 'row',
      },
      {
        type: 'bar',
        seriesLayoutBy: 'row',
      },
      {
        type: 'bar',
        seriesLayoutBy: 'row',
      },
      {
        type: 'bar',
        seriesLayoutBy: 'row',
      },
    ],
  };

  const chartData: any[] = [];
  return (
    <div>
      <Divider>Legend 图例组件</Divider>
      <Chart option={option} chartData={chartData} />
    </div>
  );
};

export default Legend;

如何定制主题

1. 【默认】主题配置

const darkChart = require('@gza/quantex-plugin-theme-dark/chart.js');
const whiteChart = require('@gza/quantex-plugin-theme-white/chart.js');
  // 项目config/config.ts
  themeConfig: {
    defaultTheme: 'themeDark',
    mainTheme: 'themeDark',
    themes: [
      {
        name: '深色',
        id: 'themeDark',
        path: '@gza/quantex-plugin-theme-dark',
        // 使用默认主题中的配置文件
        chartConfig: darkChart,
      },
      {
        name: '浅色',
        id: 'themeWhite',
        path: '@gza/quantex-plugin-theme-white',
        // 使用默认主题中的配置文件
        chartConfig: whiteChart,
      },
    ],
  },

主题源文件目录：

1. quantex-scaffold/packages/quantex-plugin-theme-dark/chart.js
2. quantex-scaffold/packages/quantex-plugin-theme-white/chart.js

2. 定制 【项目】 主题

2.1 配置主题方式

1. echarts 官方可视化主题配置工具：theme-builder
2. 参考已安装的主题 @gza/quantex-plugin-theme-dark/chart.js，在此基础上进行细微调整。
3. 参考 quantex-scaffold/packages/quantex-plugin-theme-dark/chart.js 文件，根据需要进行修改。

2.2 配置主题

1. 需要拷贝默认主题，并在默认主题基础上修改
   ```js
   // 例如：拷贝默认主题到config目录中，并重命名为darkChart.js/whiteChart.js
   // ./config 目录结构如下
   // └── config.ts
   // └── darkChart.js
   // └── whiteChart.js
   // 在darkChart.js/whiteChart.js 中可修改相应配置文件
   ```
2. config.ts 中引入 并配置

   ```js
     const darkChart = require('./darkChart.js');
     const whiteChart = require('./whiteChart.js');
     // ....
     // 项目config/config.ts
     themeConfig: {
       defaultTheme: 'themeDark',
       mainTheme: 'themeDark',
       themes: [
         {
           name: '深色',
           id: 'themeDark',
           path: '@gza/quantex-plugin-theme-dark',
           // 使用默认主题中的配置文件
           chartConfig: darkChart,
         },
         {
           name: '浅色',
           id: 'themeWhite',
           path: '@gza/quantex-plugin-theme-white',
           // 使用默认主题中的配置文件
           chartConfig: whiteChart,
         },
       ],
     },
   ```

3. 定制【单个组件】 chart 主题

1. 需要拷贝默认主题，并在默认主题基础上修改

   // 例如：拷贝默认主题到单独组件目录(例如：pages/ExamChart)中，并重命名为darkChart.js/whiteChart.js
   // ./ExamChart 目录结构如下
   // └── index.scss
   // └── index.ts
   // └── darkChart.js
   // └── whiteChart.js
   // 在darkChart.js/whiteChart.js 中可修改相应配置文件

2. ExamChart/index.ts 中引入 并配置

   const darkChart = require('./darkChart.js');
   const whiteChart = require('./whiteChart.js');
   // ....
   // 保持和项目中config/config.ts/themeConfig/themes 一致，其中path可以不填，id, chartConfig 必填
   const themes = [
     {
       // 可选
       name: '深色',
       // 必选
       id: 'themeDark',
       // 必选
       chartConfig: darkChart,
     },
     {
       // 可选
       name: '浅色',
       // 必选
       id: 'themeWhite',
       // 必选
       chartConfig: whiteChart,
     },
   ];