解析Json数据

JSON文件

{
    "status": 200,
    "msg": "OK",
    "data": [{
        "G3": [{
            "name": "溴甲烷",
            "value": 1.588690
        }, {
            "name": "乙酸甲酯",
            "value": 0.183660
        }, {
            "name": "环己酮",
            "value": 0.051920
        }, {
            "name": "醋酸",
            "value": 0.030360
        }, {
            "name": "丙酮",
            "value": 0.025200
        }]
    }, {
        "G4": [{
            "name": "甲苯",
            "value": 2.661300
        }, {
            "name": "间/对二甲苯",
            "value": 2.519290
        }, {
            "name": "溴甲烷",
            "value": 1.711470
        }, {
            "name": "乙醛",
            "value": 0.571520
        }, {
            "name": "间甲基苯甲醛",
            "value": 0.540860
        }]
    }, {
        "G5-1": [{
            "name": "溴甲烷",
            "value": 1.574330
        }, {
            "name": "乙醇",
            "value": 0.024880
        }, {
            "name": "乙酸甲酯",
            "value": 0.015800
        }, {
            "name": "正丁醇",
            "value": 0.014480
        }, {
            "name": "二硫化碳",
            "value": 0.011060
        }]
    }, {
        "G6-1": [{
            "name": "溴甲烷",
            "value": 2.084520
        }, {
            "name": "乙酸甲酯",
            "value": 0.023500
        }, {
            "name": "正丁醇",
            "value": 0.019370
        }, {
            "name": "环己酮",
            "value": 0.014870
        }, {
            "name": "乙醇",
            "value": 0.014460
        }]
    }, {
        "G7-1": [{
            "name": "溴甲烷",
            "value": 1.483590
        }, {
            "name": "醋酸",
            "value": 0.024980
        }, {
            "name": "间/对二甲苯",
            "value": 0.021030
        }, {
            "name": "乙酸甲酯",
            "value": 0.018380
        }, {
            "name": "正丁醇",
            "value": 0.016720
        }]
    }, {
        "G8-1": [{
            "name": "甲醇",
            "value": 66.044720
        }, {
            "name": "乙酸甲酯",
            "value": 35.871750
        }, {
            "name": "甲苯",
            "value": 11.085750
        }, {
            "name": "间/对二甲苯",
            "value": 7.264780
        }, {
            "name": "乙烷",
            "value": 5.579660
        }]
    }, {
        "G20": []
    }]
}

HTML文件

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title></title>
    <!--引入脚本文件 jquery-->
    <script type="text/javascript" src="js/jquery-3.6.0.min.js"></script>
    <!--引入echart脚本文件 jquery-->
    <script type="text/javascript" src="js/echarts.min.js"></script>
    <style type="text/css">
        .bar {
            width: 200px;
            height: 200px;
            float: left;
        }
    </style>
    <script type="text/javascript">
        $(document).ready(function () {
            $("#btnSelect").click(function () { //ID名为btnSelect的按钮增加事件，点击的时候请求数据，加载图表
                $.ajax({  //调用前端API固定用法
                    method: "get",
                    url: "http://....../EIM-SERVICE-TEST/api/fingerprint/siteDischarge/queryBingTuData?entId=" + $("#entId").val() + "&outfallIds=" + $("#outfallIds").val() + "&particularYear=" + $("#particularYear").val() + "&sort=" + $("#sort").val() + "",/*这里要写nginx访问的全路径*/
                    data: {},
                    dataType: "json",  // 处理Ajax跨域问题
                    success: function (data) {
                        //解析数据，这个地方需要留意返回的数据格式
                        var item = data.data;
                        for (var i = 0; i < item.length; i++) {
                            for (var k in item[i]) {//遍历packJson 对象的每个key/value对,k为key
                                //console.log(k + " " + item[i][k]); 
                                initChart(k, item[i][k]);
                            }
                        }
                    }
                });
            })
            function initChart(pfk, jsonData) {
                // 基于准备好的dom，初始化echarts实例
                var myChart = echarts.init(document.getElementById(pfk));
                // 指定图表的配置项和数据
                var option = {
                    title: {
                        text: pfk,
                        left: 'center'
                    },
                    tooltip: {},
                    series: [
                      {
                          name: '销量',
                          type: 'pie',
                          radius: '50%',
                          data: jsonData
                      }
                    ]
                };

                // 使用刚指定的配置项和数据显示图表。
                myChart.setOption(option);
            }
        });
    </script>
</head>
<body>
    <table>
        <tr>
            <td>entId</td>
            <td>
                <input type="text" id="entId" value="320700000204" style="width: 200px;" /></td>
        </tr>
        <tr>
            <td>outfallIds</td>
            <td>
                <input type="text" id="outfallIds" value="G3,G4,G5-1,G6-1,G7-1,G8-1,G20" style="width: 200px;" /></td>
        </tr>
        <tr>
            <td>particularYear</td>
            <td>
                <input type="text" id="particularYear" value="2020" style="width: 200px;" /></td>
        </tr>
        <tr>
            <td>sort</td>
            <td>
                <input type="text" id="sort" value="5" style="width: 200px;" /></td>
        </tr>
        <tr>
            <td colspan="2">
                <input type="button" id="btnSelect" value="查询" /><br />
            </td>
        </tr>
    </table>
    <div id="G3" class="bar"></div>
    <div id="G4" class="bar"></div>
    <div id="G5-1" class="bar"></div>
    <div id="G6-1" class="bar"></div>
    <div id="G7-1" class="bar"></div>
    <div id="G8-1" class="bar"></div>
    <div id="G20" class="bar"></div>
</body>
</html>

 

posted @ 2021-12-10 14:26  关陈七  阅读(24)  评论(0)    收藏  举报