Echarts实现数量未知的折线图

// 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循环写的头疼 如果哪位大佬有好的方法 可以改进下

  • 1
    点赞
  • 3
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值