perf: 优化基础图表标题内容及y轴样式

packages/base-components/BasicChart/src/BasicChart.md

@@ -41,7 +41,7 @@ axisPointer 规范
 
 ### 基本柱状图
 
-`BasicChart.BarChart`拥有默认配置的柱状图，适用于仅包含柱状图的使用场景。
+`BarChart`拥有默认配置的柱状图，适用于仅包含柱状图的使用场景。
 
 #### 类目类型柱状图
 
@@ -57,7 +57,7 @@ axisPointer 规范
 
 ### 基本折线图
 
-`BasicChart.LineChart`拥有默认配置的折线图，适用于仅包含折线图的使用场景。
+`LineChart`拥有默认配置的折线图，适用于仅包含折线图的使用场景。
 
 #### 类目类型折线图
 
@@ -90,7 +90,7 @@ axisPointer 规范
 
 `option` 参考 echarts 库 https://echarts.apache.org/zh/index.html
 
-#### BasicChart.BarChart（基本柱状图）
+#### BarChart（基本柱状图）
 
 | 参数 | 说明 | 类型 | 默认值 | 可选值 |
 | --- | --- | --- | --- | --- | --- |
@@ -100,7 +100,7 @@ axisPointer 规范
 
 dataSource | 参数 | 说明 | 类型 | 默认值 | 可选值 | | --- | --- | --- | --- | --- | | name | 数据系列名称，有 name 时才会显示图例 | string | - | - | | unit | 数据单位，显示在`tooltip`和`yAxis`上 | string | - | - | | data | 图表数据，`category`类型和 `time`类型有所区别，<font color="#008dff">详见案例</font> | Array[] | - | - |
 
-#### BasicChart.LineChart（基本折线图）
+#### LineChart（基本折线图）
 
 | 参数 | 说明 | 类型 | 默认值 | 可选值 |
 | --- | --- | --- | --- | --- | --- |

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

@@ -3,11 +3,11 @@ import ECharts from './ECharts';
 import propTypes from 'prop-types';
 import _ from 'lodash';
 
-// 基础柱状图
 const isCategory = (category) => category !== undefined;
 const isArea = (lineType) => lineType === 'area';
-const LineChart = forwardRef(({ category, lineType, smooth, dataSource }, ref) => {
+const LineChart = forwardRef(({ category, lineType, smooth, dataSource, title }, ref) => {
   const option = useMemo(() => {
+    const titleCfg = typeof title === 'string' ? { show: true, text } : { show: false };
     const xAxis = isCategory(category)
       ? {
           type: 'category',
@@ -32,8 +32,8 @@ const LineChart = forwardRef(({ category, lineType, smooth, dataSource }, ref) =
         ...config,
       };
     });
-    return { xAxis, yAxis, series };
-  }, [category, smooth, lineType, dataSource]);
+    return { xAxis, yAxis, series, title: titleCfg };
+  }, [category, smooth, lineType, dataSource, title]);
 
   return <ECharts ref={ref} option={option} />;
 });
@@ -47,6 +47,7 @@ LineChart.PropTypes = {
     data: propTypes.array,
     unit: propTypes.unit,
   }),
