数据可视化：用 Echarts 绘制地图与词云图

最新推荐文章于 2025-05-07 14:38:51 发布

23级大数据1班李婕

最新推荐文章于 2025-05-07 14:38:51 发布

阅读量1.8k

点赞数 32

文章标签： echarts 数据分析

本文链接：https://blog.csdn.net/2301_81088707/article/details/144619864

版权

在当今信息爆炸的时代，数据可视化成为了从海量数据中提取有价值信息的关键手段。它能够将复杂的数据以直观、生动的图表形式展现出来，让数据 “说话”，帮助我们更好地理解和分析数据。本文将详细介绍如何使用 Echarts 绘制地图和词云图，带你走进数据可视化的精彩世界。

一、Echarts 地图绘制

（一）Map 地图

导入地图 js 文件
在 Echarts 4.2.0 之前，绘制地图需导入地图 js 文件。由于 echarts 官网不再提供地图 js 文件下载，我们可使用 pyecharts 库官方提供的线上 js 资源库。以绘制中国地图为例，在 html 文件中添加如下代码导入中国地图的 js 文件：
```
<script src="https://assets.pyecharts.org/assets/maps/china.js"></script>
```
基本配置项

series.type：设置为 'map'，表明绘制的是地图。
series.mapType：由导入的地图 js 文件决定，这里导入中国地图 js 文件，所以值为 'china'。
series.data：一个对象数组，每个对象包含地域名称（name）和对应数值（value），如：
series.label：控制地图地域名称标签的显示和样式。
series.roam：控制地图是否可鼠标拖动、放缩。
visualMap：视觉映射组件，用于设置不同颜色表示不同数值大小。
代码示例:以下是一个完整的 Map 地图绘制代码示例：

（二）Geo 地图

导入相关 js 文件
绘制 Geo 地图需导入地图 js 文件（如中国地图的 china.js）和包含经纬度坐标的 js 文件（如 geoCoord.js），代码如下:
基本配置项

geo.map：同 Map 地图的 series.mapType，由导入的地图 js 文件决定，例如导入中国地图 js 文件，值为 'china'。
series.type：地图中点的样式，一般为'scatter'（静态散点图）或 'effectScatter'（动态散点图）。
series.coordinateSystem：固定值，填 'geo'。
series.data：对象数组，每个对象包含地域名称（name）和一个数组（value），数组元素为 [经度，纬度，数值]，如：

series.symbolSize：可接收数字控制散点大小，也可通过函数根据数据中的数值决定点的大小，例如：
```
symbolSize: function (val) {
  return val[2];
}
```
series.label：控制地图地域名称标签的显示和样式。
series.roam：控制地图是否可鼠标拖动、放缩。

3. 代码示例
以下是一个 Geo 地图的绘制代码示例：

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <title>Geo地图示例</title>
  <!-- 引入Echarts库 -->
  <script src="https://cdn.jsdelivr.net/npm/echarts@4.2.0/dist/echarts.min.js"></script>
  <!-- 引入地图js文件 -->
  <script src='../js/china.js'></script>
  <!-- 引入经纬度坐标js文件 -->
  <script src='../js/geoCoord.js'></script>
</head>

<body>
  <!-- 为Echarts图表准备一个具备大小（宽高）的DOM容器 -->
  <div id="geoChart" style="width: 600px;height: 400px;"></div>
  <script>
    // 基于准备好的DOM，初始化Echarts实例
    var myChart = echarts.init(document.getElementById('geoChart'));

    const geoCoordMap = {
      海门: [121.15, 31.89],
      鄂尔多斯: [109.781327, 39.608266],
      招远: [120.38, 37.35],
      舟山: [122.207216, 29.985295],
      齐齐哈尔: [123.97, 47.33],
      盐城: [120.13, 33.38],
      赤峰: [118.87, 42.28],
      青岛: [120.33, 36.07],
      乳山: [121.52, 36.89],
    };

    // 定义坐标数据和数值数据合并用的函数
    function convertData(data) {
      var res = [];
      for (var i = 0; i < data.length; i++) {
        var geoCoord = geoCoordMap[data[i].name];
        if (geoCoord ) {
          res.push({
            name: data[i].name,
            value: geoCoord.concat(data[i].value)
          });
        }
      }
      return res;
    }

    // 定义数据变量
    var data = [
      { name: '柳州', value: 8 },
      { name: '北京', value: 15 },
      { name: '上海', value: 15 },
      { name: '深圳', value: 14 },
      { name: '成都', value: 11 },
      { name: '南京', value: 11 },
    ];

    // 配置项
    var option = {
      tooltip: {},
      geo: {
        map: 'china',
      },
      series: [{
        type: 'effectScatter',
        coordinateSystem: "geo",
        data: convertData(data),
        symbolSize: function (val) {
          return val[2];
        },
        roam: true
      }],
    };

    // 使用刚指定的配置项和数据显示图表。
    myChart.setOption(option);
  </script>
</body>

</html>

二、Echarts 词云图绘制

导入相关库和文件
新版 echarts 库不支持词云图绘制，需导入较早版本的 echarts 库，如 pyecharts 的线上资源库：
```
<script src="https://assets.pyecharts.org/assets/echarts.min.js"></script>
```
同时，手动导入词云图的 js 文件：
```
<script src="https://assets.pyecharts.org/assets/echarts-wordcloud.min.js"></script>
```
基本配置项

series.type：设置为 'wordCloud'。

series.data：对象数组，每个对象包含词语（name）和数值（value），如：

{ name: 'Example 1', value: Math.random() },
{ name: 'Example 2', value: Math.random() },
// 更多数据...

series.shape：词云图形状，可选 'circle'（圆形）、'cardioid'（心形）、'diamond'（菱形）、'triangle-forward'（正三角形）、'triangle'（三角形）等。
series.sizeRange：字体大小范围，接收数组，如 [12, 50]。
series.rotationRange：词语旋转角度范围，接收数组，如 [-90, 90]。
series.rotationStep：词语旋转一次的角度，如 45。
series.textStyle.fontFamily：字体系列，如'sans-serif'。
series.textStyle.normal.color：字体颜色，一般设置为随机颜色，通过匿名函数和随机数实现，如：