使用 ECharts 绘制地图和词云图：数据可视化的强大工具

在当今数据驱动的时代，数据可视化已经成为分析、理解和展示数据不可或缺的一部分。通过将复杂的数据转化为直观的图形和图表，我们可以更清晰地发现数据背后的趋势、模式和关系。在众多数据可视化工具中，ECharts（Enterprise Charts）凭借其强大的功能和灵活性，成为了许多开发者和数据分析师的首选。地图和词云图。通过这两个案例，您将掌握 ECharts 的基本使用方法，并能够创建出具有交互性和

lzzy_lmx_2043

3002人浏览 · 2024-12-08 15:23:02

lzzy_lmx_2043 · 2024-12-08 15:23:02 发布

前言

在当今数据驱动的时代，数据可视化已经成为分析、理解和展示数据不可或缺的一部分。通过将复杂的数据转化为直观的图形和图表，我们可以更清晰地发现数据背后的趋势、模式和关系。在众多数据可视化工具中，ECharts（Enterprise Charts）凭借其强大的功能和灵活性，成为了许多开发者和数据分析师的首选。

本文将详细介绍如何使用 ECharts 绘制两种常见的可视化图表：地图和词云图。通过这两个案例，您将掌握 ECharts 的基本使用方法，并能够创建出具有交互性和美观性的数据可视化作品。

什么是 ECharts？

ECharts 是由百度开源的一个基于 JavaScript 的数据可视化库。它基于 Canvas 和 SVG 技术，能够流畅地运行在 PC 和移动设备上。ECharts 提供了丰富的图表类型，包括折线图、柱状图、饼图、散点图、地图、热力图、词云图等，并且支持高度自定义和交互功能。

ECharts 的主要特点包括：

丰富的图表类型：支持 20 多种图表类型，满足各种数据可视化需求。
强大的交互功能：支持缩放、平移、提示框、图例联动等多种交互方式。
高度可定制：提供丰富的配置选项，可以轻松定制图表的样式和功能。
良好的兼容性：支持主流浏览器和移动设备。
开源免费：遵循 MIT 许可证，可以免费用于商业项目。

环境搭建

使用 ECharts 非常简单，只需在 HTML 文件中引入 ECharts 的 JavaScript 文件即可。您可以通过以下几种方式引入 ECharts：

1.使用 CDN 引入

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>ECharts 示例</title>
    <!-- 引入 ECharts 文件 -->
    <script src="https://cdn.jsdelivr.net/npm/echarts@5/dist/echarts.min.js"></script>
</head>
<body>
    <!-- 为 ECharts 准备一个具备大小的 DOM -->
    <div id="main" style="width: 600px;height:400px;"></div>
    <script>
        // 初始化 ECharts 实例
        var myChart = echarts.init(document.getElementById('main'));

        // 指定图表的配置项和数据
        var option = {
            title: {
                text: 'ECharts 入门示例'
            },
            tooltip: {},
            legend: {
                data:['销量']
            },
            xAxis: {
                data: ["衬衫","羊毛衫","雪纺衫","裤子","高跟鞋","袜子"]
            },
            yAxis: {},
            series: [{
                name: '销量',
                type: 'bar',
                data: [5, 20, 36, 10, 10, 20]
            }]
        };

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

2.下载 ECharts 文件

您可以从 ECharts 官网下载 ECharts 的源码文件，并将其引入到项目中。

绘制地图

地图是展示地理空间数据的有效方式。ECharts 提供了强大的地图绘制功能，支持世界地图、中国地图、各省市地图等。

示例：绘制中国地图并展示各省人口数据

假设我们有一组各省人口数据，我们希望将其展示在中国地图上，并使用不同颜色表示人口数量的多少。

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>ECharts 地图示例</title>
    <!-- 引入 ECharts 文件 -->
    <script src="https://cdn.jsdelivr.net/npm/echarts@5/dist/echarts.min.js"></script>
    <!-- 引入中国地图数据 -->
    <script src="https://cdn.jsdelivr.net/npm/echarts@5/map/js/china.js"></script>