+  title: propTypes.string || propTypes.object,
 };
 LineChart.defaultProps = {
   smooth: true,

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

 import React from 'react';
-import { BasicChart } from '../index';
-const { LineChart } = BasicChart;
+import { LineChart } from '../index';
 
 export default () => {
   const category = ['11-01', '11-02', '11-03', '11-04', '11-05', '11-06', '11-07'];

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

 import React from 'react';
-import { BasicChart } from '../index';
-const { BarChart } = BasicChart;
+import { BarChart } from '../index';
 
 export default () => {
   const category = ['周一', '周二', '周三', '周四', '周五', '周六', '周日'];

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

 import React from 'react';
-import { BasicChart } from '../index';
-const { LineChart } = BasicChart;
+import { LineChart } from '../index';
 
 export default () => {
   const category = ['11-01', '11-02', '11-03', '11-04', '11-05', '11-06', '11-07'];

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

 import React from 'react';
-import ECharts from '../ECharts';
+import { BasicChart } from '../index';
 
 const Demo = () => {
   const option = {
@@ -40,7 +40,7 @@ const Demo = () => {
       },
     ],
   };
-  return <ECharts option={option} />;
+  return <BasicChart option={option} />;
 };
 
 export default Demo;

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

@@ -5,6 +5,10 @@ const Demo = () => {
   const colors = ['#5470C6', '#91CC75', '#EE6666'];
   const option = {
     color: colors,
+    title: {
+      show: true,
+      text: '{prefix|}{t|今日供水量}{suffix|（单位：m）}',
+    },
     tooltip: {
       trigger: 'axis',
       axisPointer: {
@@ -37,7 +41,7 @@ const Demo = () => {
     yAxis: [
       {
         type: 'value',
-        name: 'Evaporation',
+        // name: 'Evaporation',
         position: 'right',
         alignTicks: true,
         axisLine: {
@@ -52,7 +56,7 @@ const Demo = () => {
       },
       {
         type: 'value',
-        name: 'Precipitation',
+        // name: 'Precipitation',
         position: 'right',
         alignTicks: true,
         offset: 80,
@@ -68,7 +72,7 @@ const Demo = () => {
       },
       {
         type: 'value',
-        name: '温度',
+        // name: '温度',
         position: 'left',
         alignTicks: true,
         axisLine: {

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

 import React from 'react';
-import { BasicChart } from '../index';
-const { BarChart } = BasicChart;
+import { BarChart } from '../index';
 
 export default () => {
   const category = ['周一', '周二', '周三', '周四', '周五', '周六', '周日'];

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

 import React from 'react';
-import { BasicChart } from '../index';
-const { BarChart } = BasicChart;
+import { BarChart } from '../index';
 
 // 数据格式: [[时间戳, value]]
 const getData = () => {

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

 import React from 'react';
-import { BasicChart } from '../index';
-const { LineChart } = BasicChart;
+import { LineChart } from '../index';
 
 // 数据格式: [[时间戳, value]]
 const getData = () => {

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

-import React, { useContext, useEffect, useRef, useState } from 'react';
-import classNames from 'classnames';
-import PropTypes from 'prop-types';
-import Highcharts from 'highcharts/highstock';
-import HighchartsReact from 'highcharts-react-official';
-import { ConfigProvider } from 'antd';
-import './index.less';
-
-let chartWidth = 0; // chart width
-let chartHeight = 0; // chart height
-
-const BasicChart = (props) => {
-  const { getPrefixCls } = useContext(ConfigProvider.ConfigContext);
-  const prefixCls = getPrefixCls('basic-chart');
-
-  const { chartOptions, constructorType } = props;
-
-  const [options, setOptions] = useState(defaultOptions);
-
-  const container = useRef(null);
-
-  // 处理图表options
-  const handleChartOptions = () => {
-    const options = {
-      ...defaultOptions,
-      ...chartOptions,
-    };
-
-    if (container.current) {
-      if (container.current.offsetWidth !== 0) {
-        chartWidth = container.current.offsetWidth;
-        chartHeight = container.current.offsetHeight;
-      }
-      Highcharts.setOptions({
-        // 处理 chart 高度坍塌
-        chart: {
-          width: container.current.offsetWidth === 0 ? chartWidth : container.current.offsetWidth,
-          height:
-            container.current.offsetHeight === 0 ? chartHeight : container.current.offsetHeight,
-        },
-      });
-    }
-
-    Highcharts.setOptions({
-      global: { timezoneOffset: -8 * 60 },
-    });
-
-    return options;
-  };
-
-  useEffect(() => {
-    setOptions({ ...handleChartOptions() });
-  }, [chartOptions]);
-
-  return (
-    <div className={classNames(prefixCls)} ref={container}>
-      <HighchartsReact
-        immutable={true}
-        highcharts={Highcharts}
-        constructorType={constructorType}
-        options={options}
-        {...props}
-      />
-    </div>
-  );
-};
-
-BasicChart.defaultProps = {
-  constructorType: 'chart',
-  chartOptions: {},
-};
-
-BasicChart.propTypes = {
-  columns: PropTypes.string,
-  chartOptions: PropTypes.object,
-};
-
-export default BasicChart;
-
-const defaultOptions = {
-  chart: {
-    zoomType: 'x',
-    backgroundColor: 'rgba(255, 255, 255, 0.5)',
-  },
-  title: null,
-  credits: false,
-  rangeSelector: {
-    enabled: false,
-  },
-  xAxis: [
-    {
-      lineWidth: 0,
-      crosshair: true,
-      type: 'datetime',
-      dateTimeLabelFormats: {
-        second: '%H:%M:%S',
-        minute: '%H:%M',
-        hour: '%H:%M',
-        day: '%d',
-        week: '%d',
-        month: '%d',
-        year: '%Y',
-      },
-    },
-  ],
-  yAxis: [
-    {
-      title: null,
-      opposite: false, // 即坐标轴会显示在对立面
-      lineWidth: 1,
-    },
-  ],
-  tooltip: {
-    shared: true,
-    split: false,
-    valueDecimals: 3,
-    dateTimeLabelFormats: {
-      second: '%H:%M:%S',
-      minute: '%H:%M',
-      hour: '%H:%M',
-      day: '%d',
-      week: '%d',
-      month: '%d',
-      year: '%Y',
-    },
-  },
-  plotOptions: {
-    series: {
-      showInNavigator: true,
-      connectNulls: false,
-      zoneAxis: 'x',
-    },
-  },
-  legend: {
-    verticalAlign: 'top',
-  },
-  series: [],
-};

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

 import * as echarts from 'echarts/core';
-import Echarts from './ECharts';
+import { default as BasicChart } from './ECharts';
 import BarChart from './BarChart';
 import LineChart from './LineChart';
 
-const BasicChart = Echarts;
+// const BasicChart = Echarts;
 
-BasicChart.BarChart = BarChart;
-BasicChart.LineChart = LineChart;
+// BasicChart.BarChart = BarChart;
+// BasicChart.LineChart = LineChart;
 
-export { BasicChart, echarts };
+export { BasicChart, BarChart, LineChart, echarts };

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

@@ -6,11 +6,56 @@ import { buildDefaultTooltip } from './tooltip';
 // 默认标题配置
 export const deafultTitle = { show: false };
 
+// const titleFormater = text => `{prefix|}{t|${title}}{suffix|内容}`;
+
+export const buildDefaultTitle = (option) => {
+  const { title } = option;
+  const { show, text } = title ?? {};
+  if (show && text) {
+    return {
+      textStyle: {
+        rich: {
+          prefix: {
+            width: 5,
+            height: 16,
+            backgroundColor: '#1685FF',
+          },
+          t: {
+            fontSize: 15,
+            fontFamily: 'Microsoft YaHei',
+            fontWeight: 'bold',
+            color: '#333333',
+            lineHeight: 28,
+            padding: [0, 0, 0, 10],
+          },
+          suffix: {
+            fontSize: 12,
+            color: '#999999',
+            padding: [0, 0, 0, 5],
+          },
+        },
+      },
+    };
+  } else {
+    return { show: false };
+  }
+};
+
 export const defaultGrid = {
   right: 40,
   left: 60,
 };
 
+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 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 };
+};
+
 export const defaultLegend = {
   show: true,
   right: 40,
@@ -73,6 +118,7 @@ export const buildDefaultXAxis = (axis) => {
   }
   return cfg;
 };
+
 export const defaultXAxis = {
   show: true,
   axisLine: {
@@ -186,7 +232,7 @@ export const buildDefaultSeries = (option) => {
 export const buildDefaultOption = (option) => {
   const exports = {};
   exports.color = DEF_COLORS;
-  exports.title = deafultTitle;
+  exports.title = buildDefaultTitle(option);
   (option.dataZoom == undefined || option.dataZoom === null) &&
     (exports.dataZoom = defaultDataZoom);
   exports.tooltip = buildDefaultTooltip(option);
@@ -204,7 +250,9 @@ export const buildSpecificOption = (option) => {
           ? xAxis.map((item) => ({ ...buildDefaultXAxis(item) }))
           : buildDefaultXAxis(xAxis),
         yAxis: Array.isArray(yAxis) ? yAxis.map(() => ({ ...defaultYAxis })) : defaultYAxis,
-        grid: Array.isArray(grid) ? grid.map(() => ({ ...defaultGrid })) : defaultGrid,
+        grid: Array.isArray(grid)
+          ? grid.map(() => ({ ...buildDefaultGrid(option) }))
+          : buildDefaultGrid(option),
         legend: Array.isArray(legend) ? legend.map(() => ({ ...defaultLegend })) : defaultLegend,
         series: buildDefaultSeries(option),
         tooltip: {