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 ...
随机推荐
- php rand()和mt_ran(),还有随机数生成器
PHP 的 rand() 函数默认使用 libc 随机数发生器.mt_rand() 函数是非正式用来替换它的.该函数用了 Mersenne Twister 中已知的特性作为随机数发生器,它可以产生随机 ...
- s905l3a系列刷armbian 教你从0搭建自己的博客
最近服务器又更换了,原来的有一点点小意外(一个电阻给我焊接时搞掉了). 哎~~今天,我淘到了一个好东西----CM311-3a,配置很诱人,价格也不贵,60绰绰有余 比较 CM311-3a N1(炒到 ...
- Linux系列之重定向操作
前言 I/O重定向允许我们将命令的输入和输出重定向到文件中,以及将多个命令连接到一起成为管道.本文就来介绍有关重定向的知识. 标准输入.输出.错误 输出包括两种类型: 程序的结果.被称为标准输出或者s ...
- WTL_Freecell绿色版
WTL_Freecell绿色版-用户手册 1.程序特点和使用环境介绍 (1).版本信息 WTL_Freecell-Release05-v1.3-20190129 (WTL空当接龙绿色版v1.3),By ...
- 使用 Liquibase 管理数据库版本 - SpringBoot 2.7 .2 实战基础
优雅哥 SpringBoot 2.7 .2 实战基础 - 05 -使用 Liquibase 管理数据库版本 在企业开发中,数据库版本管理好像是一个伪命题,大多项目都是通过 Power Designer ...
- HttpServletResponse 类
HttpServletResponse 类的作用 HttpServletResponse 类和 HttpServletRequest 类一样.每次请求进来,Tomcat 服务器都会创建一个 Respo ...
- C#基础_XML文件读写
使用C#对XML文件进行操作,包括生成一个XML文档,以及读取XML文档中的内容,修改某个元素中的内容 using System; using System.Collections.Generic; ...
- KingbaseESV8R6 snapshot too old的配置和测试
背景 书接上文,我们很好的理解了xmin和xid的区别.我们继续上文<KingbaseESV8R6不同隔离级下xmin的区别>来讨论 snapshot too old 的功能. 当king ...
- 全局索引与分区索引对于SQL性能影响的比较
KingbaseES 提供了对于分区表 global index 的支持.global index 不仅提供了对于唯一索引功能的改进(无需包含分区键),而且在性能上相比非global index (l ...
- with function 语法支持
通过with子句,我们可以把很多原本需要存储过程来实现的复杂逻辑用一句SQL来进行表达.KingbaseES 从V008R006C004B0021 版本开始,支持 with function 语法.例 ...