</head>
<body>
    <!-- 为 ECharts 准备一个具备大小的 DOM -->
    <div id="main" style="width: 800px;height:600px;"></div>
    <script>
        // 初始化 ECharts 实例
        var myChart = echarts.init(document.getElementById('main'));

        // 地理坐标系组件
        var option = {
            title: {
                text: '中国各省人口分布图',
                left: 'center'
            },
            tooltip: {
                trigger: 'item',
                formatter: '{b}<br/>{c} 人'
            },
            visualMap: {
                min: 0,
                max: 100000000,
                left: 'left',
                top: 'bottom',
                text: ['高','低'],
                calculable: true,
                inRange: {
                    color: ['#e0ffff', '#006edd']
                }
            },
            series: [
                {
                    name: '人口数量',
                    type: 'map',
                    map: 'china',
                    roam: true,
                    label: {
                        show: true,
                        color: '#000'
                    },
                    data: [
                        {name: '北京', value: 21540000},
                        {name: '天津', value: 12930000},
                        {name: '河北', value: 74700000},
                        {name: '山西', value: 37180000},
                        {name: '内蒙古', value: 24730000},
                        {name: '辽宁', value: 42310000},
                        {name: '吉林', value: 26960000},
                        {name: '黑龙江', value: 38310000},
                        {name: '上海', value: 24240000},
                        {name: '江苏', value: 80290000},
                        {name: '浙江', value: 56570000},
                        {name: '安徽', value: 59500000},
                        {name: '福建', value: 38390000},
                        {name: '江西', value: 44570000},
                        {name: '山东', value: 98470000},
                        {name: '河南', value: 94360000},
                        {name: '湖北', value: 57270000},
                        {name: '湖南', value: 65680000},
                        {name: '广东', value: 109990000},
                        {name: '广西', value: 47540000},
                        {name: '海南', value: 8900000},
                        {name: '重庆', value: 30480000},
                        {name: '四川', value: 83020000},
                        {name: '贵州', value: 35550000},
                        {name: '云南', value: 47210000},
                        {name: '西藏', value: 3000000},
                        {name: '陕西', value: 37350000},
                        {name: '甘肃', value: 25500000},
                        {name: '青海', value: 5880000},
                        {name: '宁夏', value: 6820000},
                        {name: '新疆', value: 23950000}
                    ]
                }
            ]
        };

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

代码解析

1.引入 ECharts 和地图数据

为了绘制中国地图，我们需要引入 ECharts 的 JavaScript 文件以及中国地图的地理数据文件。

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

2.初始化 ECharts 实例

var myChart = echarts.init(document.getElementById('main'));

3.配置地图选项

标题: 设置图表标题为“中国各省人口分布图”。
提示框: 设置提示框触发方式为“item”，并自定义提示内容，显示省份名称和人口数量。
视觉映射: 使用 visualMap 组件，将人口数量映射到不同的颜色区间，实现数据可视化。
系列数据: 使用 series 数组中的 map 类型，指定地图类型为“中国”，并设置数据源为各省人口数据。

var option = {
    title: {
        text: '中国各省人口分布图',
        left: 'center'
    },
    tooltip: {
        trigger: 'item',
        formatter: '{b}<br/>{c} 人'
    },
    visualMap: {
        min: 0,
        max: 100000000,
        left: 'left',
        top: 'bottom',
        text: ['高','低'],
        calculable: true,
        inRange: {
            color: ['#e0ffff', '#006edd']
        }
    },
    series: [
        {
            name: '人口数量',
            type: 'map',
            map: 'china',
            roam: true,
            label: {
                show: true,
                color: '#000'
            },
            data: [
                // 各省人口数据
            ]
        }
    ]
};

4.设置图表大小

<div id="main" style="width: 800px;height:600px;"></div>

地图效果图如下：

绘制词云图

词云图是一种用于展示文本数据中词语出现频率的可视化方式。词语的大小和颜色可以反映其频率的高低。ECharts 提供了强大的词云图绘制功能，支持多种形状和样式。

示例：绘制简单的词云图

假设我们有一组文本数据，我们希望将其展示为词云图，并根据词语出现的频率调整其大小。

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

<head>
    <meta charset="UTF-8">
    <title>ECharts 词云图示例</title>
    <!-- 引入 ECharts 文件 -->
    <script src="https://assets.pyecharts.org/assets/echarts.min.js"></script>
    <!-- 引入词云图文件 -->
    <script src="https://assets.pyecharts.org/assets/echarts-wordcloud.min.js"></script>
