fix(BasicChart): 添加主色配置

packages/base-components/BasicChart/src/demos/AreaLine.tsx

@@ -16,5 +16,9 @@ export default () => {
     },
   ];
 
-  return <LineChart lineType="area" category={category} dataSource={dataSource} />;
+  return (
+    <div style={{ height: 300 }}>
+      <LineChart lineType="area" category={category} dataSource={dataSource} />
+    </div>
+  );
 };

packages/base-components/BasicChart/src/demos/BaseBar.tsx

@@ -16,5 +16,9 @@ export default () => {
     },
   ];
 
-  return <BarChart category={category} dataSource={dataSource} />;
+  return (
+    <div style={{ height: 300 }}>
+      <BarChart category={category} dataSource={dataSource} />
+    </div>
+  );
 };

packages/base-components/BasicChart/src/demos/BaseLine.tsx

@@ -16,5 +16,9 @@ export default () => {
     },
   ];
 
-  return <LineChart smooth={false} category={category} dataSource={dataSource} />;
+  return (
+    <div style={{ height: 300 }}>
+      <LineChart smooth={false} category={category} dataSource={dataSource} />
+    </div>
+  );
 };

packages/base-components/BasicChart/src/demos/Basic.tsx

@@ -2,9 +2,9 @@ import React from 'react';
 import { BasicChart } from '../index';
 
 const Demo = () => {
-  const colors = ['#5470C6', '#91CC75', '#EE6666'];
+  // const colors = ['#5470C6', '#91CC75', '#EE6666'];
   const option = {
-    color: colors,
+    // color: colors,
     title: {
       show: true,
       text: '{prefix|}{t|今日供水量}{suffix|（单位：m）}',
@@ -46,9 +46,9 @@ const Demo = () => {
         alignTicks: true,
         axisLine: {
           show: true,
-          lineStyle: {
-            color: colors[0],
-          },
+          // lineStyle: {
+          //   color: colors[0],
+          // },
         },
         axisLabel: {
           formatter: '{value} ml',
@@ -62,9 +62,9 @@ const Demo = () => {
         offset: 80,
         axisLine: {
           show: true,
-          lineStyle: {
-            color: colors[1],
-          },
+          // lineStyle: {
+          //   color: colors[1],
+          // },
         },
         axisLabel: {
           formatter: '{value} ml',
@@ -77,9 +77,9 @@ const Demo = () => {
         alignTicks: true,
         axisLine: {
           show: true,
-          lineStyle: {
-            color: colors[2],
-          },
+          // lineStyle: {
+          //   color: colors[2],
+          // },
         },
         axisLabel: {
           formatter: '{value} °C',
@@ -106,7 +106,11 @@ const Demo = () => {
       },
     ],
   };
-  return <BasicChart option={option} />;
+  return (
+    <div style={{ height: 300 }}>
+      <BasicChart option={option} theme="purple-passion" />
+    </div>
+  );
 };
 
 export default Demo;

packages/base-components/BasicChart/src/index.js

@@ -2,10 +2,11 @@ import * as echarts from 'echarts/core';
 import { default as BasicChart } from './ECharts';
 import BarChart from './BarChart';
 import LineChart from './LineChart';
+import { injectGlobalConfig } from './utils/global';
 
 // const BasicChart = Echarts;
 
 // BasicChart.BarChart = BarChart;
 // BasicChart.LineChart = LineChart;
 
-export { BasicChart, BarChart, LineChart, echarts };
+export { BasicChart, BarChart, LineChart, echarts, injectGlobalConfig };

packages/base-components/BasicChart/src/utils/color.js

 import _ from 'lodash';
 import * as echarts from 'echarts/core';
-import { globalConfig } from 'antd/lib/config-provider';
+import { globalConfig } from './global';
 
 const BASE_COLORS = [
   '#1685ff',
@@ -62,6 +62,30 @@ export const DEF_GRAD_COLORS = DEF_COLORS.map((color) => {
  * @param {Array} colors 配色方案
  * @returns 颜色值，可以是16进制, rgb, LinearGradient
  */
-export const colorOfSeries = (index, colors = DEF_COLORS) => {
+export const colorOfSeries = (index, colors) => {
+  colors = colors || buildDefaultColors();
   return colors[index % colors.length];
 };
+
+export const toGRADColorForLine = (color) => {
+  return new echarts.graphic.LinearGradient(0, 0, 0, 1, [
+    {
+      offset: 0,
+      color: hexToRgba(color, 0.2),
+    },
+    {
+      offset: 1,
+      color: hexToRgba(color, 0.02),
+    },
+  ]);
+};
+
+export const buildDefaultColors = () => {
+  const primaryColor = globalConfig.primaryColor;
+  return primaryColor ? THEME_LIST[primaryColor] || BASE_COLORS : BASE_COLORS;
+};
+
+export const buildDefaultGRADColors = () => {
+  const colors = buildDefaultColors();
+  return colors.map((color) => toGRADColorForLine(color));
+};

packages/base-components/BasicChart/src/utils/default.js

 import _ from 'lodash';
-import { DEF_COLORS, DEF_GRAD_COLORS, colorOfSeries } from './color';
+import { DEF_COLORS, DEF_GRAD_COLORS, colorOfSeries, toGRADColorForLine } from './color';
+import { isArray } from './types';
 import { isAxisChart, isLineType } from './chart';
 import { buildDefaultTooltip } from './tooltip';
+import { buildDefaultLegend } from './legend';
+import { globalConfig } from './global';
 
 // 默认标题配置
-export const deafultTitle = { show: false };
 
 // const titleFormater = text => `{prefix|}{t|${title}}{suffix|内容}`;
 
@@ -20,7 +22,7 @@ export const buildDefaultTitle = (option) => {
           prefix: {
             width: 5,
             height: 16,
-            backgroundColor: '#1685FF',
+            backgroundColor: globalConfig.primaryColor,
           },
           t: {
             fontSize: 15,
@@ -49,29 +51,14 @@ export const defaultGrid = {
 
 export const buildDefaultGrid = (option) => {
   const { title, yAxis, series } = option;
-  const axisArr = Array.isArray(yAxis) ? yAxis : _.isObject(yAxis) ? [yAxis] : [];
-  const seriesArr = Array.isArray(series) ? series : _.isObject(series) ? [series] : [];
+  const axisArr = isArray(yAxis) ? yAxis : _.isObject(yAxis) ? [yAxis] : [];
+  const seriesArr = isArray(series) ? series : _.isObject(series) ? [series] : [];
   const hasName = axisArr.some((d) => !!d.name) || seriesArr.some((d) => !!d.unit);
   const hasTitle = !!title && title.show;
   const top = hasTitle && hasName ? 70 : 50;
   return { right: 40, left: 60, top, bottom: 40 };
 };
 
-export const defaultLegend = {
-  show: true,
-  right: 20,
-  top: 20,
-  icon: 'react',
-  itemWidth: 14,
-  itemHeight: 8,
-  itemGap: 20,
-  padding: [0, 0, 0, 80], // 给标题留够空间
-  textStyle: {
-    padding: [0, 0, 0, 4],
-    color: '#2d2d2d',
-  },
-};
-
 export const defaultDataZoom = [
   {
     type: 'inside',
@@ -188,7 +175,7 @@ export const defaultYAxis = {
 export const buildAxisPointer = (option) => {
   if (!option || !option.xAxis) return null;
   const { xAxis: x } = option;
-  const xAxis = Array.isArray(x) ? x : _.isObject(x) ? [x] : [];
+  const xAxis = isArray(x) ? x : _.isObject(x) ? [x] : [];
 
   const type = xAxis.some((item) => item.type === 'category') ? 'shadow' : 'line';
   const typeConfig =
@@ -213,13 +200,14 @@ export const buildAxisPointer = (option) => {
 // 曲线面积图: 不加标记点、面积渐变色配置
 const seriesItem = (series, index) => {
   const cfg = {};
+
   if (isLineType(series)) {
     // cfg.symbol = 'ciecle';
     cfg.symbolSize = 4;
     cfg.showSymbol = !series.smooth;
     cfg.areaStyle = series.areaStyle && {
       opacity: 1,
-      color: colorOfSeries(index, DEF_GRAD_COLORS),
+      color: toGRADColorForLine(colorOfSeries(index)),
     };
   }
   return _.merge(cfg, series);
@@ -227,14 +215,14 @@ const seriesItem = (series, index) => {
 
 export const buildDefaultSeries = (option) => {
   const { series } = option;
-  const serieArr = Array.isArray(series) ? series : !!series ? [series] : [];
+  const serieArr = isArray(series) ? series : !!series ? [series] : [];
   const defaultSeries = serieArr.map(seriesItem);
-  return Array.isArray(series) ? defaultSeries : !!series ? defaultSeries[0] : null;
+  return isArray(series) ? defaultSeries : !!series ? defaultSeries[0] : null;
 };
 
 export const buildDefaultOption = (option) => {
   const exports = {};
-  exports.color = DEF_COLORS;
+  // exports.color = DEF_COLORS;
   exports.title = buildDefaultTitle(option);
   (option.dataZoom == undefined || option.dataZoom === null) &&
     (exports.dataZoom = defaultDataZoom);
@@ -249,14 +237,16 @@ export const buildSpecificOption = (option) => {
     return _.merge(
       {},
       {
-        xAxis: Array.isArray(xAxis)
+        xAxis: isArray(xAxis)
           ? xAxis.map((item) => ({ ...buildDefaultXAxis(item) }))
           : buildDefaultXAxis(xAxis),
-        yAxis: Array.isArray(yAxis) ? yAxis.map(() => ({ ...defaultYAxis })) : defaultYAxis,
-        grid: Array.isArray(grid)
+        yAxis: isArray(yAxis) ? yAxis.map(() => ({ ...defaultYAxis })) : defaultYAxis,
+        grid: isArray(grid)
           ? grid.map(() => ({ ...buildDefaultGrid(option) }))
           : buildDefaultGrid(option),
-        legend: Array.isArray(legend) ? legend.map(() => ({ ...defaultLegend })) : defaultLegend,
+        legend: isArray(legend)
+          ? legend.map(() => ({ ...buildDefaultLegend(option) }))
+          : buildDefaultLegend(option),
         series: buildDefaultSeries(option),
         tooltip: {
           axisPointer: buildAxisPointer(option),

packages/base-components/BasicChart/src/utils/global.js

+import _ from 'lodash';
+
+/** 图表全局配置 非echarts配置，自定义的一些全局配置 */
+export const globalConfig = {};
+
+/**
+ * 注册全局配置的方法 项目中注册一次即可，在项目入口或者初始化完成之后进行注册 或者有切换全局配置需求时，重新注册覆盖
+ *
+ * @param {any} config 配置对象
+ * @returns
+ */
+export const injectGlobalConfig = (config) => {
+  if (!config) return;
+
+  if (Object.prototype.toString.call(config) !== '[object Object]')
+    throw new TypeError('illegal params, config must be an object!');
+
+  globalConfig = _.merge(globalConfig, config);
+};
+
+/**
+ * 运行时校验全局配置 目的是保证有些必需的配置需要有，或者一些需要有默认值的配置项赋值
+ *
+ * PrimaryColor 主题色，在运行时需要有默认值
+ */
+export const runtimeValidate = () => {
+  // primaryColor 主题色
+  globalConfig.primaryColor ||
+    (globalConfig.primaryColor = window.globalConfig?.variableTheme?.primaryColor ?? '#1685FF');
+};

packages/base-components/BasicChart/src/utils/index.js

 import _ from 'lodash';
+import { runtimeValidate } from './global';
 import { buildDefaultOption, buildSpecificOption } from './default';
 import * as color from './color';
 
 const buildOption = (option) => {
   option = option || {};
+
+  runtimeValidate();
+
   const exports = {};
   const defaultOption = buildDefaultOption(option);
   const specificOption = buildSpecificOption(option);

packages/base-components/BasicChart/src/utils/legend.js

+import { globalConfig } from './global';
+
+export const buildDefaultLegend = (option) => {
+  const { title } = option;
+
+  let paddingRight = 0;
+  if (title && title.show) paddingRight = 80; // 给标题留够空间
+
+  return {
+    show: true,
+    right: 20,
+    top: 20,
+    icon: 'rect',
+    itemWidth: 14,
+    itemHeight: 8,
+    itemGap: 20,
+    padding: [0, 0, 0, paddingRight],
+    textStyle: {
+      padding: [0, 0, 0, 4],
+      color: '#2d2d2d',
+    },
+  };
+};

packages/base-components/BasicChart/src/utils/tooltip.js

 import _ from 'lodash';
 import moment from 'moment';
-
-const isArray = (arr) => Array.isArray(arr);
+import { isArray } from './types';
 
 /**
  * 转换echarts线性渐变方向 成 css渐变角度 css线性渐变方向为从上往下时为0deg。(0: 上 -> 下)。

packages/base-components/BasicChart/src/utils/types.js

+const toString = Object.prototype.toString;
+
+export const isArray = (arr) => toString.call(arr) === '[object Array]';