echarts：多组散点-图

最新推荐文章于 2025-03-06 23:30:00 发布

莫小封

最新推荐文章于 2025-03-06 23:30:00 发布

阅读量2.8k

点赞数

分类专栏： echarts可视化文章标签： echarts 前端 javascript

本文链接：https://blog.csdn.net/qq_41390184/article/details/129909352

版权

echarts可视化专栏收录该内容

5 篇文章

订阅专栏

Echarts是一款基于JavaScript的开源可视化库，它提供了各种图表类型和丰富的交互功能，能够帮助用户快速地创建各种交互式图表。在本文中，我们将介绍如何使用Echarts绘制多组散点-图，并通过一个完整的示例进行说明。

1.准备数据集

首先，我们需要准备一些数据。假设我们有三组数据，每组数据包含x和y两个坐标值，分别代表散点图中的横坐标和纵坐标。我们可以使用以下代码来生成这些数据：

var data1 = [];
for (var i = 0; i < 50; i++) {
  var x = Math.random() * 100;
  var y = Math.random() * 100;
  data1.push([x, y]);
}

var data2 = [];
for (var i = 0; i < 50; i++) {
  var x = Math.random() * 100;
  var y = Math.random() * 100;
  data2.push([x, y]);
}

var data3 = [];
for (var i = 0; i < 50; i++) {
  var x = Math.random() * 100;
  var y = Math.random() * 100;
  data3.push([x, y]);
}

2.准备容器

接下来，我们需要引入Echarts库，并创建一个容器来显示图表。我们可以使用以下代码来创建一个div元素，并设置其宽度和高度：

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

然后，我们可以使用以下代码来初始化Echarts，并将其绑定到我们刚刚创建的div元素：

var chart = echarts.init(document.getElementById('chart'));

3.定义图表的配置项

接下来，我们需要定义图表的配置项。在本例中，我们需要定义三组散点图的数据和样式。我们可以使用以下代码来定义配置项：

var option = {
  xAxis: {
    type: 'value',
    min: 0,
    max: 100
  },
  yAxis: {
    type: 'value',
    min: 0,
    max: 100
  },
  series: [
    {
      name: 'data1',
      type: 'scatter',
      data: data1,
      itemStyle: {
        color: 'red'
      }
    },
    {
      name: 'data2',
      type: 'scatter',
      data: data2,
      itemStyle: {
        color: 'green'
      }
    },
    {
      name: 'data3',
      type: 'scatter',
      data: data3,
      itemStyle: {
        color: 'blue'
      }
    }
  ]
};

在上面的代码中，我们定义了x轴和y轴的类型为value，最小值为0，最大值为100。然后，我们定义了三组散点图的数据和样式，分别使用红色、绿色和蓝色表示。

4.完整代码

最后，我们需要将配置项应用到图表中，并使用以下代码来显示图表：

chart.setOption(option);

完整的示例代码如下：

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <title>多组散点图示例</title>
  <script src="echarts.js"></script>
</head>
<body>
  <div id="chart" style="width: 600px;height: 400px;"></div>
  <script>
    var data1 = [];
    for (var i = 0; i < 50; i++) {
      var x = Math.random() * 100;
      var y = Math.random() * 100;
      data1.push([x, y]);
    }

    var data2 = [];
    for (var i = 0; i < 50; i++) {
      var x = Math.random() * 100;
      var y = Math.random() * 100;
      data2.push([x, y]);
    }

    var data3 = [];
    for (var i = 0; i < 50; i++) {
      var x = Math.random() * 100;
      var y = Math.random() * 100;
      data3.push([x, y]);
    }

    var chart = echarts.init(document.getElementById('chart'));

    var option = {
      xAxis: {
        type: 'value',
        min: 0,
        max: 100
      },
      yAxis: {
        type: 'value',
        min: 0,
        max: 100
      },
      series: [
        {
          name: 'data1',
          type: 'scatter',
          data: data1,
          itemStyle: {
            color: 'red'
          }
        },
        {
          name: 'data2',
          type: 'scatter',
          data: data2,
          itemStyle: {
            color: 'green'
          }
        },
        {
          name: 'data3',
          type: 'scatter',
          data: data3,
          itemStyle: {
            color: 'blue'
          }
        }
      ]
    };

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

当我们运行上面的代码时，就会在页面上显示一个包含三组散点图的图表。每组散点图都使用不同的颜色表示，可以方便地区分不同的数据。同时，我们也可以使用鼠标滚轮来缩放图表，使用鼠标拖拽来移动图表，以及使用鼠标悬停来查看每个散点的具体数值。
在这里插入图片描述
综上所述，Echarts是一款非常强大的可视化库，可以帮助用户快速地创建各种交互式图表。在本文中，我们介绍了如何使用Echarts绘制多组散点图，并通过一个完整的示例进行了说明。希望这篇文章对您有所帮助。