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 ECharts = memo(
+  React.forwardRef((props, ref) => {
     const { getPrefixCls } = React.useContext(ConfigProvider.ConfigContext);
     const prefixCls = getPrefixCls('basic-chart');
 
@@ -16,6 +17,8 @@ const ECharts = React.forwardRef((props, ref) => {
 
     // const chartProps = pick(props, ['option', 'notMerge', 'lazyUpdate', 'style', 'className', 'theme', 'onChartReady', 'loadingOption', 'showLoading', 'onEvents', 'opts']);
 
+    console.log('update ');
+
     return (
       <ReactEcharts
         ref={ref}
@@ -24,6 +27,7 @@ const ECharts = React.forwardRef((props, ref) => {
         {...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>`;
 };
 
 /**