## LineChart

Demo:

```tsx
import React from 'react';
import { LineChart } from 'bf-polaris-chart';

export default () => {
  const data = [
    { value: 10863169, date: '2020-10-18', type: '1' },
    { value: 10523125, date: '2020-10-19', type: '1' },
    { value: 10838963, date: '2020-10-20', type: '1' },
    { value: 10707772, date: '2020-10-21', type: '1' },
    {
      value: 10434328,
      date: '2020-10-22',
      remark:
        '测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试',
      type: '1',
    },
    { value: 9447284, date: '2020-10-23', type: '1' },
    { value: 10166673, date: '2020-10-24', type: '1' },
    { value: 10526355, date: '2020-10-25', type: '1' },

    { value: 1086316, date: '2020-10-18', type: '2' },
    { value: 1052312, date: '2020-10-19', type: '2' },
    { value: 1083896, date: '2020-10-20', type: '2' },
    { value: 1070777, date: '2020-10-21', type: '2' },
    {
      value: 1043432,
      date: '2020-10-22',
      remark:
        '测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试',
      type: '2',
    },
    { value: 944724, date: '2020-10-23', type: '2' },
    { value: 1016663, date: '2020-10-24', type: '2' },
    { value: 1052655, date: '2020-10-25', type: '2' },
  ];
  const config = {
    data,
    xField: 'date',
    yField: 'value',
    seriesField: 'type',
    point: {
      size: 5,
      shape: 'circle',
    },
    annotations: [
      {
        type: 'dataMarker',
        point: {
          style: {
            fill: '#f5222d',
            stroke: '#f5222d',
          },
        },
        line: {
          length: 0,
        },
        position: { value: 10434328, date: '2020-10-22', remark: '测试' },
      },
      {
        type: 'dataMarker',
        point: {
          style: {
            fill: '#f5222d',
            stroke: '#f5222d',
          },
        },
        line: {
          length: 0,
        },
        position: {
          value: 1043432,
          date: '2020-10-22',
          remark: '测试',
          type: '2',
        },
      },
    ],
    tooltip: {
      fields: ['value', 'date', 'remark'],
      formatter: (data: any) => {
        return {
          name: data.date,
          value: (Number(data.value) as any)._toThousands(),
          remark: data.remark,
        };
      },
      containerTpl: `
        <div class="g2-tooltip bf-polaris-g2-tooltip">
          <div class="g2-tooltip-title" style="margin:10px 0;"></div>
          <ul class="g2-tooltip-list"></ul></div>
        </div>
      `,
      itemTpl: `
            <li style="margin: 12px 0px;list-style-type:none;padding: 0;max-width: 300px;">
              <span style="background-color:{color};" class="g2-tooltip-marker"></span>
              <span>{name}:</span>
              <span style="padding-left: 30px;float: right;">{value}</span>
              <div class="bf-g2-tooltip-remark" style="word-wrap: break-all; color: red; margin: 10px 0;">
                {remark}
              </div>
            </li>
          `,
    },
  };
  return <LineChart {...config} />;
};
```