</head>
<body>
    <!-- 为 ECharts 准备一个具备大小的 DOM -->
    <div id="main" style="width: 800px; height: 400px;"></div>
    <script>
        // 初始化 ECharts 实例
        var myChart = echarts.init(document.getElementById('main'));
        //配置对象
        var option = {
            series: [
                {
                type: 'wordCloud',
                data: [
                    { name: '柳州', value: 50 },
                    { name: '北京', value: 15 },
                    { name: '上海', value: 15 },
                    { name: '深圳', value: 14 },
                    { name: '成都', value: 11 },
                    { name: '南京', value: 11 },
                    { name: '江西', value: 22 },
                    { name: '湖南', value: 24 },
                    { name: '湖北', value: 35 },
                    { name: '河南', value: 14 },
                    { name: '浙江', value: 18 },
                    { name: '江苏', value: 19 },
                    { name: '福建', value: 35 },
                    { name: '云南', value: 14 },
                    { name: '海南', value: 18 },
                    { name: '四川', value: 19 },
                    // 更多数据...
                ],
                shape: 'triangle',
                sizeRange: [30, 100],
                rotationRange: [-90, 90],
                rotationStep: 45,
                textStyle: {
                    fontFamily: 'sans-serif',
                    normal: {
                        color: function () {
                            return 'rgb(' + [
                                Math.round(Math.random() * 255),
                                Math.round(Math.random() * 255),
                                Math.round(Math.random() * 255),
                            ].join(',') + ')';
                        }
                    }
                },
            }
        ],
};
         // 使用刚指定的配置项和数据显示图表。
        myChart.setOption(option);
    </script>
</body>

</html>

代码解析：

1.引入 ECharts 和词云图文件

为了绘制词云图，我们需要引入 ECharts 的 JavaScript 文件以及词云图文件。

    <script src="https://assets.pyecharts.org/assets/echarts.min.js"></script>
    <script src="https://assets.pyecharts.org/assets/echarts-wordcloud.min.js"></script>

2.初始化 ECharts 实例

var myChart = echarts.init(document.getElementById('main'));

3.配置词云图选项

type: 指定图表类型为 wordCloud，表示词云图。
data: 数据数组，每个元素包含 name（词）和 value（权重）。
shape: 词云图的整体形状，这里设置为 triangle（三角形）。
sizeRange: 词的大小范围，这里设置为 30 到 100。
rotationRange: 词的旋转范围，这里设置为 -90 到 90 度。
rotationStep: 词的旋转步长，这里设置为 45 度。
textStyle: 词的颜色样式，这里使用随机颜色生成函数，每次渲染时随机生成颜色。

var option = {
            series: [
                {
                type: 'wordCloud',
                data: [
                    { name: '柳州', value: 50 },
                    { name: '北京', value: 15 },
                    { name: '上海', value: 15 },
                    { name: '深圳', value: 14 },
                    { name: '成都', value: 11 },
                    { name: '南京', value: 11 },
                    { name: '江西', value: 22 },
                    { name: '湖南', value: 24 },
                    { name: '湖北', value: 35 },
                    { name: '河南', value: 14 },
                    { name: '浙江', value: 18 },
                    { name: '江苏', value: 19 },
                    { name: '福建', value: 35 },
                    { name: '云南', value: 14 },
                    { name: '海南', value: 18 },
                    { name: '四川', value: 19 },
                    // 更多数据...
                ],
                shape: 'triangle',
                sizeRange: [30, 100],
                rotationRange: [-90, 90],
                rotationStep: 45,
                textStyle: {
                    fontFamily: 'sans-serif',
                    normal: {
                        color: function () {
                            return 'rgb(' + [
                                Math.round(Math.random() * 255),
                                Math.round(Math.random() * 255),
                                Math.round(Math.random() * 255),
                            ].join(',') + ')';
                        }
                    }
                },
            }
        ],
};

4.设置图表大小

<div id="main" style="width: 800px; height: 400px;"></div>

词云图效果图如下：

DAMO开发者矩阵

DAMO开发者矩阵，由阿里巴巴达摩院和中国互联网协会联合发起，致力于探讨最前沿的技术趋势与应用成果，搭建高质量的交流与分享平台，推动技术创新与产业应用链接，围绕“人工智能与新型计算”构建开放共享的开发者生态。

更多推荐

14-8 姿势控制：移动（AGI基础理论）

《智能的理论》全书转至目录不同AGI的研究路线对比简化版：《AGI（具身智能）路线对比》，欢迎各位参与讨论、批评或建议。移动表示动物从一个地方独立地和安全地运动到另外一个地方，移动包括步态控制、爬、跑、上\下坡、上\下楼梯，还包括从床上移动，从椅子起来，搬运等内容。其中，步态控制是本文主要的论述内容。移动包括三个要求。第一个要求是行进，通过对上下肢和躯体的控制，确保身体朝着期望的位置或方向移动。第