绘制echarts地图和词云图

2023 韦沛君

已于 2024-10-30 21:27:34 修改

阅读量995

点赞数 14

文章标签： 1024程序员节

于 2024-10-27 21:40:44 首次发布

本文链接：https://blog.csdn.net/2301_82308696/article/details/143220509

版权

（一）实验目的

数据可视化呈现
- 将地理数据以直观的地图形式展示，帮助用户更清晰地理解数据在地理空间上的分布情况。例如，在分析不同地区的销售数据、人口分布、资源分布等时，通过地图可以快速看出数据的地域差异和趋势。
地理数据分析与探索
- 利用 Echarts 地图的交互功能，对地理数据进行深入分析和探索。用户可以通过点击地图上的不同区域，获取详细的数据信息，或者进行数据的对比分析。比如在研究不同省份的经济发展水平时，可以比较各省份的 GDP 数据在地图上的呈现，进而发现经济发展的热点地区和薄弱环节。
提升数据传达效率
- 对于涉及地理信息的复杂数据集合，地图是一种高效的传达方式。相比于表格或文本形式的数据展示，地图能够更快速地吸引用户的注意力，并使他们更容易理解数据之间的空间关系。例如在汇报全国市场占有率分布时，地图可以直观地显示各个地区的市场份额大小，让观众一目了然。
技术实践与学习
- 掌握 Echarts 地图绘制的技术和方法，了解如何引入相关库、准备地图数据、配置地图选项以及实现基本的交互功能。这有助于提升开发者在数据可视化领域的技能水平，为今后处理更复杂的地理数据可视化任务打下基础。

前置的HTML代码

1 .map地图

Map地图又称色阶地图，是通过地图中不同区域的颜色差异来体现地区的统计值大小差异。

1.1 导入地图js文件

在 ECharts 4.2.0 之前，地图数据是内置在 ECharts 的 JavaScript 文件中的，这导致了文件体积较大，使用echarts绘制地图时需要导入地图js文件，而各种地图js文件则是在echarts官网上下载。

导入地图js文件，即先下载好某个地图的js文件，如中国地图的js文件为“china.js”，再在html文件中导入该文件，代码如下：

<script src='js文件的路径/china.js'></script>

亦或是导入一个在线的echarts地图js资源，例如：

<script src="https://assets.pyecharts.org/assets/maps/china.js"></script>

1.2 基本配置项

基本配置项指定义图形类型、图形数据相关的配置项。

series.type: 设置为 'map'。

series.mapType：地图的类型，由导入的地图js文件决定，例如导入了中国地图“china.js”，则maptype参数值就填“china”。

series.data: 一个对象数组，每个对象包含两个键值对，name表示地域名称，value表示数值，如：

series.label：控制地图地域名称标签的显示和样式。
series.roam：控制地图是否可以使用鼠标拖动、放缩。
visualMap：显示并使用色阶组件，官网叫视觉映射组件。能够设置不同颜色来表示不同程度的数值大小。

1.3 代码示例

编写 html 代码绘制地图

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

<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <script src="js/echarts.min.js"></script>
    <script src="js/china.js"></script>
</head>

<body>
    <div id="main1" style="width: 900px;height: 500px;"></div>
    <script>
     
    </script>
</body>

</html>

编写 JavaScript 代码绘制地图

在 HTML 文件中的script标签内编写代码，或者将代码放在外部的.js文件中并引入。

//选择DOM并创建ehcarts图形对象
var chartDom4 = document.getElementById('main1');
var myChart4 = echarts.init(chartDom4);
//配置项
option4 = {
    title: {
        text: '某日各省份降雨量',
        // 居中对齐
        left: 'center',
        // 设置标题颜色为白色
        textStyle: {
            color: '#fff'
        }
    },
    backgroundColor: '#032d4f', //背景颜色
    series: [
        {
            name: '降雨量', // 设置数据系列名称
            type: "map",
            mapType: "china",
            label: { // 设置标签样式
                show: true, // 显示标签
                color: '#ffffff', // 设置标签颜色为白色
            },
            itemStyle: {
                normal: {
                    areaColor: &#

最低0.47元/天解锁文章