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>");
}
strut2 标签加载图表。的更多相关文章
- Echarts使用及动态加载图表数据 折线图X轴数据动态加载
Echarts简介 echarts,缩写来自Enterprise Charts,商业级数据图表,一个纯JavaScript的图表库,来自百度...我想应该够简洁了 使用Echarts 目前,就官网的文 ...
- Html中的img标签 加载失败
在Http请求时,有时会遇到img图片标签加载失败,不显示的情况: 解决方法,在重新给src属性赋值时,先将onerror事件清除掉,再赋值,这样就不会存在循环调用问题了,代码如下; <img ...
- script标签加载顺序(defer & async)
script 拥有的属性 async:可选,表示应该立即下载脚本,但不应妨碍页面中的其他操作,比如下载其他资源或等待加载其他脚本.只对外部脚本文件有效. charset:可选.表示通过 src 属性指 ...
- Echarts使用及动态加载图表数据
Echarts使用及动态加载图表数据 官网:http://echarts.baidu.com/ 1.文档 2.实例 名词: 1.统计维度(说明数据) 维度就是统计致力于建立一个基于多方位统计(时间.地 ...
- javascript动态创建script标签,加载完成后调用回调
代码如下: var head = document.getElementsByTagName('head')[0]; var script = document.createElement('scri ...
- H5页面实现一个Audio标签加载多个音频文件，并进行播放和展示音频长度
最近微信项目中有需求,要将微信端发送过来的amr格式的语音文件,在项目中的页面上进行展示和播放,实现方式如下: 1.首先java后台收到微信端的消息推送的时候,使用 ffmpeg将amr格式的音频文件 ...
- 前端图片缓存之通过img标签加载GIF只能播放一次问题(转载)
最近项目中要求再网页中插入一张gif图片,让用户每次到达该位置时动一次,所以我们就制作了一张只动一次的gif图片通过img标签引入.当用户进入该位置时,通过remove()清除图片然后重新append ...
- thymeleaf-extras-db 0.0.1发布，select标签加载数据的新姿势
在写thymeleaf页面的时候,我为了偷懒,不想为每个select下拉列表框都写一个接口,于是这个懒人jar诞生了.该jar的核心功能是直接通过thymeleaf页面的自定义标签的属性,直接运行sq ...
- js处理img标签加载图片失败，显示默认图片
1.第一种方法: 如果已经引入了jquery插件,就很好办.没有的话,如果实在需要,可以附上代码: script(type='text/javascript', src="http://aj ...
随机推荐
- Taurus.MVC WebAPI 入门开发教程2：添加控制器输出Hello World。
系列目录 1.Taurus.MVC WebAPI 入门开发教程1:框架下载环境配置与运行. 2.Taurus.MVC WebAPI 入门开发教程2:添加控制器输出Hello World. 3.Tau ...
- google nexus5x 刷机抓包逆向环境配置（一）
本文仅供学习交流使用,如侵立删! google nexus5x 刷机抓包逆向环境配置(一) 操作环境 nexus5x kaliLinux win10 准备 官方工具包官方下载地址:https://dl ...
- C#《原CSharp》第四回 人常见岁月更替 却难知人文相继
纪芾显然此时并不是很能理解纪老爷子口中是也不是这句话的意思,不过他依然将这个要点记在了心里,方便以后悟出其最终门道的时候进行比对. "今天,我在璃月港北边的一户人家,遇到了一个挺有意思的后生 ...
- 老板加薪！看我做的WPF Loading！！！
老板加薪!看我做的WPF Loading!!! 控件名:RingLoading 作者:WPFDevelopersOrg 原文链接: https://github.com/WPFDevelopersOr ...
- tomcat线程池
tomcat线程池和普通的线程池设计上有所区别,下面主要来看看它是如何设计的 tomcat中线程池的创建 org.apache.tomcat.util.net.AbstractEndpoint#cre ...
- Luogu1099 树网的核 （暴力？，floyd？）（还未想正解，暴力就A了）
阅读理解两小时,手敲暴力思考5分钟.然后\(n^3\)就A了 暴力代码 #include <iostream> #include <cstdio> #include <c ...
- java学习第一天.day01
Java的编译和运行机制 java文件编译成字节码文件后加载到java缓存中jvm Java的基本语法 1.Java语言严格区分大小写 2.一个Java源文件里可以定义多个Java类,但不能存在多个p ...
- [HFCTF2020]EasyLogin-1|JWT身份伪造
1.打开之后只有一个登陆界面和注册界面,右键检查发现app.js代码,结果如下: app.js代码如下: /** * 或许该用 koa-static 来处理静态文件 * 路径该怎么配置?不管了先填个根 ...
- Express 设置请求跨域
import cors from "cors"; import express from "express"; const app = express(); a ...
- kubernetes网络排错思想
Overview 本文将引入一个思路:"在Kubernetes集群发生网络异常时如何排查".文章将引入Kubernetes 集群中网络排查的思路,包含网络异常模型,常用工具,并且提 ...