console 命令行工具 X clear
console
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>七次全国人口普查人口基本情况</title>
    <script crossorigin="anonymous"
            integrity="sha512-Rw7ABPI0CoYquQZEa2QMaeMR5q5XESMNp4uGOsXPzU9JnvWW6S27+pz8fAjVlL7/kq6Q12MtGVcPkJya2blqAg=="
            src="https://lib.baomitu.com/echarts/5.2.0/echarts.js"></script>
    <style>
        html, body {
            margin: 0;
            padding: 0;
            width: 100%;
            height: 100%;
            overflow-x: hidden;
        }

        #line {
            width: 65%;
            height: 470px;
            background: #fdfdfd;
            border:1px solid #ccc;
            padding: 20px;
            margin: 20px auto;
        }
        #bar {
            width: 65%;
            height: 470px;
            background: #fdfdfd;
            border:1px solid #ccc;
            padding: 20px;
            margin: 20px auto;
        }

        @media screen and (max-width: 1200px) {
            #line, #bar {
                width: 90%;
            }
        }

    </style>
</head>
<body>
<div id="line">

</div>
<div id="bar">

</div>
</body>
<script>
    let title = '七次全国人口普查人口基本情况(2020总人口 141178万人)';

    let xAxisData = [
        '1953',
        '1964',
        '1982',
        '1990',
        '2000',
        '2010',
        '2020',
        "2023"
    ];
    let data = {
        '0-14岁(%)': [36.28,40.69,33.59,27.69,22.89,16.60,17.95,17.6],
        '15-64岁(%)': [59.31,55.75,61.50,66.74,70.15,74.53,68.55,61.3],
        '65岁以上(%)': [4.41,3.56,4.91,5.57,6.96,8.87,13.50,21.1],
    };

    let barTitle = '分地区人口数'
    let barAxis = ['北京','天津','河北','山西','内蒙',
        '辽宁','吉林','黑龙江',
        '上海','江苏','浙江','安徽','福建','江西','山东',
        '河南','湖北','湖南','广东','广西','海南',
        '重庆','四川','贵州','云南','西藏',
        '陕西','甘肃','青海','宁夏','新疆']
    let barData = {
        '人口': [21893095,13866009,74610235,34915616,24049155,42591407,24073453,31850088,24870895,
            84748016,64567588,61027171,41540086,45188635,101527453,99365519,57752557,66444864,126012510,50126804,
        10081232,32054159,83674866,38562148,47209277,3648100,39528999,25019831,5923957,7202654,25852345],
    };


    let line = echarts.init(document.getElementById('line'))

    let option = {
        color:[
            '#2fb451',
            '#4ec8e0',
            '#ae7bec',
            '#da3966',
            '#b00505',
        ],
        title: {
            text: 'load...'
        },
        tooltip: {
            trigger: 'axis'
        },
        legend: {
            top:40,
            data: []
        },
        grid: {
            top:'15%',
            left: '3%',
            right: '4%',
            bottom: '3%',
            containLabel: true
        },
        toolbox: {
            feature: {
                saveAsImage: {}
            }
        },
        xAxis: {
            type: 'category',
            boundaryGap: true,
            data: [],
            axisLabel:{
                interval:'auto',
            }
        },
        yAxis: {
            type: 'value'
        },
        series: [
            {
                name: 'Email',
                type: 'line',
                stack: 'Total',
                data: [120, 132, 101, 134, 90, 230, 210]
            },
        ]
    }

    function draw() {
        option.title.text = title;
        option.xAxis.data = xAxisData;
        let legend = [];
        option.series = [];
        for (let k in data) {
            legend.push(k);
            option.series.push({
                name: k,
                type: 'line',
                data: data[k]
            })
        }
        option.legend.data = legend;

        line.setOption(option);
    }

    draw();

    let bar = echarts.init(document.getElementById('bar'));
    let optionBar = {
        title:{
          text:barTitle,
        },
        tooltip: {
            trigger: 'axis'
        },
        grid: {
            top:'15%',
            left: '3%',
            right: '4%',
            bottom: '3%',
            containLabel: true
        },
        legend: {
            top:40,
            data: []
        },
        toolbox: {
            feature: {
                saveAsImage: {}
            }
        },
        xAxis: {
            type: 'category',
            boundaryGap: true,
            data: barAxis,
            axisLabel:{
                interval:'auto',
            }
        },
        yAxis: [
            {
                type: 'value'
            }
        ],
        series: [

        ]
    }

    let barLegend = [];
    for(let k in barData){
        barLegend.push(k);
        optionBar.series.push(
            {
                name: k,
                type: 'bar',
                data: barData[k]
            }
        )

    }
    optionBar.legend.data = barLegend
    bar.setOption(optionBar)


</script>
</html>