react+Antv-g2 demo，CSS内联样式的使用，前端常用面试

import React from 'react';
import G2 from '@antv/g2';
import styles from './index.css'; // 引入CSS模块
 
class G2Demo extends React.Component {
  componentDidMount() {
    const data = [
      { year: '1951 年', value: 38 },
      { year: '1952 年', value: 52 },
      // ... 更多数据
    ];
    const chart = new G2.Chart({
      container: 'c1', // 指定图表容器ID
      width: 600, // 指定图表宽度
      height: 300, // 指定图表高度
    });
    chart.source(data); // 指定数据源
    chart.interval().position('year*value'); // 绘制柱状图
    chart.render(); // 渲染图表
  }
 
  render() {
    return (
      <div>
        <div id="c1" className={styles.chartContainer} /> 
        {/* 使用内联样式，同时应用CSS模块中的样式类 */}
        <div className={styles.description}>
          这是一个基于 AntV G2 的图表示例。
        </div>
      </div>
    );
  }
}
 
export default G2Demo;

CSS 文件 (index.css):

.chartContainer {
  border: 1px solid #ddd; /* 图表容器边框样式 */
  margin: 20px 0; /* 上下外边距 */
}
 
.description {
  color: #333; /* 描述文字颜色 */
  font-size: 14px; /* 字体大小 */
  margin-top: 10px; /* 与图表容器的外边距 */
}

这个例子中，我们创建了一个React组件，在组件挂载后，使用AntV G2 库来绘制一个简单的柱状图。同时，我们演示了如何在React组件中使用CSS模块，以及如何通过内联样式来应用这些模块定义的样式。这种方法提高了代码的模块化和可维护性，也是现代前端开发中常用的实践。