realize1020 2021-10-14 16:14 采纳率: 28.6%
浏览 43
已结题

接口测试时,使用ECharts显示图的时候前端页面遇到了问题

接口文档里显示返回一个JSONArarry格式的数据,如下图所示

img

然后我测试接口,数据返回成功了,但是同时课写方法的时候返回值类型是一个Map,返回的是一个JSONObject,如下图所示

img

这个jsonStr的格式是这样的


```html
{
"msg":"ok",
"code":0,
"data":[{"standardNumber":"GB 18484-2020","draftCompany":"沈阳环境科学研究院;中国科学院大学;生态环境部对外合作与交流中,心;生态环境部环境标准研究所;国家环境保护危险废物处置工程技术(沈阳)中心","publishTime":"2021年07月01日","englishStandardName":"Standard for pollution control on hazardous waste incineration","standardState":"将实施","beCited":["HJ 582-2010"],"replace":["GB 18484-2001"],"cite":[],"chineseStandardName":"《危险废物焚烧污染控制标准》","keyWord":"废物","standardLevel":"国家标准","beReplace":[]},
{"standardNumber":"HJ 582-2010","draftCompany":["环境保护部环境工程评估中心","伊尔姆环境资源管理咨询(上海)有限公司,环境保护部环境发展中心","上海化工研究院","沈阳化工研究院"],"publishTime":"2010年09月06日","englishStandardName":"Technical Guideline for Environmental Impact Assessment–Constructional project of Pesticide","standardState":"现行","chineseStandardName":"环境影响评价技术导则 农药建设项目","keyWord":["环境","技术导则","农药","项目"],"standardLevel":"行业标准"},
{"standardNumber":"GB 18484-2001","draftCompany":[],"keyWord":[]}
    ]
}

然后在展示图表的前端js里报错了,图没展示出来,不知到是什么原因,报错显示无法转化成一个Objcet,报错如下图

![img](https://img-mid.csdnimg.cn/release/static/image/mid/ask/811952891436177.png "=600 #left")

js代码如下:
// 初始化echarts
function initEcharts() {
    // 获取数据
    $.ajax({
        url : context + "/service/pub/ssquoterelation/standardCharts",
        data : { "standardId" : standardId },
        type : 'post',
        dataType : 'json',
        success : function(res) {
            var currentGraph = res;
            var echartDiv = document.getElementById("tpecharts");
            myChart = echarts.init(echartDiv);
            var option = {
                    tooltip : {
                        show : false
                    },
                    legend: {
                        type: 'scroll',
                        orient: 'vertical',
                        right: 100,
                        top: 80,
                        bottom: 20,
                        data: [ "标准", "引用", "被引用", "替代", "被替代","状态","关键词","起草单位","类型" ],
                        show : true
                    },
                    animation : false,
                    color : [ "#A70803", "#109C41", "#2893EF", "#1B08CD", "#9222CA", "#FF5F00", "#FFA900", "#2F4554", "#A5A552" ],
                    series : [ {
                        name : '',
                        type : "graph",
                        layout : "force",
                        draggable : true,
                        data : Object.values(currentGraph.nodes),
                        links : Object.values(currentGraph.links),
                        categories : [{name:"标准"},{name:"引用"},{name:"被引用"},{name:"替代"},{name:"被替代"},{name:"状态"},{name:"关键词"},{name:"起草单位"},{name:"类型"}],
                        roam : true,
                        cursor : "pointer",
                        focusNodeAdjacency : false,
                        symbolSize : 30,
                        edgeSymbol : ["circle","arrow"],
                        edgeSymbolSize : [4,8],
                        edgeLabel : {
                            normal : {
                                show : true,
                                textStyle : {fontSize : 10},
                                formatter : "{c}"
                            }
                        },
                        itemStyle : {
                            normal : {
                                borderColor : "#fff",
                                borderWidth : 1,
                                shadowBlur : 10,
                                shadowColor : "rgba(0, 0, 0, 0.3)"
                            }
                        },
                        label : {
                            normal : {
                                show : true,
                                textStyle : {
                                    fontSize : 12
                                }
                            }
                        },
                        lineStyle : {
                            color : "target",
                            opacity : 0.6,
                            curveness : 0.3
                        },
                        emphasis : {
                            lineStyle : {
                                width : 5
                            }
                        },
                        force : {
                            layoutAnimation : false,
                            repulsion : 500
                        }
                    }]
                };
            console.log(currentGraph);
            myChart.setOption(option);
        }
    });
}
jsp页面如下

<!-- 标准图谱 -->
        <div class="class-knowle">
            <div class="frame">知识图谱</div>
            <div class="glasses"></div>
            <div class="tpecharts" id="tpecharts"></div>
        </div>

请教使用过Echarts的兄弟是什么问题,是在后端返回值得重写写成JSONArray类型的么,还是前端js需要处理一下这个格式的数据呢

  • 写回答

2条回答 默认 最新

  • 崽崽的谷雨 2021-10-14 17:36
    关注

    你需要处理成 echarts可以识别得数据结构 。
    比如折线就是一个数组 。

    本回答被题主选为最佳回答 , 对您是否有帮助呢?
    评论
查看更多回答(1条)

报告相同问题?

问题事件

  • 系统已结题 10月23日
  • 已采纳回答 10月15日
  • 创建了问题 10月14日

悬赏问题

  • ¥20 关于游戏c++语言代码问题
  • ¥15 如何制作永久二维码,最好是微信也可以扫开的。(相关搜索:管理系统)
  • ¥15 delphi indy cookie 有效期
  • ¥15 labelme打不开怎么办
  • ¥35 按照图片上的两个任务要求,用keil5写出运行代码,并在proteus上仿真成功,🙏
  • ¥15 免费的电脑视频剪辑类软件如何盈利
  • ¥30 MPI读入tif文件并将文件路径分配给各进程时遇到问题
  • ¥15 pycharm中导入模块出错
  • ¥20 Ros2 moveit2 Windows环境配置,有偿,价格可商议。
  • ¥15 有关“完美的代价”问题的代码漏洞