1.效果图


PS:
表格数据只有第一列为真实获取，剩余为写死的数据。
查询的结果是一个地区的不同属性。
Echarts要展示的为不同地区的同一属性，为方便测试功能，就没有重新制图。

2.注意

加载模块时，只能有一种采用配置路径加载。

为什么呢？
例如，ArcJS的模块加载路径是在https://js.arcgis.com/3.28/，如果echarts也采用这种方法加载模块，那么便会出现这种情况，例如加载echarts.min.js包，在浏览器开发者模式下NetWork中的该资源的下载路径是https://js.arcgis.com/3.28/echarts.min.js显然这个路径下是下载不到这个包的，就会报错，显示echarts.min.js文件下载出错。

解决：
任一个的包部署在本地之后，本地加载。
注意加载的顺序，先加载echarts在加载ArcJS。
**因为Echarts的所有 JavaScript 插件都依赖 jQuery，所以必须放在前边

3. 贴代码
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">

<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title>QueryTask</title>

    <script src="../echarts.min.js"></script>
    <link rel="stylesheet" href="https://js.arcgis.com/3.28/esri/css/esri.css" />
    <script type="text/Javascript" src="https://js.arcgis.com/3.28/"></script>
    <script src="https://code.jquery.com/jquery-1.12.4.js"></script>
    <style type="text/css">
        .MapClass {
            width: 100%;
            height: 520px;
            /* border:1px solid #000; */
        }
    </style>
    <script>
        var beijing0 = "http://localhost:6080/arcgis/rest/services/ecology/beijing_2012_3/MapServer/0";

        var GL_pt_NL_NAME_3;
        var GL_pt_area_td;

        require(["esri/map", "esri/layers/ArcGISDynamicMapServiceLayer", "dojo/dom", "dojo/on", "dojo/query", "esri/tasks/QueryTask", "esri/tasks/query", "esri/symbols/SimpleLineSymbol", "esri/Color",
            "dojo/domReady!"],
            function (Map, ArcGISDynamicMapServiceLayer, dom, on, query, QueryTask, Query, SimpleLineSymbol, Color) {
                var map = new Map("mapDiv");
                var layer = new ArcGISDynamicMapServiceLayer("http://localhost:6080/arcgis/rest/services/ecology/beijing_2012_3/MapServer");
                map.addLayer(layer)

                //给属性查询按钮添加click事件
                on(dom.byId("Btn_sx"), "click", function (e) {
                    // var text = document.getElementById("te").value;

                    var text = $("#te").val();

                    //定义查询对象
                    var queryTask = new QueryTask(beijing0);
                    //定义查询参数对象
                    var query = new Query();
                    //查询条件，类似于sql语句的where子句
                    query.where = "FID = " + text;
                    //返回的字段信息：*代表返回全部字段
                    query.outFields = ["*"];

                    //是否返回几何形状
                    query.returnGeometry = true;
                    //执行属性查询
                    var a = queryTask.execute(query, showQueryResult);
                    // alert(re());

                })
                //属性查询完成之后，用showQueryResult来处理返回的结果
                function showQueryResult(queryResult) {
                    if (queryResult.features.length >= 1) {
                        for (var i = 0; i < queryResult.features.length; i++) {
                            var graphic = queryResult.features[i];

                            var pt_NL_NAME_3 = graphic.attributes["NL_NAME_3"];
                            var pt_area_td = graphic.attributes["土地面积"];


                            GL_pt_NL_NAME_3 = pt_NL_NAME_3;
                            GL_pt_area_td = pt_area_td;
                        }
                    }

                    var x = document.getElementById("main");
                    var myChart = echarts.init(x);
                    var option = {
                        tooltip: { show: true },
                        legend: { data: ['123'] },
                        xAxis: [{ type: 'category', data: [GL_pt_NL_NAME_3, "朝阳区", "大厂区"] }],
                        yAxis: [{ type: 'value' }],
                        series: [{ "name": "销量", "type": "bar", "data": [pt_area_td, 1500, 1000] }]
                    };
                    myChart.setOption(option);


                }

            });

    </script>
</head>

<body>
    <input type="text" value="在此处输入需要查询的XX" id="te">
    <input type="button" value="属性查询" id="Btn_sx" />

    <div id="mapDiv" class="MapClass"></div>

    <div id="main" style="height:400px;"></div>

</body>

</html>