项目需求：因为不确定y轴折线具体数量，所以决定后台拼接

首先要在pom.xml文件中引入jar包

<!-- https://mvnrepository.com/artifact/com.github.abel533/ECharts -->
<dependency>
    <groupId>com.github.abel533</groupId>
    <artifactId>ECharts</artifactId>
    <version>2.2.7</version>
</dependency>

js和jsp

这个没啥好说的，很简单

<div id="chartContainer" style="width: 100%; height:100%;">
 </div>

function initComplete() {//初始化，js调用这个
        //路径配置
        require.config({paths : {echarts : '/static/echarts'}});
        require([ 'echarts','echarts/chart/bar', 'echarts/chart/line'],DrawEChart);
    }
function DrawEChart(echarts) {
        var startTime = $("#startTime").datebox("getValue");
        var endTime = $("#endTime").datebox("getValue");
        var dev = $("#dev").combobox("getValue");
        $.ajax({
            type : "post",
            cache : false,
            url : "/reportForm/chartData",
            dataType : "json",
            data : {
                "startTime":startTime,"endTime":endTime,"dev":dev
            },
            success : function(result) {
                var psLineChar = echarts.init(document.getElementById('chartContainer'));
                psLineChar.clear();
                psLineChar.showLoading({text: '请稍等，正在加载...'});
                    psLineChar.setOption(result, true);
                    psLineChar.hideLoading();
            },
            error : function(errorMsg) {
                alert("图表请求数据失败啦!");
            }
        });
    }

controller层

/**
     * 初始化option
     * @param title 折线图标题
     * @param unit y轴单位
     * @return
     */
    public Option initOption(String title,String unit){
        Option option = new Option();
        option.title(title);
        option.tooltip().trigger(Trigger.axis);//坐标轴指示器
        option.toolbox().x("right").y("center").orient(vertical).show(true).feature(Tool.dataView,
                new MagicType(Magic.line, Magic.bar).show(true), Tool.restore, Tool.saveAsImage);//切换柱状图等摆放在右侧中间
        option.calculable(true);
        ValueAxis valueAxis = new ValueAxis();
        //valueAxis.axisLabel().formatter("{value} 人");//y轴单位
        valueAxis.axisLabel().formatter("{value} "+unit);
        option.yAxis(valueAxis);
        ItemStyle colorStyle = new ItemStyle();
        colorStyle.normal().color("#E87C25");
        return option;
    }

一个折线

/**
     * 查询某一个管道
     * @param startTime
     * @param endTime
     * @param dev
     * @param devlist
     * @return
     */
    public String chartDayDataOne(String startTime, String endTime, String dev, List<Dev> devlist){
        List<Dev> list = reportFormService.getDayInfoNoPage(startTime,endTime,dev);
        String devName = "";
        for (Dev d :devlist) {
            if(d.getDevId().equals(dev)){
                devName = d.getDevName();
                break;
            }
        }
        Option option = initOption("日报表折线图","");
        List<String> xDataList = new ArrayList<String>();
        List<String> dDataList = new ArrayList<String>();
        xDataList = DateUtils.forDayDateNoYear(startTime,endTime);
        List<String> year = DateUtils.forDayDate(startTime, endTime);
        int length=list.size();
        for(String y: year) {
            int i=0;
            for ( i=0;i<length;i++) {
                if(list.get(i).getRecDate().equals(y)){
                    dDataList.add(list.get(i).getDataValue());
                    break;
                }
            }
            if(i==length){
                dDataList.add("0");
            }
        }
        option.legend().data(devName).setX("right");
        int xsize=xDataList.size();
        String[] xArray = (String[])xDataList.toArray(new String[xsize]);
        int dsize=dDataList.size();
        String[] dArray = (String[])dDataList.toArray(new String[dsize]);

        CategoryAxis categoryAxis = new CategoryAxis();
        categoryAxis.boundaryGap(true);
        AxisLabel axisLabel = new AxisLabel();
        axisLabel.setRotate(60);//设置x轴文字旋转
        categoryAxis.data(xArray).setAxisLabel(axisLabel);
        option.xAxis(categoryAxis);

        Line line1 = new Line();//折线1
        line1.name(devName);
        line1.data(dArray);
        option.series(line1);//折线放入
        Gson gson = new Gson();
        String json = gson.toJson(option);
        return json;
    }

