style: user rank chart

src/components/echarts/chart.tsx

@@ -9,10 +9,11 @@ import echarts, { ECOption } from '.';
 
 const Chart: React.FC<{
   options: ECOption;
+  chartHeight?: number;
   height: number | string;
   width: number | string;
   ref?: any;
-}> = forwardRef(({ options, width, height }, ref) => {
+}> = forwardRef(({ options, width, height, chartHeight }, ref) => {
   const container = useRef<HTMLDivElement>(null);
   const chart = useRef<echarts.EChartsType>();
   const resizeable = useRef(false);
@@ -138,7 +139,10 @@ const Chart: React.FC<{
 
   return (
     <div className="chart-wrapper" style={{ width: width, height }}>
-      <div ref={container} style={{ width: width, height }}></div>
+      <div
+        ref={container}
+        style={{ width: width, height: chartHeight || height }}
+      ></div>
     </div>
   );
 });

src/components/echarts/config.ts

@@ -220,6 +220,7 @@ export default function useChartConfig() {
   };
 
   return {
+    token,
     tooltip,
     grid,
     legend,

src/components/echarts/h-bar.tsx

@@ -2,7 +2,7 @@ import Chart from '@/components/echarts/chart';
 import useChartConfig from '@/components/echarts/config';
 import EmptyData from '@/components/empty-data';
 import _ from 'lodash';
-import React, { memo, useMemo } from 'react';
+import React, { useMemo } from 'react';
 import { ChartProps } from './types';
 
 const BarChart: React.FC<ChartProps & { maxItems?: number }> = (props) => {
@@ -17,6 +17,7 @@ const BarChart: React.FC<ChartProps & { maxItems?: number }> = (props) => {
     title
   } = props;
   const {
+    token,
     grid,
     legend,
     title: titleConfig,
@@ -44,17 +45,28 @@ const BarChart: React.FC<ChartProps & { maxItems?: number }> = (props) => {
       xAxis: {
         ...xAxis,
         axisLabel: {
-          ...xAxis.axisLabel,
-          formatter: labelFormatter
+          ...xAxis.axisLabel
         }
       },
       yAxis: {
         ...yAxis,
         axisLabel: {
           ...yAxis.axisLabel,
+          show: true,
           overflow: 'truncate',
           width: 75,
-          ellipsis: '...'
+          ellipsis: '...',
+          margin: 12,
+          formatter(value: string, index: number) {
+            return `{a|${index + 1}}`;
+          },
+          rich: {
+            a: {
+              fontWeight: 500,
+              fontSize: 14,
+              color: token?.colorTextSecondary
+            }
+          }
         }
       },
       legend: {
@@ -70,9 +82,25 @@ const BarChart: React.FC<ChartProps & { maxItems?: number }> = (props) => {
         type: 'bar',
         barWidth: 20,
         stack: 'Ad',
-        barGap: '30%',
+        barGap: '20%',
         label: {
-          show: false
+          show: true,
+          formatter(params: any) {
+            if (params.seriesIndex === 0) {
+              return `{value|${params.name}}`;
+            }
+            return '';
+          },
+          position: 'left',
+          align: 'left',
+          offset: [5, 18],
+          rich: {
+            value: {
+              textBorderWidth: 0,
+              fontSize: 11,
+              color: token?.colorTextTertiary
+            }
+          }
         },
         itemStyle: {
           color: item.color
@@ -138,10 +166,14 @@ const BarChart: React.FC<ChartProps & { maxItems?: number }> = (props) => {
   return (
     <>
       {isEmpty ? (
-        <EmptyData height={height} title={title}></EmptyData>
+        <EmptyData
+          height={height}
+          title={_.get(title, 'text', title || '')}
+        ></EmptyData>
       ) : (
         <Chart
           height={height}
+          chartHeight={typeof height === 'number' ? height - 10 : undefined}
           options={dataOptions}
           width={width || '100%'}
         ></Chart>
@@ -150,4 +182,4 @@ const BarChart: React.FC<ChartProps & { maxItems?: number }> = (props) => {
   );
 };
 
-export default memo(BarChart);
+export default BarChart;

src/components/echarts/line-chart.tsx

@@ -3,7 +3,7 @@ import useChartConfig from '@/components/echarts/config';
 import EmptyData from '@/components/empty-data';
 import { genColors } from '@/utils';
 import _ from 'lodash';
-import React, { memo, useMemo } from 'react';
+import React, { useMemo } from 'react';
 import echarts from '.';
 import { ChartProps } from './types';
 
@@ -169,4 +169,4 @@ const LineChart: React.FC<ChartProps> = (props) => {
   );
 };
 
-export default memo(LineChart);
+export default LineChart;

src/components/echarts/mix-line-bar.tsx

@@ -158,7 +158,10 @@ const MixLineBarChart: React.FC<
   return (
     <>
       {!lineSeriesData.length && !barSeriesData.length ? (
-        <EmptyData height={height} title={title}></EmptyData>
+        <EmptyData
+          height={height}
+          title={_.get(title, 'text', title || '')}
+        ></EmptyData>
       ) : (
         <Chart
           height={height}