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 ...
随机推荐
- 常用的函数式接口_Supplier和常用的函数式接口Supplier接口练习_求数组中元素最大值
Supplier接口 package com.yang.Test.SupplierStudy; import java.util.function.Supplier; /** * 常用的函数式接口 * ...
- python 日志类
简介 在所有项目中必不可少的一定是日志记录系统,python为我们提供了一个比较方便的日志模块logging,通常,我们都会基于此模块编写一个日志记录类,方便将项目中的日志记录到文件中. loggin ...
- JDBC与ODBC的区别
JDBC简介JDBC(Java Data Base Connectivity,java数据库连接)是一种用于执行SQL语句的Java API,它是Java十三个规范之一.可以为多种关系数据库提供统一访 ...
- benchmark性能测试
目录 benchmark介绍 benchmark运行 benchmark运行参数 benchmark性能测试案例 benchmark介绍 基准测试主要是通过测试CPU和内存的效率问题,来评估被测试代码 ...
- DolphinScheduler 荣获 2021 中国开源云联盟优秀开源项目奖！
点击上方 蓝字关注我们 好消息,中国开源云联盟(China Open Source Cloud League,简称"COSCL")于近日公布 2021 杰出开源贡献者.优秀开源项目 ...
- HC32L110 系列 M0 MCU 的介绍和Win10下DAP-Link, ST-Link, J-Link的烧录
HC32L110 系列 Cortex M0 MCU Hackaday 在三月份的时候介绍了一款最小的MCU NEW PART DAY: SMALLEST ARM MCU UPROOTS COMPETI ...
- [Blender] Blender 获取 Instance 的信息
最近希望用 Blender 生成 Instance 的能力,将生成的导入游戏引擎中来渲染.Instance Rendering 是个好东西,特别是针对大场景,渲染成批的基本相同的物体的时候非常有用. ...
- 洛谷P4135 作诗（不一样的分块）
题面 给定一个长度为 n n n 的整数序列 A A A ,序列中每个数在 [ 1 , c ] [1,c] [1,c] 范围内.有 m m m 次询问,每次询问查询一个区间 [ l , r ] [l, ...
- 使用Python批量爬取美女图片
运行截图 实列代码: from bs4 import BeautifulSoup import requests,re,os headers = { 'User-Agent': 'Mozilla/5. ...
- 基于Vue3实现一个前端埋点上报插件并打包发布到npm
前端埋点对于那些营销活动的项目是必须的,它可以反应出用户的喜好与习惯,从而让项目的运营者们能够调整策略优化流程提高用户体验从而获取更多的$.这篇文章将实现一个Vue3版本的埋点上报插件,主要功能有 通 ...