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 ...
随机推荐
- 通过类名引用静态成员方法和通过super引用父类的成员方法
package com.yang.Test.StaticMethodReference; /** * 通过类型引用静态成员方法 * 类已经存在,静态成员方法也已经存在 * 就可以通过类名直接引用静态成 ...
- ArrayList的操作和对象数组
ArrayList是List接口的一个实现类,它是程序中最常见的一种集合. ArrayList内部的数据存储结构时候数组形式,在增加或删除指定位置的元素时,会创建新的数组,效率比较低,因此不适合做大量 ...
- 题解【AtCoder - CODE FESTIVAL 2017 qual B - D - 101 to 010】
题目:https://atcoder.jp/contests/code-festival-2017-qualb/tasks/code_festival_2017_qualb_d 题意:给一个 01 串 ...
- 20170622日行一记之PHP函数
fread() 函数读取文件(可安全用于二进制文件) fread(file,length) 参数 描述 file 必需.规定要读取打开文件. length 必需.规定要读取的最大字节数. 该函数在读取 ...
- 使用Python3.7+Tornado5.1配合七牛云存储api来异步切分上传文件
原文转载自「刘悦的技术博客」https://v3u.cn/a_id_123 之前写了几篇关于FastDfs分布式存储的文章:python3.7.3操作FastDfs来进行文件操作,其实市面上关于云存储 ...
- MySQL8.0错误日志Error log
GreatSQL社区原创内容未经授权不得随意使用,转载请联系小编并注明来源. 理论知识 错误日志内容 错误日志包含mysqld启动和关闭的时间信息,还包含诊断消息,如服务器启动和关闭期间以及服务器运行 ...
- Python爬虫之xpath语法及案例使用
Python爬虫之xpath语法及案例使用 ---- 钢铁侠的知识库 2022.08.15 我们在写Python爬虫时,经常需要对网页提取信息,如果用传统正则表达去写会增加很多工作量,此时需要一种对数 ...
- java-代码操作服务器之SSH连续发送命令
java操作Linux服务器可以使用专用的jar包,这里介绍使用jsch操作Linux服务器 maven 依赖 <dependency> <groupId>com.jcraft ...
- es5 es6 新增
es5的新特性 对于数组和字符串都进行了加强 map 遍历 es6的新特性 数组的增强 find 查找findIndex 查找下标 字符的增强 includes 是否包含 (包含返回true 不包含返 ...
- 逻辑判断与if and while循环结构
逻辑判断与if and while循环结构 逻辑判断 逻辑运算符在进行逻辑判断时遇到打印输出命令时 and 当碰到一个条件为False时那么整个条件即为False,当碰到第一个为True时如果之后的值 ...