echarts 散点图 react

### 如何在 React 中使用 ECharts 创建散点图

#### 安装依赖库
为了能够在 React 项目中集成并使用 ECharts 绘制图表，首先需要安装 `echarts` 和 `echarts-for-react` 这两个 npm 包。通过命令行工具执行如下指令完成安装：

npm install echarts echarts-for-react --save

#### 导入必要的模块与样式
接着，在目标组件文件顶部导入所需的 JavaScript 文件以及任何可能需要用到的 CSS 样式表。

import React from 'react';
import { EChartsReact } from 'echarts-for-react'; // 或者 var EChartsReact = require('echarts-for-react');

#### 构建基础结构
创建一个新的函数式组件来承载即将呈现的地图可视化内容，并定义好容器 div 的 ID 属性以便后续初始化实例化对象时能够找到对应的 DOM 元素位置[^3]。

function ScatterPlot() {
    const option = {
        xAxis: {},
        yAxis: {},
        series: [
            {
                symbolSize: 20,
                data: [
                    [10.0, 8.04],
                    [8.07, 6.95],
                    ...
                ],
                type: 'scatter'
            }
        ]
    };

    return (
        <div>
            <h2>Scatter Plot Example</h2>
            <EChartsReact option={option} notMerge={true}/> {/* 设置notMerge=true防止数据合并错误 */}
        </div>
    );
}
export default ScatterPlot;

上述代码片段展示了如何利用 `<EChartsReact>` 自定义标签包裹传入配置项参数的方式快速搭建起一个具备基本功能性的散点图展示界面[^4]。注意这里设置了 `notMerge=true` 来解决某些情况下可能出现的数据更新失败问题。

#### 数据准备
根据实际应用场景准备好待可视化的二维坐标系下的离散数值对集合作为输入源传递给 chart 实例内部处理即可形成直观形象的关系分布图形表示形式。

#### 配置选项调整
最后可根据个人喜好进一步自定义修改主题颜色方案、轴线刻度间隔大小等细节部分使得最终产出更加美观大方满足业务逻辑表达需求。