深入学习 Echarts 地图与词云图绘制：收获、挑战与成长

LZZY_魏韬_057

于 2024-12-14 21:48:00 发布

阅读量908

点赞数 25

文章标签：学习 echarts 信息可视化

本文链接：https://blog.csdn.net/Y362779806/article/details/144476856

版权

一、学习背景与目标

在当今数据驱动的时代，数据可视化成为了从海量数据中提取有价值信息的关键手段。Echarts 作为一款强大的可视化库，提供了丰富多样的图表类型，其中地图和词云图在展示地理信息和文本数据方面独具优势。近期，我深入学习了使用 Echarts 绘制地图和词云图，旨在掌握这两种图表的绘制技巧，为数据分析和可视化项目增添有力工具。

二、Echarts 地图绘制学习

（一）地图类型与数据准备

Echarts 提供了 map 地图和 geo 地图两种类型。Map 地图通过颜色差异展示地区统计值大小，而 Geo 地图则可在地图上添加坐标点，适用于呈现具有地理位置属性的数据。绘制地图前，数据准备至关重要。例如，在绘制中国地区相关地图时，需获取各地区的数据以及对应的地图 js 文件。由于 echarts 官网不再提供地图 js 文件下载，可使用 pyecharts 库官方提供的线上 js 资源库（如https://assets.pyecharts.org/assets/maps/china.js）。对于需要自定义地图或使用其他地区地图的情况，可能需要额外的工具或数据转换。

（二）配置项详解与示例

Map 地图配置

series.type设置为'map'，series.mapType根据导入的地图 js 文件确定地图类型，如导入中国地图'china.js'，则mapType为'china'。
series.data是一个对象数组，包含地区名称和对应数值。例如:

series: [
    {
        type: "map",
        mapType: "china",
        label: {
            show:true
        },
        roam: true,
        data: [
            { name: '北京', value: 10 },
            { name: '天津', value: 20 },
            { name: '广西', value: 20 },
            { name: '广东', value: 50 },
            { name: '湖南', value: 80 },
            // 更多数据...
        ],
    }
],

series.label控制地图地域名称标签显示和样式，series.roam控制地图是否可鼠标拖动和缩放，visualMap用于设置色阶组件，以直观展示数值大小与颜色的对应关系。

2.Geo 地图配置

geo.map同 Map 地图的series.mapType，由导入的地图 js 文件决定。
series.type一般为'scatter'静态散点图或'effectScatter'动态散点图，series.coordinateSystem固定为'geo'。
series.data中每个对象的value是包含经度、纬度和数值的数组。例如：

series.data: [
    { name: 'xxx', value: [121.15, 31.89, 100]},
    { name: 'yyy', value: [120.38, 37.35, 30]},
    { name: 'zzz', value: [118.87, 42.28, 80]},
]

series.symbolSize可控制散点大小，若根据数值大小决定点的大小，可通过函数设置：

symbolSize: function (val) {  // 这里val表示data参数value数据
    return val[2]; // val[2]表示提取value数据的第三列数据
},

同样，series.label和series.roam用于控制标签显示和地图交互。

（三）实践过程中的问题与解决

在实际绘制地图时，遇到了一些问题。如不同地区数据格式不一致，导致无法直接用于地图绘制。通过编写数据预处理函数，将数据统一转换为 Echarts 所需格式解决了该问题。在处理地图缩放和平移交互时，发现默认设置可能会导致地图显示异常，通过调整roam参数的相关配置，优化了交互效果，确保用户能够流畅地探索地图数据。

三、Echarts 词云图绘制学习

（一）词云图概念与库导入

词云图用于展示文本数据中词语的出现频次，频次越高，词语在词云图中显示越大。由于新版 echarts 库不支持词云图绘制，需导入较早版本的 echarts 库，如 pyecharts 的线上资源库（https://assets.pyecharts.org/assets/echarts.min.js），同时还需导入词云图 js 文件（https://assets.pyecharts.org/assets/echarts-wordcloud.min.js）。此外，echarts 官网缺乏词云图的详细文档，需参考作者的 github（https://github.com/ecomfe/echarts-wordcloud）获取更多使用方法。

（二）配置项剖析与实践

基本配置

series.type设置为'wordCloud'，series.data包含词语和对应数值。例如：

series: [
    {
        type: 'wordCloud',
        data: [
            { name: 'Example 1', value: Math.random() },
            { name: 'Example 2', value: Math.random() },
            { name: 'Example 3', value: Math.random() },
            // 更多数据...
        ],
    }
],

series.shape可选择词云图形状，如'circle'、'cardioid'等。
series.sizeRange设置字体大小范围，series.rotationRange设置词语旋转角度范围，series.rotationStep确定词语旋转步长。
series.textStyle.fontFamily指定字体系列，series.textStyle.normal.color可设置字体颜色为随机色，通过以下方式实现

color: function () {
    return 'rgb('+[
        Math.round (Math.random() * 255),
        Math.round (Math.random() * 255),
        Math.round (Math.random() * 255),
    ].join(',')+')';
}

2.数据处理与优化

在准备词云图数据时，需要对文本进行预处理，包括分词、去除停用词等操作。例如，使用 Python 的nltk库或jieba库进行分词处理，然后统计词频，将结果转换为 Echarts 词云图所需格式。
对于大规模文本数据，可能需要优化算法以提高处理效率，避免性能瓶颈。

（三）遇到的挑战与突破

绘制词云图时，面临的一个挑战是如何使词云图布局更加美观和合理。通过不断调整sizeRange、rotationRange等参数，结合实际文本数据特点，找到了较为合适的布局方案。同时，在处理中文文本时，由于中文分词的复杂性，出现了一些词语分割不准确的情况。通过选择合适的分词工具和优化分词规则，提高了词云图中词语的准确性和可读性。

四、融合与创新

尝试将地图和词云图进行融合，以实现更丰富的数据展示效果。例如，点击地图区域时，在该区域弹出词云图展示该地区相关的热点词汇。在实现过程中，需要解决数据传递和图表联动的问题。通过使用 Echarts 的事件机制，监听地图点击事件，获取点击区域的相关数据，并将其传递给词云图组件进行更新显示。这种融合不仅增强了可视化的表现力，还为用户提供了更深入的数据分析视角。

五、学习心得与展望

通过本次学习，深刻体会到 Echarts 在地图和词云图绘制方面的强大功能和灵活性。在学习过程中，不仅掌握了图表绘制的技术细节，还培养了解决问题的能力和创新思维。未来，希望能够将所学知识应用到实际项目中，进一步探索 Echarts 的更多高级特性，如动画效果、多图表联动等，以创建更加生动、直观和具有交互性的数据可视化作品。同时，也期待 Echarts 能够不断完善文档和示例，为开发者提供更好的学习和开发体验。

总之，本次学习是一次充实而富有挑战的旅程，为数据可视化领域的进一步探索奠定了坚实基础。