strut2 标签加载图表。
//===============================================超市订单量走势图========================================= var orderCountTrendChartInAllTab = echarts.init(document.getElementById('orderCountTrendChartInAllTab')); // 指定图表的配置项和数据 var orderCountTrendOptionInAllTab = { title : { text: '超市订单量走势图', // subtext: '排行' }, tooltip : { trigger: 'axis' }, legend: { data:['订单量'] }, toolbox: { show : true, feature : { dataView : {show: true, readOnly: false}, magicType : {show: true, type: ['line', 'bar']}, restore : {show: true}, saveAsImage : {show: true} } }, calculable : true, xAxis : [ { type : 'category', data : [ <s:if test="#request.orderCountDatas!=null"> <s:iterator value="#request.orderCountDatas" var="data" id="data" status="st"> '${data.indexName}', </s:iterator> </s:if> ] } ], yAxis : [ { type : 'value' } ], series : [ { name:'订单量', type:'line', data:[ <s:if test="#request.orderCountDatas!=null"> <s:iterator value="#request.orderCountDatas" var="data" id="data" status="st"> '${data.count}', </s:iterator> </s:if> ], markPoint : { data : [ {type : 'max', name: '最大值'}, {type : 'min', name: '最小值'} ] }, markLine : { data : [ {type : 'average', name: '平均值'} ] } }, ] }; orderCountTrendChartInAllTab.setOption(orderCountTrendOptionInAllTab); //===============================================超市订单金额走势图========================================= var orderAmountTrendChartInAllTab = echarts.init(document.getElementById('orderAmountTrendChartInAllTab')); // 指定图表的配置项和数据 var orderAmountTrendOptionInAllTab = { title : { text: '超市订单金额走势图', // subtext: '排行' }, tooltip : { trigger: 'axis' }, legend: { data:['订单金额'] }, toolbox: { show : true, feature : { dataView : {show: true, readOnly: false}, magicType : {show: true, type: ['line', 'bar']}, restore : {show: true}, saveAsImage : {show: true} } }, calculable : true, xAxis : [ { type : 'category', data : [ <s:if test="#request.orderAmountDatas!=null"> <s:iterator value="#request.orderAmountDatas" var="data" id="data" status="st"> '${data.indexName}', </s:iterator> </s:if> ] } ], yAxis : [ { type : 'value' } ], series : [ { name:'订单金额', type:'line', data:[ <s:if test="#request.orderAmountDatas!=null"> <s:iterator value="#request.orderAmountDatas" var="data" id="data" status="st"> '${data.amount}', </s:iterator> </s:if> ], markPoint : { data : [ {type : 'max', name: '最大值'}, {type : 'min', name: '最小值'} ] }, markLine : { data : [ {type : 'average', name: '平均值'} ] } }, ] }; orderAmountTrendChartInAllTab.setOption(orderAmountTrendOptionInAllTab); // =========================================配送点订单量=============================================== var communityChart = echarts.init(document.getElementById('communityChart')); // 指定图表的配置项和数据 var communityOption = { title : { text: '配送点订单量分析图', subtext: '总单量 : ${totalOrderAmount}', x:'center' }, tooltip : { trigger: 'item', formatter: "{a} <br/>{b} : {c} ({d}%)" }, legend: { orient: 'vertical', left: 'left', data: [ <s:if test="#request.countGroupbyCommunityResponse!=null"> <s:iterator value="#request.countGroupbyCommunityResponse" var="data" id="data" status="st"> '${data.deliveryPointName}', </s:iterator> </s:if> ] }, series : [ { name: '访问来源', type: 'pie', radius : '55%', center: ['50%', '60%'], data:[ <s:if test="#request.countGroupbyCommunityResponse!=null"> <s:iterator value="#request.countGroupbyCommunityResponse" var="data" id="data" status="st"> {value:${data.count}, name:'${data.deliveryPointName} : ${data.count} '}, </s:iterator> </s:if> ], itemStyle: { emphasis: { shadowBlur: 10, shadowOffsetX: 0, shadowColor: 'rgba(0, 0, 0, 0.5)' } } } ] }; // 使用刚指定的配置项和数据显示图表。 communityChart.setOption(communityOption); if(communityOption.series[0].data.length == 0) { $("#communityChart div:first").append("<h2 style='text-align:center;margin-top:150px'>暂无数据</h2>"); } // =========================================配送点订单金额=============================================== var communityPriceChart = echarts.init(document.getElementById('communityPriceChart')); // 指定图表的配置项和数据 var option = { title : { text: '配送点订单金额分析图', subtext: '总金额 : ${totalOrderPrice}', x:'center' }, tooltip : { trigger: 'item', formatter: "{a} <br/>{b} : {c} ({d}%)" }, legend: { orient: 'vertical', left: 'left', data: [ <s:if test="#request.countPriceGroupbyCommunityResponse!=null"> <s:iterator value="#request.countPriceGroupbyCommunityResponse" var="data" id="data" status="st"> '${data.deliveryPointName}', </s:iterator> </s:if> ] }, series : [ { name: '访问来源', type: 'pie', radius : '55%', center: ['50%', '60%'], data:[ <s:if test="#request.countPriceGroupbyCommunityResponse!=null"> <s:iterator value="#request.countPriceGroupbyCommunityResponse" var="data" id="data" status="st"> {value:${data.count}, name:'${data.deliveryPointName} : ${data.count} '}, </s:iterator> </s:if> ], itemStyle: { emphasis: { shadowBlur: 10, shadowOffsetX: 0, shadowColor: 'rgba(0, 0, 0, 0.5)' } } } ] }; // 使用刚指定的配置项和数据显示图表。 communityPriceChart.setOption(option); if(option.series[0].data.length == 0) { $("#communityPriceChart div:first").append("<h2 style='text-align:center;margin-top:150px'>暂无数据</h2>"); } var isAppointChart = echarts.init(document.getElementById('isAppointChart')); // 指定图表的配置项和数据 var option = { title : { text: '订单预约分析图', subtext: '总单量 : ${totalOrderAmount}', x:'center' }, tooltip : { trigger: 'item', formatter: "{a} <br/>{b} : {c} ({d}%)" }, legend: { orient: 'vertical', left: 'left', data: [ <s:if test="#request.countGroupbyIsAppointmentResponse!=null"> <s:iterator value="#request.countGroupbyIsAppointmentResponse" var="data" id="data" status="st"> '${data.appointmentState}', </s:iterator> </s:if> ] }, series : [ { name: '访问来源', type: 'pie', radius : '55%', center: ['50%', '60%'], data:[ <s:if test="#request.countGroupbyIsAppointmentResponse!=null"> <s:iterator value="#request.countGroupbyIsAppointmentResponse" var="data" id="data" status="st"> {value:${data.count}, name:'${data.appointmentState} : ${data.count} '}, </s:iterator> </s:if> ], itemStyle: { emphasis: { shadowBlur: 10, shadowOffsetX: 0, shadowColor: 'rgba(0, 0, 0, 0.5)' } } } ] }; // 使用刚指定的配置项和数据显示图表。 isAppointChart.setOption(option); if(option.series[0].data.length == 0) { $("#isAppointChart div:first").append("<h2 style='text-align:center;margin-top:150px'>暂无数据</h2>"); } var isOntimeChart = echarts.init(document.getElementById('isOntimeChart')); // 指定图表的配置项和数据 var option = { title : { text: '订单及时分析图', subtext: '总单量 : ${totalOrderAmount}', x:'center' }, tooltip : { trigger: 'item', formatter: "{a} <br/>{b} : {c} ({d}%)" }, legend: { orient: 'vertical', left: 'left', data: [ <s:if test="#request.countGroupByOntimeOrNotResponse!=null"> <s:iterator value="#request.countGroupByOntimeOrNotResponse" var="data" id="data" status="st"> '${data.ontimeState}', </s:iterator> </s:if> ] }, series : [ { name: '访问来源', type: 'pie', radius : '55%', center: ['50%', '60%'], data:[ <s:if test="#request.countGroupByOntimeOrNotResponse!=null"> <s:iterator value="#request.countGroupByOntimeOrNotResponse" var="data" id="data" status="st"> {value:${data.count}, name:'${data.ontimeState} : ${data.count} '}, </s:iterator> </s:if> ], itemStyle: { emphasis: { shadowBlur: 10, shadowOffsetX: 0, shadowColor: 'rgba(0, 0, 0, 0.5)' } } } ] }; // 使用刚指定的配置项和数据显示图表。 isOntimeChart.setOption(option); if(option.series[0].data.length == 0) { $("#isOntimeChart div:first").append("<h2 style='text-align:center;margin-top:150px'>暂无数据</h2>"); } // var couponOrderChart = echarts.init(document.getElementById('couponOrderChart')); // 指定图表的配置项和数据 var option = { title : { text: '订单优惠券分析图', subtext: '总单量 : ${totalOrderAmount}', x:'center' }, tooltip : { trigger: 'item', formatter: "{a} <br/>{b} : {c} ({d}%)" }, legend: { orient: 'vertical', left: 'left', data: [ '使用优惠券', '无使用优惠券' ] }, series : [ { name: '访问来源', type: 'pie', radius : '55%', center: ['50%', '60%'], data:[ {value:${countOrderUseCoupon}, name:'使用优惠券 :${countOrderUseCoupon}'}, {value:${countOrderNotUseCoupon}, name:'无使用优惠券 : ${countOrderNotUseCoupon}'}, ], itemStyle: { emphasis: { shadowBlur: 10, shadowOffsetX: 0, shadowColor: 'rgba(0, 0, 0, 0.5)' } } } ] }; // 使用刚指定的配置项和数据显示图表。 couponOrderChart.setOption(option); // var couponFeeChart = echarts.init(document.getElementById('couponFeeChart')); // 指定图表的配置项和数据 var option = { title : { text: '优惠券金额分析图', subtext: '使用量 :${countOrderUseCoupon}', x:'center' }, tooltip : { trigger: 'item', formatter: "{a} <br/>{b} : {c} ({d}%)" }, legend: { orient: 'vertical', left: 'left', data: [ <s:if test="#request.countCouponGroupbyFeeResponse!=null"> <s:iterator value="#request.countCouponGroupbyFeeResponse" var="data" id="data" status="st"> '${data.couponName}', </s:iterator> </s:if> ] }, series : [ { name: '访问来源', type: 'pie', radius : '55%', center: ['50%', '60%'], data:[ <s:if test="#request.countCouponGroupbyFeeResponse!=null"> <s:iterator value="#request.countCouponGroupbyFeeResponse" var="data" id="data" status="st"> {value:${data.count}, name:'${data.couponName} : ${data.count} '}, </s:iterator> </s:if> ], itemStyle: { emphasis: { shadowBlur: 10, shadowOffsetX: 0, shadowColor: 'rgba(0, 0, 0, 0.5)' } } } ] }; // 使用刚指定的配置项和数据显示图表。 couponFeeChart.setOption(option); if(option.series[0].data.length == 0) { $("#couponFeeChart div:first").append("<h2 style='text-align:center;margin-top:150px'>暂无数据</h2>"); }