用react 使用@ant-design/plots Mix 写一个图表

首先需要安装@ant-design/plots和echarts：

npm install @ant-design/plots echarts

然后在React组件中引入需要的组件和数据源，例如：

import React from 'react';
import { MixChart } from '@ant-design/charts';
import * as echarts from 'echarts';

const data = [
  { year: '1991', value: 3 },
  { year: '1992', value: 4 },
  { year: '1993', value: 3.5 },
  { year: '1994', value: 5 },
  { year: '1995', value: 4.9 },
  { year: '1996', value: 6 },
  { year: '1997', value: 7 },
  { year: '1998', value: 9 },
  { year: '1999', value: 13 }
];

const MixChartDemo = () => {
  const config = {
    width: 800,
    height: 400,
    appendPadding: 10,
    renderer: 'canvas',
    tooltip: {
      showMarkers: false,
      showTitle: false
    },
    legend: {
      layout: 'horizontal',
      position: 'top'
    },
    xAxis: {
      type: 'cat',
      label: {
        rotate: -45
      }
    },
    yAxis: {
      min: 0,
      max: 15
    },
    series: [
      {
        type: 'line',
        smooth: true,
        data: data.map(item => ({ ...item, type: 'line' })),
        lineStyle: {
          width: 2
        },
        label: {
          position: 'top',
          formatter: ({ value }) => value.toFixed(1)
        }
      },
      {
        type: 'bar',
        data: data.map(item => ({ ...item, type: 'bar' })),
        label: {
          position: 'top',
          formatter: ({ value }) => value.toFixed(1)
        }
      }
    ],
    data
  };

  return <MixChart {...config} echarts={echarts} />;
};

export default MixChartDemo;

这里我们使用了@ant-design/plots的`MixChart`组件来实现线图和柱状图的混合图表，并使用了echarts作为底层渲染引擎。我们指定了图表的宽高、渲染器、坐标轴、图例和系列等配置，同时将数据源传递给了`data`属性。

最后，在渲染的时候，我们将echarts对象传递给`echarts`属性，这样就可以在React中使用了。