Echarts通过Ajax请求Struts2

一，如题，主要解决Echarts通过Ajax请求Struts2得到echarts图表的json数据并展示。
二,前端页面需要导入的js文件如下：

<script type="text/javascript" src="echarts/jquery.js"></script> 
<script type="text/javascript" src="echarts/echarts.js"></script>

需要的工具：
1.struts2-json-plugin-2.3.4
(参考我上篇博文：https://blog.csdn.net/weixin_36413887/article/details/80307083)
2.alibaba的fastjson工具
(链接：https://pan.baidu.com/s/1k6pa_GRWOmW-lynCVoRvtA 密码：ycc6)
三，前端Ajax如下，前端数据为list集合，这里需要注意下Ajax的url路径问题，一定要写对。
(1)struts.xml配置如下：

<!-- 响应ajax的包 -->
    <package name="default1" namespace="/demo1" extends="json-default">
        <!-- ajax请求的action -->
        <action name="data_*" class="com.caseaction.echartsresponse" method="{1}">
        <!-- 返回类型为json -->
              <result type="json">
                  <param name="root">jsob</param>
              </result>
        </action>
    </package>

(2)echarts代码：

<!-- 可视化关系图Ajax请求 -->
<div id="echarts_sum" style="width: 1000%;height: 900%;border:0px solid;" >
<!-- <h3><span style="white-space:normal;word-wrap:break-word;" >可视化</span></h3> -->                                                     
<script> // 指定图表的配置项和数据 var option = { title: { text: '关键因子—引用法条',textStyle:{ color:'#FF0000',//0066FF淡蓝色 //fontFamily:'Arial,宋体,sans-serif', fontStyle:'normal',fontWeight:'normal',fontSize: 20 } },toolbox: { show : true,feature : { saveAsImage: {//显示保存图片按钮 show: true },} },tooltip: {},animationDurationUpdate: 1500,animationEasingUpdate: 'quinticInOut',series : [ { type: 'graph',layout: 'none',legendHoverLink : true,//是否启用图例 hover(悬停) 时的联动高亮。 symbolSize: 50,roam: true,label: { normal: { show: true } },draggable : true,//节点是否可拖拽，只在使用力引导布局的时候有用。 focusNodeAdjacency : true,//是否在鼠标移到节点上的时候突出显示节点以及节点的边和邻接节点。 symbol:'roundRect',//color:'#6699FF', symbolSize:[150,110],edgeSymbol: ['circle','arrow'],edgeSymbolSize: [4,20],edgeLabel: { normal: { textStyle: { fontSize: 20 } } },data: [],// links: [], links: [],lineStyle: { normal: { opacity: 0.5,width: 2,curveness: 0 } },label : { //=============图形上的文本标签 normal : { show : true,//是否显示标签。 position : 'inside',//标签的位置。['50%','50%'] [x,y] textStyle : { //标签的字体样式 color : '#ffffff',//字体颜色 fontStyle : 'normal',//文字字体的风格 'normal'标准 'italic'斜体 'oblique' 倾斜 fontWeight : 'bolder',//'normal'标准'bold'粗的'bolder'更粗的'lighter'更细的或100 | 200 | 300 | 400... fontFamily : 'sans-serif',//文字的字体系列 fontSize :10,//字体大小 } },emphasis : {//高亮状态 } } } ] }; //基于准备好的dom，初始化ECharts实例 var myChart = echarts.init(document.getElementById('echarts_sum')); myChart.setOption(option,true); //清空画布，防止缓存 myChart.clear(); //使用刚指定的配置项和数据显示图表。 myChart.setOption(option,true); //获取json文件的图表数据 myChart.showLoading('default',{text:'正在努力加载，请稍候...'});//数据加载完之前先显示一段简单的loading动画 //$[rules[li.key]] </script>
</div>

(3)Ajax代码：

function querysum(){
    var myChart = echarts.init(document.getElementById('echarts_sum'));
    myChart.showLoading('default',{text:'正在努力加载，请稍候...'});//数据加载完之前先显示一段简单的loading动画
    var data=[];//存放echarts图的数据
    var links=[];//存放echarts图的数据间的联系
    var keylist1=new Array();
    var ruleslist1=new Array();

    //这里的py_key和py_rules是集合list
            <c:forEach items="${py_key }" var="str" varStatus="status1">
            keylist1.push("${str}");
               //alert("${str}");
            </c:forEach>

           <c:forEach items="${py_rules}" var="str" varStatus="status1">
           ruleslist1.push("${str}");
           //alert("${str}");
           </c:forEach>
    //alert("关键因子序列："+keylist1);
    //alert("引用法则序列："+ruleslist1);

    var keylist = {},ruleslist={} ;
    var a= 0,b=0;
    for(var n in keylist1) {
        keylist[a++] = keylist1[n] ;    
    }
    //alert('关键因子序列：'+JSON.stringify(keylist));
    for(var n in ruleslist1) {
        ruleslist[b++] = ruleslist1[n] ;
    }
    //alert(JSON.stringify(ruleslist));
    $.ajax(
            {
        type:'post',//提交方式
        //async:true,//异步请求
        url:'/Xiaofabo/demo1/data_dataresponse',//请求发送给echarts_response处理action
        //url:'analyse1_analysecase',
        data:{
            keylist:JSON.stringify(keylist),ruleslist:JSON.stringify(ruleslist)
        },dataType:'JSON',//返回数据为json格式
        success:function(result){

            //请求成功时返回该函数内容，result即为服务器返回的fastjson对象
            if(result)//如果结果不为空的话
            {
                //alert("图表请求成功!") 
                //$('#myModal2${id}').modal('show');//显示模态框
                var myChart = echarts.init(document.getElementById('echarts_sum'));
                //这里设置2s缓冲动画后再显示echarts图
                setTimeout(function(){
                    myChart.hideLoading();//会自动触发，隐藏缓冲动画
                    myChart.setOption({
                        series : [{
                            data: result.data,links:result.links
                        }
                        ]
                    })
                    },2000);
            }
        },error:function(errorMsg){
            //请求失败时执行该该函数
            //alert("结果："+JSON.stringify(errorMsg));
            alert("不好意思,图表请求数据失败！")

        }
    }
    )
}

过程如果遇到问题不要急，可以在浏览器的开发者工具中查看，逐步排查问题并解决~ hhh去吃午饭了，告辞！

（编辑：李大同）

【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!