Echatrs实现人口普查代码

Yushijuj

已于 2022-06-15 10:14:15 修改

阅读量151

点赞数

文章标签： echarts javascript 前端

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

本文链接：https://blog.csdn.net/CITTB/article/details/125291655

版权

文章目录

一、在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>