feat: 双轴图

src/DualAxes/demos/basic.tsx

@@ -0,0 +1,96 @@
+import type { DualAxesConfig } from '@sensoro-design/charts';
+import { DualAxes } from '@sensoro-design/charts';
+import React, { useState } from 'react';
+import EditorDemo from '../../../docs/components/Editor';
+
+const data = [
+  // 第一个数组是柱状图数据
+  [
+    { time: '2020-01', 事件数量: 100 },
+    { time: '2020-02', 事件数量: 200 },
+    { time: '2020-03', 事件数量: 100 },
+    { time: '2020-04', 事件数量: 300 },
+    { time: '2020-05', 事件数量: 200 },
+    { time: '2020-06', 事件数量: 400 },
+  ],
+  // 第二个数组是折线图数据
+  [
+    { time: '2020-01', 完结率: 10 },
+    { time: '2020-02', 完结率: 65 },
+    { time: '2020-03', 完结率: 10 },
+    { time: '2020-04', 完结率: 30 },
+    { time: '2020-05', 完结率: 20 },
+    { time: '2020-06', 完结率: 44 },
+  ],
+];
+
+export default () => {
+  const [config, setConfig] = useState<DualAxesConfig['config']>({
+    data,
+    xField: 'time',
+    yField: ['事件数量', '完结率'],
+    yAxis: {
+      事件数量: {
+        min: 0, // 第一个 y 轴从 0 开始
+        tickCount: 5,
+      },
+      完结率: {
+        min: 0, // 第二个 y 轴从 0 开始
+        max: 100,
+        tickCount: 5,
+        label: {
+          formatter: (v) => `${v}%`,
+        },
+      },
+    },
+    geometryOptions: [
+      // 柱状图配置
+      {
+        geometry: 'column',
+        color: '#5B8FF9',
+      },
+      // 折线图配置
+      {
+        geometry: 'line',
+        // smooth: true,
+        color: '#5AD8A6',
+        // 可选：配置折线上的点
+        point: {
+          size: 4,
+          shape: 'circle',
+          style: {
+            fill: '#fff',
+            stroke: '#5AD8A6',
+            lineWidth: 2,
+          },
+        },
+      },
+    ],
+  });
+
+  return (
+    <div
+      style={{
+        display: 'flex',
+        justifyContent: 'space-between',
+        columnGap: 16,
+        height: 500,
+      }}
+    >
+      <div style={{ width: '40%' }}>
+        <EditorDemo
+          value={JSON.stringify(config, null, 2)}
+          onChange={(v) => setConfig(JSON.parse(v as string))}
+        />
+      </div>
+      <div style={{ width: '60%' }}>
+        <DualAxes
+          title="基础双轴图"
+          legend={{ type: ['box', 'svg'] }}
+          config={config}
+          // tooltip={{ showTitle: false }}
+        />
+      </div>
+    </div>
+  );
+};

src/DualAxes/demos/empty.tsx

@@ -0,0 +1,30 @@
+import { Column } from '@sensoro-design/charts';
+import React from 'react';
+
+export default () => {
+  return (
+    <div
+      style={{
+        display: 'flex',
+        justifyContent: 'space-between',
+        columnGap: 16,
+        height: 500,
+      }}
+    >
+      <div style={{ width: '50%' }}>
+        <Column title="柱状图" type="basic" empty style={{ height: 200 }} />
+      </div>
+      <div style={{ width: '50%' }}>
+        <Column
+          title="柱状图"
+          type="bidirection"
+          empty={
+            <div style={{ height: 160, display: 'flex', alignItems: 'center' }}>
+              dom形式空状态
+            </div>
+          }
+        />
+      </div>
+    </div>
+  );
+};

src/DualAxes/index.less

@@ -0,0 +1,23 @@
+@import '~@sensoro-design/styles/style/themes/default.less';
+
+@legend-prefix-cls: ~'sen-column';
+
+.@{legend-prefix-cls} {
+  padding: @padding-lg;
+  border-radius: @border-radius-lg;
+  background-color: @white;
+  display: flex;
+  flex-direction: column;
+
+  &-empty {
+    width: 100%;
+    height: 100%;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    color: @color-neutral-text-3;
+    font-size: 14px;
+    line-height: 22px;
+    margin-bottom: 36px;
+  }
+}

