数据可视化-上海地区风速变化折线图

呆呆小板栗

已于 2024-04-20 19:02:26 修改

阅读量314

点赞数 5

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

于 2024-04-20 18:44:29 首次发布

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

版权

大数据同时被 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、提取日期数据

提取不同的站点名称跟日期数据用于创建x轴跟图例。代码如下：

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

创建一个 echarts 实例并配置折线图选项。代码如下：

5、渲染和显示图表

设置echarts实例点击事件，代码如下：

6、完整代码

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>上海地区风速变化折线图</title>
    <!-- 引入ECharts库 -->
    <script src="echarts.min.js"></script>
    <script src="data.js"></script>
</head>
<body>
<!-- 图表容器 -->
<div id="line-chart" style="width: 1000px; height: 600px;"></div>
<script>
    // 提取特定日期（20160401）的数据
    var targetDate = 20160401;
    var dataForTargetDate = source.filter(function (item) {
        return item.datetime.toString().includes(targetDate.toString());
    });
    dataForTargetDate.forEach(value => value.datetime = formatDateTime(value.datetime))
    // 提取所有不同的站点名称，用于创建图例
    var legendData = [...new Set(dataForTargetDate.map(item => item.name))];
    // 提取所有不同的日期时间值，用于创建x轴
    var datetimeValues = [...new Set(dataForTargetDate.map(item => item.datetime))];
    // 构建 dataset 的维度定义
    var dimensions = [
        {name: 'datetime', type: 'wind_speed'}
    ];
    // 构建 dataset 的数据
    var seriesData = legendData.map(function (name) {
        return {
            name: name,
            type: 'line',
            encode: {
                x: 'datetime',
                y: 'wind_speed'
            },
            data: dataForTargetDate.filter(function (item) {
                return item.name === name;
            }).map(function (item) {
                return [item.datetime, item.wind_speed];
            })
        };
    });
    // 创建ECharts实例
    var myChart = echarts.init(document.getElementById('line-chart'));
    // 配置折线图选项
    var option = {
        title: {
            text: '上海各地风速变化'
        },
        legend: {
            data: legendData,
            top: '5%'
        },
        grid: {
            top: '10%'
        },
        xAxis: {
            type: 'time',
            splitLine: {
                show: false
            },
            data: datetimeValues
        },
        yAxis: {
            type: 'value'
        },
        series: seriesData
    };
    // 使用配置项显示折线图
    myChart.setOption(option);
    // 添加事件监听，用于在点击时触发 alert 显示数据
    myChart.on('click', function (params) {
        if (params.componentType === 'series') {
            var dataItem = params.data;
            if (dataItem) {
                // 在这里触发 alert 显示数据，例如：
                alert('站点：' + params.seriesName + '\n' +
                    '时间：' + dataItem[0] + '\n' +
                    '风速：' + dataItem[1] );
            }
        }
    });
    window.addEventListener('resize', myChart.resize);
    function formatDateTime(input) {
        // 将数字转换为字符串
        var inputStr = input.toString();
        // 校验输入是否合法，必须是12位数字
        if (/^\d{12}$/.test(inputStr)) {
            // 提取年、月、日、小时和分钟
            var year = inputStr.slice(0, 4);
            var month = inputStr.slice(4, 6);
            var day = inputStr.slice(6, 8);
            var hour = inputStr.slice(8, 10);
            var minute = inputStr.slice(10, 12);
            // 格式化为标准时间格式
            var formattedDate = year + '-' + month + '-' + day + ' ' + hour + ':' + minute;
            return formattedDate;
        } else {
            return 'Invalid input';
        }
    }
</script>
</body>
</html>

右键index.html，选择Open with live server：