javascript html css echarts 静态空气质量数据可视化

        空气质量监测是现代城市管理的重要组成部分。通过使用JavaScript的ECharts库，我们可以创建一个简单而强大的静态空气质量数据可视化。

准备工作

首先，确保你已经引入了ECharts库，jquery库，xlsx库

<script type="text/javascript" src="../static/js/jquery.js"></script>
<script type="text/javascript" src="../static/js/echarts.min.js"></script>
<script type="text/javascript" src="../static/js/china.js"></script>
<script type="text/javascript" src="../static/js/js.js"></script>
<script src="../static/js/xlsx.core.min.js"></script>
   <link rel="stylesheet" href="../static/css/style.css"/>

HTML结构

创建一个简单的HTML结构来容纳可视化图表

<div class="mainbox">
    <ul class="clearfix nav1">
        <li style="width: 50%">
            <div class="box">
                <div class="tit">污染相关性</div>
                <div class="boxnav" style="height: 450px">
                    <div class="yqlist">
                        <div class="" style="height: 450px" id="echart1"></div>
                    </div>
                </div>
            </div>
            <div class="box">
                <div class="tit">2022年平均空气质量最差的城市污染物占比</div>
                <div class="boxnav" style="height:480px ">
                    <div class="" style="height: 480px" id="echart2"></div>
                </div>
            </div>
        </li>
</ul>
</div>

JavaScript代码

读取xlxs文件数据 将数据赋予变量data

var data; 
async function fetchDataAndReadWorkbook() {
            try {
                const response = await fetch('../csv/全国省会污染物变量数据.xlsx');
                if (!response.ok) {
                    throw new Error(`Failed to fetch the file. HTTP status ${response.status}`);
                }

                const file = await response.blob();
                if (!file) {
                    throw new Error('Failed to get the file content.');
                }
                data = await readWorkbookFromLocalFile(file);
           

            } catch (error) {
                console.error('Error fetching or reading the file:', error);
            }
        }

async function readWorkbookFromLocalFile(file) {
            return new Promise((resolve) => {
                var reader = new FileReader();

                reader.onload = function (e) {
                    var data = e.target.result;
                    var workbook = XLSX.read(data, {type: 'arraybuffer'});

                    const resultData = [];
                    workbook.SheetNames.forEach(function (sheetName, index) {
                        var data_ = {}
                        const sheet = workbook.Sheets[sheetName];
                        data_[index + 1] = XLSX.utils.sheet_to_json(sheet);
                        resultData.push(data_)
                    });
                    resolve(resultData);
                };
                reader.readAsArrayBuffer(file);
            });
        }

对数据进行处理

 function echart1_data(province){
            var APIdatas = []
                var PM2datas = []
                var PM10datas = []
                var SO2datas = []
                var NO2datas = []
                var COdatas = []
                var O3datas = []

                for (var i = 1; i <= data.length; i++) {
                    const api = data[i - 1]['' + i].filter(item => item.省份 === province).map(x => x.AQI)[0]
                    const PM2 = data[i - 1]['' + i].filter(item => item.省份 === province).map(item => item['PM2.5(细颗粒物)']);
                    const PM10 = data[i - 1]['' + i].filter(item => item.省份 === province).map(item => item[' PM10(可吸入颗粒物)']);
                    const SO2 = data[i - 1]['' + i].filter(item => item.省份 === province).map(item => item[' SO2(二氧化硫)']);
                    const NO2 = data[i - 1]['' + i].filter(item => item.省份 === province).map(item => item[' NO2(二氧化氮)']);
                    const CO = data[i - 1]['' + i].filter(item => item.省份 === province).map(item => item[' CO(一氧化碳)']);
                    const O3 = data[i - 1]['' + i].filter(item => item.省份 === province).map(item => item[' O3(臭氧)']);
                    APIdatas.push(api[0])
                    PM2datas.push(PM2[0])
                    PM10datas.push(PM10[0])
                    SO2datas.push(SO2[0])
                    NO2datas.push(NO2[0])
                    COdatas.push(CO[0])
                    O3datas.push(O3[0])
                }

                echart1([APIdatas,PM2datas,PM10datas,SO2datas,NO2datas,COdatas,O3datas])
        }

echarts代码

 function echart1(resultData) {

            var option = {
                title: {
                    text: `${province}12个月污染物情况`,
                    textStyle: {
                        color: '#fff',
                        fontSize: 18,
                        lineHeight: 10,
                    },
                },
                tooltip: {
                    trigger: 'axis'
                },
                grid: {
                    left: '3%',
                    right: '10%',
                    bottom: '3%',
                    top:'15%',
                    containLabel: true
                },
                legend: {
                    right: '10%',
                    top: '8%',
                    textStyle: {
                        color: "#fff"
                    },
                },
                xAxis: {
                    type: 'category',
                    // boundaryGap: false,
                    data: ['一月', '二月', '三月', '四月', '五月', '六月', '七月', '八月', '九月', '十月', '十一月', '十二月'],
                    axisLabel: {
                        textStyle: {
                            color: "rgba(255,255,255,.6)",
                            fontSize: 14,

                        },
                    }
                },
                yAxis: {
                    type: 'value',
                    axisLabel: {
                        formatter: '{value} ',
                        textStyle: {
                            color: "rgba(255,255,255,.6)",
                            fontSize: 14,

                        },
                    }
                },
                series: [
                    {
                        name: 'PM2.5(细颗粒物)',
                        type: 'line',
                        data: resultData[1],

                    },
                    {
                        name: 'PM10(可吸入颗粒物)',
                        type: 'line',
                        data: resultData[2],

                    },
                    {
                        name: 'SO2(二氧化硫)',
                        type: 'line',
                        data: resultData[3],

                    },
                    {
                        name: 'NO2(二氧化氮)',
                        type: 'line',
                        data: resultData[4],

                    },
                    {
                        name: 'CO(一氧化碳)',
                        type: 'line',
                        data: resultData[5],

                    },
                    {
                        name: 'O3(臭氧)',
                        type: 'line',
                        data: resultData[6],

                    },


                ]
            };
            mychart1.setOption(option);


        }

map地图实现点击更换省份数据

mychart.on('click', function (params) {
                if (params.name) {
                    console.log(params.name)
                    province = params.name

                    mychart1.clear()
                    mychart3.clear()
                    echart1_data(province)
                    echart3_data(province)
                }
            });

最终效果

项目视频地址

echarts图表，动态点击省份切换数据_哔哩哔哩_bilibili