基于 ECharts 的多场景数据可视化实践

最新推荐文章于 2026-05-29 11:44:24 发布

原创

最新推荐文章于 2026-05-29 11:44:24 发布 · 1.4k 阅读

前言

在当今数字化飞速发展的时代，数据可视化在帮助人们理解和分析海量数据方面发挥着至关重要的作用。通过将复杂的数据以直观的图形、图表形式展现出来，能够使数据背后隐藏的信息和规律一目了然，为决策提供有力支持。ECharts 作为一款功能强大、应用广泛的 JavaScript 数据可视化库，为我们提供了丰富多样的可视化手段。接下来，我们将通过几个具体的代码示例，深入了解如何使用 ECharts 实现地图、词云图等不同类型的数据可视化效果。

一、ECharts 基础与环境搭建

（一）ECharts 简介

ECharts 是由百度开源的一款基于 JavaScript 的数据可视化库，它巧妙地借助 Canvas 和 SVG 技术，能够在 PC 和移动设备上流畅运行，为用户打造出高质量的可视化体验。它涵盖了众多类型的图表，像折线图、柱状图、饼图、散点图、地图、热力图、词云图等等，几乎可以满足各种数据展示需求。在本文中，我们重点聚焦于地图和词云图这两种典型的可视化方式及其应用场景。

（二）环境准备方式

1. 本地文件引入

我们可以先从ECharts 官网下载所需的文件，例如核心库文件 echarts.min.js，以及特定的地图数据文件（如 china.js、geoCoord.js 等，这些文件包含了绘制地图所需的地理信息数据），然后将它们放置在项目中的合适目录下，比如示例代码中的 js 文件夹。之后，在 HTML 文件中通过 <script> 标签来引入这些本地文件，示例如下：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <script src="https://blog.csdn.net/js/echarts.min.js"></script>
    <script src="https://blog.csdn.net/js/china.js"></script>
    <script src="https://blog.csdn.net/js/geoCoord.js"></script>
    <title>示例标题</title>
</head>
<body>
    <!-- 这里放置 ECharts 图表的容器元素 -->
    <div id="main"></div>
    <script>
        // 后续的 ECharts 初始化及配置代码将写在这里
    </script>
</body>
</html>

这种方式适合对项目文件有更高的定制性和独立性要求的场景，方便我们根据实际情况对库文件进行修改或扩展。

2. CDN 引入方式

另一种便捷的引入方式是使用 CDN（内容分发网络），只需在 HTML 文件中添加指向 CDN 上 ECharts 文件的链接即可，例如：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <script src="https://assets.pyecharts.org/assets/echarts.min.js"></script>
    <!-- 如需引入其他相关文件，如词云图扩展库等，可继续添加类似链接 -->
    <title>示例标题</title>
</head>
<body>
    <div id="main"></div>
    <script>
        // 同样在这里进行后续操作
    </script>
</body>
</html>

使用 CDN 引入的优点在于无需在本地存储大量文件，能自动获取最新版本的文件，加快项目的开发和部署速度，尤其适用于简单的可视化项目或者快速验证想法的场景。

二、基于 ECharts 的地图可视化示例与解析

（一）“某日各省份降雨量” 地图展示

以下是一段使用 ECharts 绘制中国地图来展示各省份降雨量数据的完整代码示例：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <script src="https://blog.csdn.net/js/echarts.min.js"></script>
    <script src="https://blog.csdn.net/js/china.js"></script>
    <script src="https://blog.csdn.net/js/geoCoord.js"></script>
    <title>某日各省份降雨量</title>
</head>
<body>
    <div id="main" style="width: 900px;height: 500px;"></div>
    <script>
        // 获取页面中用于放置图表的 DOM 元素
        var chartDom = document.getElementById('main');
        // 初始化 ECharts 实例，将其与 DOM 元素关联起来
        var myChart = echarts.init(chartDom);

        var option = {
            backgroundColor: '#032d4f', // 设置地图的背景颜色
            title: {
                text: '某日各省份降雨量', // 图表标题内容
                left: 'center', // 标题在图表中的水平位置，这里设置为居中
                textStyle: {
                    color: '#ffffff' // 标题文字的颜色
                }
            },
            tooltip: {
                trigger: 'item' // 定义提示框的触发方式，当鼠标悬停在地图区域（省份）时触发
            },
            visualMap: {
                min: 0, // 数据范围的最小值，对应降雨量最小值
                max: 100, // 数据范围的最大值，对应降雨量最大值
                left: 'left', // 视觉映射组件在图表中的水平位置
                top: 'bottom', // 视觉映射组件在图表中的垂直位置
                text: ['高', '低'], // 视觉映射组件两端显示的文本，用于示意数据高低情况
                calculable: true, // 启用视觉映射的计算功能，可显示数据范围滑块等交互元素
                inRange: {
                    color: ['#006d77', '#00e9ff', '#a3f7ff'] // 定义颜色区间，将降雨量数值映射到对应的颜色
                },
                textStyle: {
                    color: '#ffffff' // 视觉映射组件文本的颜色
                }
            },
            series: [
                {
                    name: '降雨量',
                    type: 'map', // 指定图表类型为地图
                    mapType: 'china', // 明确绘制的是中国地图，需确保已正确引入中国地图数据文件
                    roam: false, // 禁止地图的漫游操作，即不能通过鼠标拖动来移动地图
                    label: {
                        color: '#ffffff' // 设置地图上省份标签的文字颜色
                    },
                    itemStyle: {
                        normal: {
                            areaColor: '#02386f', // 地图区域正常状态下的填充颜色
                            borderColor: '#045a8d', // 地图区域正常状态下的边框颜色
                            borderWidth: 0.5 // 地图区域正常状态下的边框宽度
                        },
                        emphasis: {
                            areaColor: '#022b4f', // 当鼠标悬停在地图区域时，区域的填充颜色
                            borderColor: '#045a8d', // 鼠标悬停时区域的边框颜色
                            borderWidth: 1 // 鼠标悬停时区域的边框宽度增加，用于突出显示
                        }
                    },
                    data: [
                        { name: '北京', value: 10 },
                        { name: '天津', value: 20 },
                        { name: '广西', value: 20 },
                        { name: '广东', value: 50 },
                        { name: '湖南', value: 80 },
                        { name: '河北', value: 30 },
                        { name: '山西', value: 40 },
                        { name: '辽宁', value: 25 },
                        { name: '吉林', value: 15 },
                        { name: '黑龙江', value: 12 },
                        { name: '江苏', value: 60 },
                        { name: '浙江', value: 45 },
                        { name: '安徽', value: 35 },
                        { name: '福建', value: 22 },
                        { name: '江西', value: 55 },

标签