正文

如何用echarts散点图灵活调整圆的大小与数据关联

/0 浏览量
0509

在 ECharts 中，散点图是一种常用的图表类型，可以用来展示数据点之间的关系。通过灵活调整散点图中圆的大小，我们可以更加直观地表达数据点的重要性或数值大小。以下是如何在 ECharts 中实现散点图圆的大小与数据关联的详细步骤：

1. 准备工作

首先，确保你的项目中已经引入了 ECharts 库。可以通过 CDN 链接或者下载 ECharts 的源码来引入。

<!-- 引入 ECharts -->
<script src="https://cdn.bootcdn.net/ajax/libs/echarts/5.3.3/echarts.min.js"></script>

2. 基本配置

创建一个基本的散点图配置，包括标题、坐标轴、系列等。

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

var option = {
    title: {
        text: '散点图示例'
    },
    tooltip: {},
    xAxis: {
        type: 'value'
    },
    yAxis: {
        type: 'value'
    },
    series: [{
        data: [[10, 20], [20, 30], [30, 40]],
        type: 'scatter',
        symbolSize: 20 // 圆的大小
    }]
};

3. 动态调整圆的大小

ECharts 允许你通过 symbolSize 属性动态调整圆的大小。这个属性可以是一个固定的数值，也可以是一个数组，甚至是基于数据计算得出的函数。

3.1 固定大小

如果你想使用固定的大小，可以直接设置 symbolSize 的值。

symbolSize: 20

3.2 基于数据大小调整

如果你想根据数据的大小来调整圆的大小，可以将 symbolSize 设置为一个数组，其中每个元素对应数据点的大小。

symbolSize: function (val) {
    return val[1] / 5;
}

这里，我们假设 data 中的每个元素都是一个包含两个数值的数组，第二个数值将决定圆的大小。

3.3 使用函数计算大小

如果你需要更复杂的计算，可以将 symbolSize 设置为一个函数，这个函数接收当前数据点的值作为参数。

symbolSize: function (data) {
    // 假设我们根据数值的平方根来调整大小
    return Math.sqrt(data[1]) / 5;
}

4. 完整示例

以下是一个完整的示例，展示了如何根据数据点的数值动态调整圆的大小。

<!DOCTYPE html>
<html style="height: 100%">
<head>
    <meta charset="utf-8">
</head>
<body style="height: 100%; margin: 0">
    <div id="main" style="height: 100%"></div>
    <script src="https://cdn.bootcdn.net/ajax/libs/echarts/5.3.3/echarts.min.js"></script>
    <script type="text/javascript">
        var myChart = echarts.init(document.getElementById('main'));

        var option = {
            title: {
                text: '散点图示例'
            },
            tooltip: {},
            xAxis: {
                type: 'value'
            },
            yAxis: {
                type: 'value'
            },
            series: [{
                data: [[10, 20], [20, 30], [30, 40], [40, 50], [50, 60]],
                type: 'scatter',
                symbolSize: function (data) {
                    // 根据数值的平方根来调整大小
                    return Math.sqrt(data[1]) / 5;
                }
            }]
        };

        myChart.setOption(option);
    </script>
</body>
</html>

通过以上步骤，你可以在 ECharts 中创建一个散点图，并根据数据点的数值灵活调整圆的大小，从而更好地展示数据之间的关系。

-- 展开阅读全文 --