在数据可视化领域，ECharts 是一款非常流行和强大的 JavaScript 图表库，它可以帮助我们轻松创建各种图表，其中包括散点图。散点图是一种通过点的位置来表示数据之间关系的图表，非常适合展示两个变量之间的关系。以下是学习 ECharts 散点图，轻松进行数据分析的秘籍。

一、认识散点图

散点图是由大量散布的点组成的图形，每个点代表一个数据记录。这些点在图中的位置反映了数据记录中两个变量的值。例如，我们可以使用散点图来展示某个地区不同年龄段人群的平均收入情况。

二、ECharts 散点图基本使用

1. 引入 ECharts

在使用 ECharts 创建散点图之前，首先需要在你的网页中引入 ECharts 的 JavaScript 库。

<script src="https://cdn.jsdelivr.net/npm/echarts@5.3.3/dist/echarts.min.js"></script>

2. 创建图表容器

在 HTML 文档中添加一个用于展示图表的容器。

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

3. 初始化 ECharts 实例

在 JavaScript 中初始化 ECharts 实例，并指定图表的配置项和数据。

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

var option = {
    title: {
        text: '散点图示例'
    },
    tooltip: {
        trigger: 'axis'
    },
    legend: {
        data: ['销量']
    },
    xAxis: {
        type: 'category',
        data: ['A', 'B', 'C', 'D', 'E', 'F', 'G']
    },
    yAxis: {
        type: 'value'
    },
    series: [{
        data: [
            [10, 20], [20, 30], [30, 40], [40, 50], [50, 60], [60, 70], [70, 80]
        ],
        type: 'scatter'
    }]
};

myChart.setOption(option);

4. 解释配置项

  • title: 图表标题。
  • tooltip: 鼠标悬停时的提示框。
  • legend: 图例。
  • xAxis: 横轴配置。
  • yAxis: 纵轴配置。
  • series: 数据系列配置，包括数据点和类型。

三、进阶散点图

1. 自定义颜色

在散点图中，我们可以自定义点的颜色。

series: [{
    data: [
        [10, 20], [20, 30], [30, 40], [40, 50], [50, 60], [60, 70], [70, 80]
    ],
    type: 'scatter',
    itemStyle: {
        color: '#ff7f50' // 自定义颜色
    }
}]

2. 标记点

在散点图中，我们可以通过 label 配置来标记重要的点。

itemStyle: {
    emphasis: {
        label: {
            show: true,
            formatter: '{b}: {c}'
        }
    }
}

3. 交互效果

ECharts 支持多种交互效果，如点击、缩放、拖拽等，可以通过 dataZoom 和 visualMap 实现。

dataZoom: [{
    type: 'slider',
    start: 0,
    end: 100
}],
visualMap: {
    type: 'continuous',
    min: 0,
    max: 100
}

四、实战案例

下面是一个简单的实战案例，展示如何使用 ECharts 创建一个展示不同产品销量的散点图。

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

var option = {
    title: {
        text: '产品销量对比'
    },
    tooltip: {
        trigger: 'item'
    },
    xAxis: {
        type: 'category',
        data: ['产品A', '产品B', '产品C', '产品D']
    },
    yAxis: {
        type: 'value'
    },
    series: [{
        data: [
            {value: 120, name: '产品A'},
            {value: 200, name: '产品B'},
            {value: 150, name: '产品C'},
            {value: 80, name: '产品D'}
        ],
        type: 'scatter',
        symbolSize: function (data) {
            return data.value / 10;
        }
    }]
};

myChart.setOption(option);

通过以上步骤，你可以轻松地使用 ECharts 创建散点图，并进行基本的数据分析。随着你对 ECharts 的深入学习和实践，你将能够制作出更加复杂和美观的图表，为你的数据分析之路增色添彩。