数据可视化-浦东新区气温走势图

呆呆小板栗

于 2024-04-20 20:39:13 发布

阅读量312

点赞数 4

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

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

版权

大数据同时被 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 文件中定义容器元素。代码如下:

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

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

4、渲染和显示图表

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

5、完整代码

<!DOCTYPE html>
<html lang="zh-CN" style="height: 100%">
<head>
    <meta charset="utf-8">
</head>
<body style="height: 100%; margin: 0">
<div id="container" style="height: 100%"></div>
<script src="echarts.min.js"></script>
<script src="data.js"></script>
<script type="text/javascript">
    var dom = document.getElementById('container');
    var myChart = echarts.init(dom, null, {
        renderer: 'canvas',
        useDirtyRect: false
    });
    var app = {};
    var option;
    var targetDate = 20160402;
    var data=source.filter(value => {
      let b = value.datetime.toString().includes(targetDate.toString());
      let b1 = value.name=='浦东';
      return b&&b1
    })
    debugger
    option = {
        title: {
            text: '浦东气温走势图'
        },
        tooltip: {
            trigger: 'axis',
            axisPointer: {
                type: 'cross',
                label: {
                    backgroundColor: '#6a7985'
                }
            }
        },
        legend: {
            data: ['max_tempe', 'tempe', 'min_tempe']
        },
        toolbox: {
            feature: {
                saveAsImage: {}
            }
        },
        grid: {
            left: '3%',
            right: '4%',
            bottom: '3%',
            containLabel: true
        },
        xAxis: [
            {
                type: 'category',
                boundaryGap: false,
                data: data.map(value=>value.datetime)
            }
        ],
        yAxis: [
            {
                type: 'value'
            }
        ],
        series: [
            {
                name: 'max_tempe',
                type: 'line',
                stack: 'Total',
                areaStyle: {},
                emphasis: {
                    focus: 'series'
                },
                data: data.map(value=>value.max_tempe)
            },
            {
                name: 'tempe',
                type: 'line',
                stack: 'Total',
                areaStyle: {},
                emphasis: {
                    focus: 'series'
                },
              data: data.map(value=>value.tempe)
            },
            {
                name: 'min_tempe',
                type: 'line',
                stack: 'Total',
                areaStyle: {},
                emphasis: {
                    focus: 'series'
                },
              data: data.map(value=>value.min_tempe)
            }
        ]
    };
    if (option && typeof option === 'object') {
        myChart.setOption(option);
    }
    window.addEventListener('resize', myChart.resize);
</script>
</body>
</html>

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