数据可视化-上海各地区风速热力图

呆呆小板栗

已于 2024-04-20 18:56:40 修改

阅读量341

点赞数 4

分类专栏：大数据数据可视化文章标签：大数据数据可视化

于 2024-04-19 23:13:13 首次发布

本文链接：https://blog.csdn.net/m0_74394367/article/details/137980062

版权

大数据同时被 2 个专栏收录

48 篇文章 0 订阅

订阅专栏

数据可视化

21 篇文章 0 订阅

订阅专栏

数据可视化

上海各地区风速热力图

一、实验名称

上海各地区风速热力图

二、实验目的

通过该实验的实践，要求学生能够掌握JavaScript的基本原理并能够熟练应用JavaScript制作可视化图表。

三、实验原理

JavaScript由Netscape（网景）公司开发，起初命名为LiveScript，也是面向对象的语言，无需编译可由浏览器直接解释运行。

JavaScript是直译式脚本语言，为网页添加各种动态效果，不需编译通过某种解释器运行。

四、实验步骤

一、项目搭建

1、新建项目

桌面新建文件夹，命名为Echarts-demo，使用VScode工具打开文件夹。

打开VScode，点击文件/打开文件夹，选择文件夹。

2、新建index.html文件

3、下载数据文件并加入到Echarts-demo文件夹下

二、代码实现

1、引入 Echarts 库

在 HTML 文件中引入数据文件以及echarts.min.js文件，代码如下：

2、创建图表容器

在 HTML 文件中定义一个具有唯一 id 的容器元素，用于承载图表

代码如下:

3、初始化图表对象

使用 echarts.init 方法传入容器元素的 id，创建一个 echarts 实例。代码如下：

4、设置图表配置项和数据

通过调用实例的 setOption 方法，传入一个包含配置项和数据的对象，来定义图表的样式和展示数据。代码如下：

5、渲染和显示图表

通过setOption函数设置给echarts实例对象，代码如下：

6、完整代码

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>上海市地图</title>
    <!-- 引入ECharts库 -->
    <script src="echarts.min.js"></script>
    <script src="data.js"></script>
    <script src="shanghai.js"></script>
</head>
<body>
<!-- 图表容器 -->
<div id="map" style="width: 100%; height: 800px;"></div>
<script>
    // 引入上海的GeoJSON数据文件
    echarts.registerMap('shanghai', shanghai);
    // 创建ECharts实例
    var myChart = echarts.init(document.getElementById('map'));
    // 配置地图选项
    let data = source.filter(v => v.datetime == 201604010000).map(function (item) {
        let name = item.name;
        if (name == '浦东') {
            name = name + '新区'
        } else {
            name = name + '区'
        }
        return {
            name: name,
            value: item.max_speed
        }
    });
    // 计算数据的最大值和最小值
    var minValue = Math.min.apply(null, data.map(function (item) {
        return item.value;
    }));
    var maxValue = Math.max.apply(null, data.map(function (item) {
        return item.value;
    }));
    var option = {
        tooltip: {
            trigger: 'item',
            formatter: '{b}'
        },
        title: {
            text: '上海各地风速'
        },
        visualMap: {
            min: minValue, // 最小值
            max: maxValue, // 最大值，根据你的数据范围设置
            left: '10', // visualMap 组件在容器中的水平位置
            top: 'bottom', // visualMap 组件在容器中的垂直位置
            text: ['高', '低'], // 图例的标签，根据数据含义设置
            calculable: true, // 是否支持手动调整
            inRange: {
                color: ['#F5DEB3', '#FF4500'] // 定义颜色范围
            }
        },
        series: [{
            type: 'map',
            map: 'shanghai',
            zoom: 1.2, // 初始缩放级别
            roam: true, // 启用缩放和拖动
            selectedMode: 'single', // 单选模式
            label: {
                show: true,
                formatter: '{b}', // 显示地名
                fontSize: 12,
                color: 'white'
            },
            emphasis: {
                label: {
                    show: true
                }
            },
            data: data
        }]
    };
    console.info(option)
    // 设置地图点击事件
    myChart.on('click', function (params) {
        // 获取点击地区的名称
        var cityName = params.name;
        var value = params.value;
        // 在这里替换成你的数据弹出方式，例如使用alert
        alert('你点击了 ' + cityName + '\t' + value);
    });
    // 使用配置项显示地图
    myChart.setOption(option);
    window.addEventListener('resize', myChart.resize);
</script>
</body>
</html>

右键index.html，选择Open with live server（需安装live server插件）：