import { Column } from '@ant-design/plots';
import React from 'react';
import { createRoot } from 'react-dom';

const Demo = () => {
  const config = {
    marginTop: 40,
    data: {
      type: 'fetch',
      value:
        'https://gw.alipayobjects.com/os/bmw-prod/fb9db6b7-23a5-4c23-bbef-c54a55fee580.csv',
    },
    xField: 'letter',
    yField: 'frequency',
    title: {
      align: 'center', // 图表标题的对齐方式
      size: 28, // 图表标题的高度，默认为 36
      spacing: 4, // 主标题和副标题之间的间距
      // 标题
      title: "我是一个标题 I'am a title", // 图表标题的文本
      titleFontSize: 28, // 图表主标题的字体大小
      titleFontFamily: 'sans-serif', // 图表主标题的字体
      titleFontWeight: 600, // 图表主标题的字体粗细
      titleFill: '#fff', // 图表主标题的文字颜色
      titleFillOpacity: 1, // 图表主标题的文字透明度
      titleStroke: '#000', // 图表主标题的文字描边颜色
      titleLineWidth: 2, // 图表主标题的文字描边线宽
      titleStrokeOpacity: 1, // 图表主标题的文字描边透明度
      // 副标题
      subtitle: "我是一个副标题 I'am a subtitle", // 图表副标题的文本
      subtitleFontSize: 16, // 图表副标题的字体大小
      subtitleFontFamily: 'Arial', // 图表副标题的字体
      subtitleFontWeight: 300, // 图表副标题的字体粗细
      subtitleFill: '#2989FF', // 图表副标题的文字颜色
      subtitleFillOpacity: 1, // 图表副标题的文字透明度
      subtitleStroke: '#000', // 图表副标题的文字描边颜色
      subtitleLineWidth: 1, // 图表副标题的文字描边线宽
      subtitleStrokeOpacity: 0.5, // 图表副标题的文字描边透明度
    }
};
  return <Column {...config} />;
};

createRoot(document.getElementById('container')).render(<Demo />);