Echarts多條折線圖(前後端代碼)

Echarts多條折線圖

先來看一下效果

前端代碼

 <script type="text/javascript">
        $(top.hangge());
        $(function () {
            // 基於準備好的dom，初始化echarts實例
            var myChart = echarts.init(document.getElementById('main'));
            var xZhou = [];
            var yZhou = [];
            var tuLi = [];
            $.ajax({
            type: "POST",
            url: '<%=basePath%>chart/yearSaleLine.do',
            dataType: 'json',
            data: {},
            success: function (data) {
                debugger;
                xZhou=data.monthTime;
                yZhou=data.data;
                tuLi=data.tuLi;

                myChart.hideLoading();
                myChart.setOption({
                    title: {
                        text: '各煤種周銷售統計',
                        left: 'center'
                    },
                    tooltip: {
                        trigger: 'axis'
                    },
                    legend: {
                        data: tuLi,
                        left: '70%',
                        orient: 'vertical'
                    },
                    grid: {  //橫座標最右側顯示不完整時調試grid下的數據
                        left: '3%',
                        right: '10%',
                        bottom: '10%',
                        containLabel: true
                    },
                    toolbox: {
                        feature: {
                            saveAsImage: {}
                        }
                    },
                    xAxis: {
                        type: 'category',
                        boundaryGap: false,
                        data: xZhou,
                        name: '日期/月', //橫座標單位
                        axisLabel:{
                            interval:0,//橫軸信息全部顯示
                            rotate:-30,//-30度角傾斜顯示
                        }
                    },
                    yAxis: {
                        type: 'value',
                        name: '銷量:噸' //縱座標單位
                    },
                    series: yZhou

                });
            }

        });

        });

    </script>

我們來看官網的示例代碼,可以知道他需要的數據類型

Java後臺代碼

/**
	 * @Author 
	 * @Description //TODO 年銷售折線圖
	 * @Date 2020/5/18 20:55
	 * @Param page
	 * @return java.lang.Object
	 **/
	@RequestMapping(value="/yearSaleLine")
	@ResponseBody
	public Object yearSaleLine(Page page)throws Exception{
		PageData pd=new PageData();
		HashMap<Object, Object> map = new HashMap<>();
		//圖例(各個煤種)
		List<PageData> tuLi = weightnetService.findCoalThisYear(pd);
		ArrayList<Object> arrayList = new ArrayList<>();
		ArrayList<Object> data = new ArrayList<>();
		for (PageData pageData : tuLi) {
			String fcoalname = pageData.getString("FCOALNAME");
			arrayList.add(fcoalname);

			pd.put("FCOALNAME", fcoalname);
			HashMap<Object, Object> hashMap1 = new HashMap<>();
			List<PageData> zheXian = weightnetService.findyearDataByCoal(pd);
			hashMap1.put("name",fcoalname);
			hashMap1.put("type","line");
			hashMap1.put("stack","總量");

			ArrayList<Object> list = new ArrayList<>();
			HashMap<Object, Object> hashMap = new HashMap<>();

			for (PageData pageData1 : zheXian) {

				String num = pageData1.getString("NUMS");
				list.add(num);
				hashMap1.put("data",list);
			}
			data.add(hashMap1);
		}

		//X軸
		List<PageData> xZhou = weightnetService.findEveryMonthOfYear(pd);
		ArrayList<Object> monthTime = new ArrayList<>();
		for (PageData pageData : xZhou) {
			String time_date = pageData.getString("MONTH");
			monthTime.add(time_date);
		}

		map.put("monthTime",monthTime);//橫座標刻度信息List
		map.put("tuLi",arrayList);//圖例List
		 //包含series裏面的信息:一個list裏面包了多個map,map中data對應的value包含一個List
		map.put("data",data);
		return map;
	}

最終的效果如下