用Echart完成第七次人口普查_百度 echarts 中国地图人口-CSDN博客

本文链接：https://blog.csdn.net/luog007/article/details/125430426

本文通过HTML和Echarts库展示了中国从1953年至2020年的七次人口普查数据，利用Echarts的折线图功能生动地描绘了人口变化趋势。在普通实现方式中，数据直接内置于HTML中；而在外部加载数据部分，介绍了如何从外部文件导入数据以更新图表。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

一、普通实现方式

<!DOCTYPE html>
<html>
   <head>
       <meta charset="utf-8">
       <title></title>
       <style>
           #box{width: 800px; height: 500px;border: 1px aqua solid;}
       </style>
       <script src="https://cdn.staticfile.org/echarts/4.3.0/echarts.min.js"></script>
       <script src="js/dark.js"></script>
       
   </head>
   <body >
       <div style="width: 500px;height: 200px;">1953年全国人口普查数据58260万人<br/>
1964年全国人口普查数据69458万人<br/>
1982年全国人口普查数据100818万人<br/>
1990年全国人口普查数据113368万人<br/>
2000年全国人口普查数据126583万人<br/>
2010年全国人口普查数据133972万人<br/>
2020年全国人口普查数据141178万人</div>

       <div id="box"></div>
       <script type="text/javascript">
       var myChart=echarts.init(document.getElementById("box"),);
       var option={
           title:{ text:"七次人口普查数据折线图",
                   left:'center'},
           tooltip:{fromatter:'[{b}年:{c}万人]'},
           // legend:{data:[]},
           xAxis:{
               'name':'年',
           data:["1953","1964","1982","1990","2000","2010","2020"],
           },
           yAxis:{'name':'万人'},
           series:[{
               name:"人口普查",
               type:"line",
               data:[58260,69458,100818,113368,126583,133972,141178]
           }]
           };
           myChart.setOption(option)
       </script>
   </body>
</html>