Echatrs实现人口普查代码

原创已于 2022-06-15 10:14:15 修改 · 252 阅读

2 ·

CC 4.0 BY-SA版权

文章标签：

#echarts #javascript #前端

于 2022-06-15 10:12:52 首次发布

本文档介绍了如何在Visual Studio Code中创建一个项目文件夹，导入JavaScript文件，并构建一个HTML页面来展示七次全国人口普查的数据。利用ECharts库和jQuery，创建了一个折线图进行数据可视化，展示了从1953年至2020年的人口变化情况。

文章目录

一、在visual Studio Code创建文件夹population

在这里插入图片描述

二、建立子文件夹js,并导入js相关文件

在这里插入图片描述

三、建立HTML 文件

在这里插入图片描述

源代码

<!DOCTYPE html>
<html>
    <head>
        <title>七次全国人口普查数据</title>
        <script src="js/echarts.min.js"></script>
        <script src="js/jquery.min.js"></script>
        <style>
            #box {
                width: 600px;
                height: 400px;
                border: 1px solid cornflowerblue;
            }
        </style>
    </head>
    <body>
        <div id="box"></div>
        <script>
            var chartDom = document.getElementById('box');
            var myChart = echarts.init(chartDom);
            var option;
 
            option = {
                title: {
                    text: '七次全国人口普查数据',
                    subtext: '官方数据',
                    left: 'center'
                },
                xAxis: {
                    name: '年份',
                    data:['1953','1964','1982','1990','2000','2010','2020']
                },
                yAxis: {
                    name: '万人'
                },
                tooltip: {
			        trigger: 'item',
			      },
                series: [{
                    data: [58260,69458,100818,113368,126583,133972,141178],
                    type: 'line' //图表类型 折线图
                }]
            };
            option && myChart.setOption(option);
        </script>
    </body>
<html>