react Antv/G2 自定义折线图线条样式及tootip提示信息样式

在AntV G2 和 React 中，自定义折线图的线条样式以及 tooltip 提示信息样式可以通过CSS和G2提供的配置选项来实现。

1. **线条样式**:
- 使用 `line` 属性可以控制线条的基本样式，例如颜色、宽度和样式(`stroke`, `stroke-width`, `stroke-linecap`等)。例如：

     import { line } from '@antv/g2';
     
     const chart = (
       <LineChart>
         <Line
           data={yourData}
           x="date"
           y="value"
           shape={line({ stroke: 'red', lineWidth: 2 })}
         />
       </LineChart>
     );

- 如果需要更复杂的自定义样式，可以创建一个单独的 CSS 类并引用它：

.custom-line {
  stroke-dasharray: 5, 5; /* 定义虚线样式 */
  stroke-opacity: 0.8;
}

然后在图表组件中应用这个类：

   <Line
     data={yourData}
     x="date"
     y="value"
     shape={line({ className: 'custom-line' })}
   />

2. **Tooltip 提示信息样式**:
- G2 提供了 `tooltip` 配置项来定制提示框样式。你可以设置 `formatter`, `style` 或者使用一个自定义的 `Tooltip` 组件来自定义内容和样式。例如：

     <Tooltip content={<CustomTooltip content={['name', 'value']}>}>
       {/* ... */}
     </Tooltip>

对于自定义样式，可以在 `CustomTooltip` 的 `render` 函数内部添加样式。