java基础写一个折线图html页面(前后端关联)

今天有一个学弟问我怎么关联折线图的问题,写一遍基础的文章来讲解一下

 xml方法我这里是两个数量和一个年份的日期,具体的内容可以根据你的具体情况来应用

   <select id="jgEcharstList" resultType="com.inspur.zhongtie.gongchengbu.jienenghuanbao.po.Jienenghuanbao" >

select  COUNT(JH_TIME)  SETT1,COUNT(SJ_TIME)  SETT2,YUE
    from ZT_GCLY_JNHB_JNJP  A
    where substr(A.NIAN, 1, 4) = #{year}
GROUP BY  YUE
    order by YUE asc
</select>

 service这里说一下是因为我的字段的类型原因我需要处理一下写了个for循环,感兴趣的同学可以看一下这几个for循环对于以后的代码理解也是有帮助的,我这里是先取出月份然后在通过判断1-9月和9月以上的数据来进行一个拼接,拼接完成后吧数据一起再经过for循环进行一个组合拼接,我这里没有写一个备注

  public List<Jienenghuanbao> jgEcharstList(String year) {
        List<Jienenghuanbao> list1  = this.JienenghuanbaoDao.selectList("com.inspur.zhongtie.gongchenglvyue.Jienenghuanbao.jgEcharstList",year);
        List<String> month = new ArrayList<>();
        for (int i = 1; i<13; i++){
            String yuefen;
            if (i<10){
                yuefen = year+"-0"+i;
            }else{
                yuefen = year+"-"+i;
            }
            month.add(yuefen);

        }

        for (Jienenghuanbao bean : list1){
           String i = bean.getYUE();
                String dataMonth;
                if (Integer.parseInt(i)<10){
                    dataMonth = year+"-0"+i;
                }else{
                    dataMonth = year+"-"+i;
                }
                bean.setYUE(dataMonth);
        }

        List<Jienenghuanbao> list2 = new ArrayList<>();
        for (String s : month) {
            Jienenghuanbao echartsP= new Jienenghuanbao();
            echartsP.setYUE(s);
            echartsP.setSETT1("0");
            echartsP.setSETT2("0");
            list2.add(echartsP);
        }
        System.out.println(list1);
        System.out.println(list2);
        for(Jienenghuanbao bean1 : list1){
            for(Jienenghuanbao bean2 : list2){
                if (bean1.getYUE().equals(bean2.getYUE())){
                    bean2.setSETT1(bean1.getSETT1());
                    bean2.setSETT2(bean1.getSETT2());
                }
            }
        }
        return  list2;

    }

controller

  /**
     *
     *   图表
     *
     */
    @RequestMapping("/echartsQuery")
    @ResponseBody
    public List<Jienenghuanbao> jgEchartsQuery(HttpServletRequest httpServletRequest, HttpServletResponse httpServletResponse) {
        String year = this.getPara("year");
        return this.JienenghuanbaoService.jgEcharstList(year);
    }

html

	echarst();

	/**
	 * 折线图
	 */
	function echarst() {

		var RenderBarChart = echarts.init(document.getElementById('BrokenLineCharts'));

		var type1 = [];
		var type2 = [];
		var month = [];
		var year = $('#years').val();
		// var acfr;
		// RenderBarChart.showLoading();
		$.ajax({
			url: '${root!}/Jienenghuanbao/echartsQuery',//地址
			type: 'post',//类型
			data: {
				year: year,
			},
			async: false,
			success: function (result) {
                 console.log(result);

				for (var i in result) {
					month.push(result[i].yue);
					type1.push(result[i].sett1);
					type2.push(result[i].sett2);
				}


				//图表静态
				var option = {
					title: {
						text: year + '节能减排措施数据统计曲线图',
						// subtext: '数据来自西安兰特水电测控技术有限公司',
						left: 'center',
						align: 'right',
						top: '20'
					},
					tooltip: {
						trigger: 'axis',
						position: function (pt) {
							return [pt[0], '14%'];
						}
					},
					legend: {
						icon: 'rectangle',
						data: ['计划完成', '实际时间'],
						x: 'left',
						right: '48%',
						top: '20',
						itemWidth: 18,
						itemHeight: 10,
						padding: [0, 0, 0, 20],
						itemHeight: 10,
						textStyle: {
							fontSize: 12,
							color: '#666'
						},
						icon: "circle"
					},
					grid: {
						//调整整个echars图的大小
						top: "28%",
						left: '2%',
						right: '2%',
						bottom: '5%',
						containLabel: true
					},
					xAxis: {
						type: 'category',
						axisTick: {
							show: false
						},
						axisLabel: {
							interval: 0,
							rotate: 40
						},
						axisLine: {
							show: false,
							lineStyle: {
								color: "#666666" //X轴文字颜色
							} // 样式
						},

						data: month
					},
					yAxis: [{
						type: 'value',
						name: '总数',
						position: 'left',
						axisLine: {
							show: false,
						},
						axisTick: {
							show: false,
						},
						splitLine: {
							lineStyle: {
								// type: 'dotted',
							}
						},
						// splitArea: { //背景条纹
						// 	show: true,
						// 	areaStyle: {
						// 		color: [
						// 			'rgba(255,255,255,0)',
						// 			'rgba(242,243,248,1)'
						// 		]
						// 	}
						//
						// },
						// min: 0,
						// splitNumber: 1,
					}],
					series: [
						{
							name: "计划完成",
							type: "line",
							smooth: true,
							symbol: 'circle',
							symbolSize: 10,
							data: type1,
							itemStyle: {
								normal: {
									color: '#5fbdff',
									lineStyle: {
										width: 3
									}
								}
							},
							label: {
								show: true,  //开启显示
								position: 'top',  //在上方显示
								// rotate: 20, // 旋转度数
								textStyle: {  //数值样式
									// color: 'black',
									fontSize: 11
								}
							}

						},
						{
							name: "实际时间",
							type: "line",
							smooth: true,
							symbol: 'circle',
							symbolSize: 10,
							data: type2,
							itemStyle: {
								normal: {
									color: '#ff975f',
									lineStyle: {
										width: 3
									}
								}
							},
							label: {
								show: true,  //开启显示
								position: 'top',  //在上方显示
								// rotate: 20, // 旋转度数
								textStyle: {  //数值样式
									// color: 'black',
									fontSize: 11
								}
							}
						}

					]
				}
				RenderBarChart.setOption(option);
			},
			//失败/超时
			error: function (XMLHttpRequest, textStatus, errorThrown) {
				if (textStatus === 'timeout') {
					alert('請求超時');
					setTimeout(function () {
						alert('重新请求');
					}, 2000);
				}
			}
		});

		// setTimeout(function() {
		// 	RenderBarChart.setOption(option);
		// 	RenderBarChart.hideLoading();
		// },1500)


	}