ECharts 中的散点图与气泡图示例

在数据可视化领域，ECharts 是一个功能强大且灵活的开源图表库。它基于 HTML5 的 canvas 技术，支持多种类型的图表，包括但不限于散点图和气泡图。这两种图表类型在数据展示中有着广泛的应用，特别是对于需要展示数据点之间的关系或对数据进行三维分析的情况。

散点图示例

散点图是一种用于展示两个变量间关系的图表，通常通过坐标轴上的点来表示数据。在 ECharts 中创建散点图可以通过设置 type 属性为 'scatter' 来实现。

示例代码：

// 引入 ECharts 全部特性
import * as echarts from 'echarts/core';
import { ScatterChart, ScatterSeries } from 'echarts/charts';
import { TitleComponent } from 'echarts/components';
import { CanvasRenderer } from 'echarts/renderers';

echarts.use([TitleComponent, ScatterChart, ScatterSeries, CanvasRenderer]);

// 初始化图表容器
const chartDom = document.getElementById('main');
const myChart = echarts.init(chartDom);

// 数据
const data = [
    { x: 10, y: 20 },
    { x: 30, y: 40 },
    { x: 50, y: 60 },
    // 更多数据...
];

// 配置项
const option = {
    title: {
        text: '散点图示例'
    },
    xAxis: {
        type: 'value',
        name: 'X 值'
    },
    yAxis: {
        type: 'value',
        name: 'Y 值'
    },
    series: [{
        name: '数据点',
        type: 'scatter',
        data: data,
        itemStyle: {
            color: new echarts.graphic.LinearGradient(0, 0, 1, 0, [{
                offset: 0,
                color: '#1f78b4'
            }, {
                offset: 1,
                color: '#ff7f0e'
            }])
        }
    }]
};

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

解析：

• 引入组件：确保导入了必要的组件，如标题组件、散点图图表和渲染器。
• 初始化图表：使用 echarts.init 方法获取 DOM 元素并初始化图表。
• 数据定义：定义要展示的数据点。
• 配置选项：设置图表的基本属性，如标题、坐标轴名称以及数据系列的样式。
• 绘制图表：使用 setOption 方法将配置项应用到图表上。

气泡图示例

气泡图是散点图的一种扩展，它在每个数据点上添加了一个第三维信息——大小。这使得气泡图能够直观地展示三个变量之间的关系。

示例代码：

// 同样需要引入 ECharts 的所有必要组件

const data = [
    { x: 10, y: 20, size: 5 },
    { x: 30, y: 40, size: 10 },
    { x: 50, y: 60, size: 15 },
    // 更多数据...
];

// 配置选项
const option = {
    title: {
        text: '气泡图示例'
    },
    xAxis: {
        type: 'value',
        name: 'X 值'
    },
    yAxis: {
        type: 'value',
        name: 'Y 值'
    },
    series: [{
        name: '数据点',
        type: 'scatter',
        data: data,
        symbolSize: function (params) {
            return params.data.size;
        },
        itemStyle: {
            color: new echarts.graphic.LinearGradient(0, 0, 1, 0, [{
                offset: 0,
                color: '#1f78b4'
            }, {
                offset: 1,
                color: '#ff7f0e'
            }])
        }
    }]
};

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

解析：

• 数据更新：新增了 size 属性来表示气泡的大小。
• 配置调整：通过 symbolSize 方法自定义每个数据点的大小，这里根据 size 属性动态计算。
• 其他配置：保持与散点图相同的配置，仅在 itemStyle 中添加颜色渐变效果。

通过以上示例，我们可以看到如何在 ECharts 中创建和配置散点图与气泡图。这些图表不仅提供了基本的数据展示能力，还允许用户通过颜色、大小等视觉元素来增强数据的可读性和理解性。