// An highlighted block
<div id="char10" class="char" style="width: 100%; height: 400px;margin-left: -55px;">
<div id="main" style="width: 100%; height: 400px;"></div>
<script type="text/javascript">
var myChart10 = echarts.init(document.getElementById('main'),'macarons');
var lastMonth = [];
for(var i = 0;i<=30;i++){
lastMonth.unshift(new Date(new Date()
.setDate(new Date().getDate()-i))
.toLocaleDateString())
}
option = {
// Make gradient line here
animation: true,
animationDuration: 1000,
animationEasing: 'cubicInOut',
animationDurationUpdate: 1000,
animationEasingUpdate: 'cubicInOut',
title: [],
tooltip: {
trigger: 'axis',
axisPointer: {
type: 'cross'
}
},
legend: {
padding:[50,0,0,470],
left:0,
data:[],
textStyle:{
color:'#ffffff',
}
},
xAxis: [{
type : 'category',
splitLine : {show : false},
data : ["1", "2", "3", "4", "5", "6", "7", "8", "9", "10", "11", "12", "13", "14", "15", "16", "17", "18", "19", "20", "21", "22", "23", "24", "25", "26", "27", "28", "29", "30", "31"],
axisTick: {
alignWithLabel: true
},
axisLabel: {
margin: 2,
textStyle: {
color: '#aaa'
}
},
axisLine: {
show: true,
lineStyle: {
color: '#ddd'
}
}
}],
yAxis: [{
name:'单位: 万方',
type : 'value',
splitLine: {show: false},
axisLabel: {
interval: 0,
textStyle: {
color: '#ddd'
}
},
axisLine: {
show: true,
lineStyle: {
color: '#ddd'
}
},
nameTextStyle : {color : '#ddd'}
}],
grid: [{
left:'20%',
bottom: '20%',
top : '20%',
containLabel: true
}],
series:[ ]
};
// 使用刚指定的配置项和数据显示图表。
myChart10.setOption(option);
</script>
</div>
function getMonthSalesTotalByFactorDay(){
var myDate = new Date();
var 年 = myDate.getFullYear();
var 月 = myDate.getMonth()+1+"";
if(月.length<2){
月 = "0"+月;
}
//var date=年+"-"+月;
var date=2019+"-"+"0"+8;
var option = JSON.stringify({'date':date});
$.ajax({
url: urlIp+"/dpportal/regulateAndControlService/getMonthSalesTotalByFactorDay2",
data: option,
headers: {
'Access-Control-Allow-Origin': "*",
},
contentType: 'application/json;charset=utf-8',
dataType: "json",
cache: false,
type:"POST",
success: function(data1) {
var jsonData1 = data1.data;
console.log(jsonData1);
var 下游用户名称 = [];
var dateDay = ["01", "02", "03", "04", "05", "06", "07", "08", "09", "10", "11", "12", "13", "14", "15", "16", "17", "18", "19", "20", "21", "22", "23", "24", "25", "26", "27", "28", "29", "30", "31"];
for(var i = 0 ; i < jsonData1.length ; i ++){
下游用户名称[i] = jsonData1[i].下游用户名称;
}
下游用户名称 = Array.from(new Set(下游用户名称));
var str1 = [];
for(var i = 0;i<下游用户名称.length;i++){
var option2 = JSON.stringify({'date':date,'type':下游用户名称[i]});
var result = [];
$.ajax({
url: urlIp+"/dpportal/regulateAndControlService/getMonthSalesTotalByFactorDay",
data: option2,
headers: {
'Access-Control-Allow-Origin': "*",
},
contentType: 'application/json;charset=utf-8',
dataType: "json",
cache: false,
async:false,//可以使result被外界取到值
type:"POST",
success: function(data2) {
var jsonData2 = data2.data;
for(var j=0;j<jsonData2.length;j++){
for(var k=0;k<dateDay.length;k++){
if(jsonData2[j].创建时间==dateDay[k]){
result[k] = jsonData2[j].液化量;
}
}
}
for(var j=0;j<result.length;j++){
if(result[j]==null){
result[j] = 0;
}
}
}
})
var strtemp1 ={};
strtemp1.type='line';
strtemp1.symbol='circle';
strtemp1.name=下游用户名称[i];
strtemp1.data=result;
str1.push(strtemp1);
}
myChart10.setOption({
title: [{
padding:[0,0,0,510],
text: '山西天然气月总销-液场',
textStyle: {
color: '#00FFFF'
}
}],
legend: [
{
type: 'scroll',
orient: 'vertical',
padding:[25,0,0,70],
left:0,
data:下游用户名称,
textStyle:{
color:'#ffffff',
},
},
],
series: str1,
});
}
});
}
// 服务端
/**
* 获取当前月每天总销—液场
* @param cdt
* @return
*/
@ApiOperation(value = "获取当前月每天总销—液场,查询条件为日期")
@RequestMapping("/getMonthSalesTotalByFactorDay")
public Object getMonthSalesTotalByFactorDay(@RequestBody(required = false) Map<String,String> cdt){
String sql = "SELECT SUBSTR(创建时间, 9,2) 创建时间,下游用户名称,液化量 FROM REG_下游用量 WHERE 1 = 1 ";
if(cdt!=null){
String date = cdt.get("date");
String type = cdt.get("type");
if(!StringUtil.isEmpty(date)){
sql += " AND 创建时间 LIKE '"+date+"%'";
}
if(!StringUtil.isEmpty(type)){
sql += " AND 下游用户名称 = '"+type+"'";
}
}
sql += "AND 液化量 != '0.00' AND 液化量 IS NOT NULL ORDER BY 创建时间";
System.out.println("获取当前月每天总销—液场sql----------------------"+sql);
ArrayList<Reg月总销液厂> reg月总销液厂s = MyJDBCDao.getObj(Reg月总销液厂.class,sql) ;
return JSONResult.ok(reg月总销液厂s);
}
/**
* 获取当前月每天总销—液场
* @param cdt
* @return
*/
@ApiOperation(value = "获取当前月每天总销—液场,查询条件为日期")
@RequestMapping("/getMonthSalesTotalByFactorDay2")
public Object getMonthSalesTotalByFactorDay2(@RequestBody(required = false) Map<String,String> cdt){
String sql = "SELECT 创建时间,下游用户名称,液化量 FROM REG_下游用量 WHERE 1 = 1 AND 液化量 IS NOT NULL AND 液化量 != '0.00' ";
if(cdt!=null){
String date = cdt.get("date");
if(!StringUtil.isEmpty(date)){
sql += " AND 创建时间 LIKE '"+date+"%'";
}
}
sql += "ORDER BY 创建时间";
System.out.println("获取当前月每天总销—液场sql----------------------"+sql);
ArrayList<Reg月总销液厂> reg月总销液厂s = MyJDBCDao.getObj(Reg月总销液厂.class,sql) ;
return JSONResult.ok(reg月总销液厂s);
}
for循环写的头疼 如果哪位大佬有好的方法 可以改进下