src/DualAxes/index.md

@@ -0,0 +1,17 @@
+---
+title: DualAxes 双轴图
+order: 10
+nav:
+  title: 组件
+  path: /components
+---
+
+# Column 柱状图
+
+### 基础柱状图
+
+<code src="./demos/basic.tsx"></code>
+
+### 空状态
+
+<code src="./demos/empty.tsx"></code>

src/DualAxes/index.tsx

@@ -0,0 +1,113 @@
+import type { DualAxesConfig as BaseDualAxesConfig } from '@ant-design/plots';
+import { DualAxes as BaseDualAxes } from '@ant-design/plots';
+import { map, merge, reduce } from 'lodash';
+import React, { useMemo, type FC } from 'react';
+import Composite from '../components/Composite';
+import type { GetDefaultConfigProps } from '../config/base';
+import { getDefaultConfig } from '../config/base';
+import type { BaseConfig } from '../types';
+import { generateColorMap } from '../utils';
+import './index.less';
+
+export interface DualAxesConfig extends BaseConfig {
+  title?: string;
+  data?: BaseDualAxesConfig['data'];
+  config?: Omit<BaseDualAxesConfig, 'data'> & {
+    data?: BaseDualAxesConfig['data'];
+  };
+  customsColors?: string[]; // 自定义lengend 色值
+}
+
+const genDefaultConfig = ({
+  colorMap,
+  seriesField,
+  customContentData,
+  legend,
+  showTooltipTitle,
+}: Partial<GetDefaultConfigProps>) => {
+  return {
+    ...getDefaultConfig({
+      tooltip: true,
+      tooltipBox: typeof legend === 'object' && legend?.type === 'box',
+      tooltipType: typeof legend === 'object' && legend?.type,
+      showTooltipTitle,
+      colorMap,
+      seriesField,
+      customContentData,
+    }),
+    legend: false,
+  };
+};
+
+const prefixCls = 'sen-DualAxes';
+
+const DualAxes: FC<DualAxesConfig> = (props) => {
+  const {
+    config,
+    data,
+    title,
+    legend,
+    timeRange,
+    style = {},
+    className = '',
+    empty,
+    tooltip,
+    customContentData,
+    customsColors,
+  } = props;
+  const { seriesField } = config ?? {};
+  const originalData = useMemo(
+    () =>
+      map(data ?? config?.data, (item, idx) => ({ ...item, __index__: idx })),
+    [data, config?.data],
+  );
+
+  const colorMap = useMemo(() => {
+    const data = reduce(
+      config?.yField,
+      (result: Record<string, ''>, key) => {
+        result[key] = '';
+        return result;
+      },
+      {},
+    );
+    return generateColorMap(data, undefined, customsColors);
+  }, [config?.yField]);
+
+  const newConfig = merge(
+    {},
+    genDefaultConfig({
+      colorMap,
+      seriesField,
+      customContentData,
+      legend,
+      showTooltipTitle: typeof tooltip === 'object' ? tooltip.showTitle : true,
+    }),
+    config,
+    {
+      data: originalData,
+    },
+  ) as BaseDualAxesConfig;
+
+  return (
+    <div className={`${prefixCls} ${className}`} style={style}>
+      <Composite
+        title={title}
+        seriesField={config?.yField?.[0]}
+        legend={legend}
+        colorMap={colorMap}
+        timeRange={timeRange}
+      >
+        {empty ? (
+          <div className={`${prefixCls}-empty`}>
+            {typeof empty === 'boolean' ? '暂无内容' : empty}
+          </div>
+        ) : (
+          <BaseDualAxes {...newConfig} />
+        )}
+      </Composite>
+    </div>
+  );
+};
+
+export default DualAxes;

src/index.ts

@@ -4,6 +4,8 @@ export { default as Bar } from './Bar';
 export type { BarConfig } from './Bar';
 export { default as Column } from './Column';
 export type { ColumnConfig } from './Column';
+export { default as DualAxes } from './DualAxes';
+export type { DualAxesConfig } from './DualAxes';
 export { default as Funnel } from './Funnel';
 export type { FunnelConfig } from './Funnel';
 export { default as Gauge } from './Gauge';