console 命令行工具 X clear
console
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>按用途商品房平均销售价格(中国统计年鉴2021）（元/平方米）</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 = '按用途商品房平均销售价格(中国统计年鉴2021）（元/平方米）';

    let xAxisData = [
        '2005',
        '2006',
        '2007',
        '2008',
        '2009',
        '2010',
        '2011',
        '2012',
        '2013',
        '2014',
        '2015',
        '2016',
        '2017',
        '2018',
        '2019',
        '2020',
    ];
    let data = {
        '住宅': [2937,3119,3645,3576,4459,4725,4993,5430,5850,5933,6473,7203,7614,8553,9287,9980],
        '办公楼': [6923,8053,8667,8378,10608,11406,12327,12306,12997,11826,12914,14332,13543,14379,14315,15138],
    };

    let barAxis = ['北京','天津','河北','山西','内蒙',
        '辽宁','吉林','黑龙江',
        '上海','江苏','浙江','安徽','福建','江西','山东',
        '河南','湖北','湖南','广东','广西','海南',
        '重庆','四川','贵州','云南','西藏',
        '陕西','甘肃','青海','宁夏','新疆']
    let barData = {
        '住宅': [42684,16391,8251,6877,6654,9034,7488,7009,36741,13011,17645,7775,12175,7560,8492,6549,9140,6141,15335,6331,16751,8917,8041,5600,8267,8824,9624,6467,8824,9624,6467,8164,6444,5588],
        '办公楼': [33454,11406,9850,9170,6766,12254,7997,11910,46181,11358,16185,7800,10516,9088,10223,11064,17254,11007,26551,10133,16337,11998,9528,7546,10597,8033,14743,12827,8584,6044,8315],
    };

    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 = {
        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:0,
            }
        },
        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>