perf: 优化基础图表默认配置

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

-import React, { useMemo } from 'react';
+import React, { memo, useMemo } from 'react';
 import { ConfigProvider } from 'antd';
 import classNames from 'classnames';
 import ReactEcharts from 'echarts-for-react';
 import { omit } from 'lodash';
 import buildOption from './utils';
 
-const ECharts = React.forwardRef((props, ref) => {
-  const { getPrefixCls } = React.useContext(ConfigProvider.ConfigContext);
-  const prefixCls = getPrefixCls('basic-chart');
+const ECharts = memo(
+  React.forwardRef((props, ref) => {
+    const { getPrefixCls } = React.useContext(ConfigProvider.ConfigContext);
+    const prefixCls = getPrefixCls('basic-chart');
 
-  const chartProps = omit(props, ['className', 'option']);
-  const option = useMemo(() => {
-    return buildOption(props.option);
-  }, [props.option]);
+    const chartProps = omit(props, ['className', 'option']);
+    const option = useMemo(() => {
+      return buildOption(props.option);
+    }, [props.option]);
 
-  // const chartProps = pick(props, ['option', 'notMerge', 'lazyUpdate', 'style', 'className', 'theme', 'onChartReady', 'loadingOption', 'showLoading', 'onEvents', 'opts']);
+    // const chartProps = pick(props, ['option', 'notMerge', 'lazyUpdate', 'style', 'className', 'theme', 'onChartReady', 'loadingOption', 'showLoading', 'onEvents', 'opts']);
 
-  return (
-    <ReactEcharts
-      ref={ref}
-      className={classNames(prefixCls, props.className)}
-      option={option}
-      {...chartProps}
-    />
-  );
-});
+    console.log('update ');
+
+    return (
+      <ReactEcharts
+        ref={ref}
+        className={classNames(prefixCls, props.className)}
+        option={option}
+        {...chartProps}
+      />
+    );
+  }),
+);
 
 export default ECharts;

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

@@ -13,6 +13,8 @@ export const buildDefaultTitle = (option) => {
   const { show, text } = title ?? {};
   if (show && text) {
     return {
+      left: 12,
+      top: 12,
       textStyle: {
         rich: {
           prefix: {
@@ -25,7 +27,6 @@ export const buildDefaultTitle = (option) => {
             fontFamily: 'Microsoft YaHei',
             fontWeight: 'bold',
             color: '#333333',
-            lineHeight: 28,
             padding: [0, 0, 0, 10],
           },
           suffix: {
@@ -53,16 +54,18 @@ export const buildDefaultGrid = (option) => {
   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 };
+  return { right: 40, left: 60, top, bottom: 40 };
 };
 
 export const defaultLegend = {
   show: true,
-  right: 40,
+  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',

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

 import _ from 'lodash';
+import moment from 'moment';
 
 const isArray = (arr) => Array.isArray(arr);
 
@@ -130,10 +131,12 @@ const colorAccessor = (param) => {
  */
 const headTemplate = (option, param) => {
   if (!param) return '';
-  const { name, axisValueLabel } = param;
-  return `<div style="border-bottom: 1px solid #F0F0F0; color: #808080; margin-bottom: 5px; padding-bottom: 5px;">${
-    name || axisValueLabel
-  }</div>`;
+  const { name, axisValueLabel, axisType, axisValue } = param;
+  const { tooltip } = option;
+  const { timeFormat = 'YYYY-MM-DD HH:mm:ss' } = tooltip ?? {};
+  const text =
+    axisType === 'xAxis.time' ? moment(axisValue).format(timeFormat) : name || axisValueLabel;
+  return `<div style="border-bottom: 1px solid #F0F0F0; color: #808080; margin-bottom: 5px; padding-bottom: 5px;">${text}</div>`;
 };
 
 /**