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 ...
随机推荐
- Nmap 操作手册 - 完整版
目录 Nmap - 基础篇 Nmap 安装 RedHat Windows Debina & Ubuntu Others Linux Nmap 参数(简单版) 目标说明 主机发现 扫描技术 端口 ...
- Nginx Rewrite资源重定向
# Rewrite功能配置 # Rewrite功能主要是实现了url重写 # 如:你输入www.jd123.com,你可以通过Rewrite让它重定向到www.jd.com # Rewrite的实现依 ...
- reactjs中使用threejs从0到1
搭建本地开发环境 安装nodejs 按照 Create React App 安装指南创建一个新的项目 npx create-react-app react-three-demo 删除掉新项目中 src ...
- Geometrics类定义
首先我的结构图是这样的,当然你自己喜欢怎么改都行.这个不影响,只要包含到正确的头文件就行. geometrics是几何类的基础,所有几何的碰撞都是从这个类继承下来的.书中也说的很清楚了,大家可以阅读对 ...
- mui 登录跳转到首页之后顶部选项卡不灵敏问题
前段时间开发一个用mui开发app的时候遇到了登录跳转到首页之后顶部选项卡会失灵的问题,多次尝试之后终于解决了,趁现在还有点印象记录一下吧. 一开始我是用mui.openWindow来新开首页的,出了 ...
- 深入分析FragmentPagerAdapter和FragmentStatePagerAdapter
最近遇到比较奇怪的bug,TableLayout+ViewPager实现点击顶部tab切换viewpager视图.但是在Viewpager设置dapter时,最开始设置的是FragmentPagerA ...
- 【Django】DRF开发中的一些技巧记录
问题记录 问题1:信号没有按预期触发 描述 编写了信号函数后,并没有如预期一般在必要时候触发,函数如下: @receiver(signals.post_save, sender=Prometheus) ...
- 【NOI P模拟赛】寻找道路（bfs，最短路）
题面 一道特殊的最短路题. 给一个 n n n 个点 m m m 条有向边的图,每条边上有数字 0 \tt0 0 或 1 \tt1 1 ,定义一个路径的长度为这个路径上依次经过的边上的数字拼在一起后在 ...
- [CSP-S 2019 day2 T2] 划分
题面 题解 CSP赛场上能请教别人吗 在这道题中,我看到了一个很敏感又很熟悉的东西--平方! 这意味着,可以推出一些结论,使这道题几乎可以边输入边解决. 自己在脑子里动态一下就知道,像这种总和一定.代 ...
- 痞子衡嵌入式：在i.MXRT启动头FDCB里使能串行NOR Flash的QPI/OPI模式
大家好,我是痞子衡,是正经搞技术的痞子.今天痞子衡给大家介绍的是在FDCB里使能串行NOR Flash的QPI/OPI模式. 我们知道 Flash 读时序里有五大子序列 CMD + ADDR + MO ...