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;
	}

最终的效果如下