如果是2个条折线可以继续往下看

/**
     * 查询所有的管道（2个）
     * @param startTime
     * @param endTime
     * @param dev
     * @param devlist
     * @return
     */
    public String chartDayDataAll(String startTime, String endTime, String dev, List<Dev> devlist){
        String ID1 = devlist.get(0).getDevId();
        String ID2 = devlist.get(1).getDevId();
        List<Dev> list1 = reportFormService.getDayInfoNoPage(startTime,endTime,ID1);
        List<Dev> list2 = reportFormService.getDayInfoNoPage(startTime,endTime,ID2);
        Option option = initOption("日报表折线图","");
        List<String> xDataList = new ArrayList<String>();
        List<String> dDataList = new ArrayList<String>();
        List<String> dDataList2 = new ArrayList<String>();
        xDataList = DateUtils.forDayDateNoYear(startTime,endTime);
        List<String> year = DateUtils.forDayDate(startTime, endTime);
        //两个for循环
        int length1=list1.size();
        int length2=list2.size();
        for(String y: year) {
            int i=0;
            for ( i=0;i<length1;i++) {
                if(list1.get(i).getRecDate().equals(y)&&list1.get(i).getDevId().equals(ID1)){
                    dDataList.add(list1.get(i).getDataValue());
                    break;
                }
            }
            if(i==length1){
                dDataList.add("0");
            }
        }
        for(String y: year) {
            int i=0;
            for ( i=0;i<length2;i++) {
                if(list2.get(i).getRecDate().equals(y)&&list2.get(i).getDevId().equals(ID2)){
                    dDataList2.add(list2.get(i).getDataValue());
                    break;
                }
            }
            if(i==length2){
                dDataList2.add("0");
            }
        }
        //
        option.legend().data("管道一","管道二").setX("right");
        int xsize=xDataList.size();
        String[] xArray = (String[])xDataList.toArray(new String[xsize]);
        int dsize=dDataList.size();
        String[] dArray = (String[])dDataList.toArray(new String[dsize]);

        CategoryAxis categoryAxis = new CategoryAxis();
        categoryAxis.boundaryGap(true);
        AxisLabel axisLabel = new AxisLabel();
        axisLabel.setRotate(60);
        categoryAxis.data(xArray).setAxisLabel(axisLabel);
        option.xAxis(categoryAxis);

        Line line1 = new Line();
        line1.name("管道一");
        line1.data(dArray);

        option.series(line1);
        Line line2 = new Line();
        int dsize2=dDataList.size();
        String[] dArray2 = (String[])dDataList2.toArray(new String[dsize2]);
        line2.data(dArray2);
        line2.name("管道二");
        option.series(line2);
        Gson gson = new Gson();
        String json = gson.toJson(option);
        return json;
    }

最后，调用的时候，这样就可以实现动态一条或者两条，而不是固定的

/**
     * 折线图
     * @param request
     * @return
     */
    @RequestMapping(value = "chartDayData")
    @ResponseBody
    public String chartDayData(HttpServletRequest request){
        String startTime = request.getParameter("startTime");
        String endTime = request.getParameter("endTime");
        String dev = request.getParameter("dev");
        List<Dev> devlist  = reportFormService.devList(factId);
        if(dev==""&&devlist.size()==2){
            return chartDayDataAll(startTime,endTime,dev,devlist);
        }else{
            return chartDayDataOne(startTime,endTime,dev,devlist);
        }

    }