Echarts可视化教程（九）—— 散点图的绘制

ECharts是一个强大的JavaScript数据可视化库，用于创建各种图表。在ECharts中，散点图（Scatter Chart）常用于展示两个变量之间的关系，每个点代表一对数值对。以下是绘制散点图的基本步骤：

1. 首先，你需要在HTML中引入ECharts的JS文件和CSS样式：

<script src="https://cdn.jsdelivr.net/npm/echarts@5.2.1/dist/echarts.min.js"></script>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/echarts@5.2.1/theme/macarons.min.css">

2. 创建一个`<div>`元素，并给它一个id，这将是ECharts实例化的容器：

<div id="main" style="width: 600px;height:400px;"></div>

3. 然后，在JavaScript中初始化ECharts并配置散点图数据：

var myChart = echarts.init(document.getElementById('main'));

// 配置选项
var option = {
    title: { text: '散点图示例' },
    tooltip: {},
    xAxis: { type: 'value', name: 'X轴' },
    yAxis: { type: 'value', name: 'Y轴' },
    series: [
        {
            name: '散点',
            data: [[5, 8], [4, 7], [7, 9], [1, 2], [3, 4]], // 数据，每对数字对应一个点
            symbolSize: function (val) { return val[2] / 3; }, // 根据第三个维度调整点大小
            itemStyle: {
                normal: {
                    color: function (params) { return params.data[2] > 5 ? '#f00' : '#0f0'; } // 根据第三个维度颜色编码
                }
            }
        }
    ]
};

// 绘制图表
myChart.setOption(option);

在这个例子中，我们设置了X轴和Y轴名称，数据部分包含了五个点，每个点由两维坐标和一个额外的值表示。`symbolSize`函数决定了点的大小，而`color`属性则根据第三个值动态改变颜色。