echars折线图

echars折线图

• 首先HTML中先放一个容器

•  <script src="/js/echarts.js"></script>
   <!-- 为ECharts准备一个具备大小（宽高）的Dom -->
   <div id="main" style="width: 900px;height:300px;" ></div>
  

• js

    <script type="text/javascript">
    					    // 基于准备好的dom，初始化echarts实例
    					    var myChart = echarts.init(document.getElementById('main'));
    					
    					    // 指定图表的配置项和数据
    					    var option = {
    					        title: {
    					            text: '过程数据折线图'
    					        },
    					        tooltip: {
    					            trigger: 'axis'
    					        },
    					        legend: {
    					            data:['车速','HC','NO','CO2','CO','O2']
    					        },
    					        grid: {
    					            left: '3%',
    					            right: '4%',
    					            bottom: '3%',
    					            containLabel: true
    					        },
    					        toolbox: {
    					            feature: {
    					                saveAsImage: {}
    					            }
    					        },
    					        xAxis: {
    					            type: 'category',
    					            boundaryGap: false,
    					            data: [5,10,15,20,25,30,35,40,45,50,55,60,65,70,75,80,85,90,95,100]
    					        },
    					        yAxis: {
    					            type: 'value'
    					        },
    					        series: [
    					            {
    					                name:'车速',
    					                type:'line',
    					                stack: '总量',
    					                data:${f}
    					            },
    					            {
    					                name:'HC',
    					                type:'line',
    					                stack: '总量',
    					                data:${a}
    					            },
    					            {
    					                name:'NO',
    					                type:'line',
    					                stack: '总量',
    					                data:${b}
    					            },
    					            {
    					                name:'CO2',
    					                type:'line',
    					                stack: '总量',
    					                data:${c}
    					            },
    					            {
    					                name:'CO',
    					                type:'line',
    					                stack: '总量',
    					                data:${d}
    					            },
    					            {
    					                name:'O2',
    					                type:'line',
    					                stack: '总量',
    					                data:${e}
    					            }
    					        ]
    					    };
    					
    					    // 使用刚指定的配置项和数据显示图表。
    					    myChart.setOption(option);
    					</script>
  

• ajax发送请求

     flag.jcjg.addDialog = $('#jcjg_add').dialog(
    		            $.ajax({
    		                url: ' /JcResult/echars',
    		                method: 'POST',
    		                data : {
    		                    titlename : title1,
    		                    cljcrlsh :row.cljcrlsh,
    		                    jccs:row.jccs
    		                },
    		                dataType: 'text',
    		                success:function (d) {
    		                   $("#main").html(d)
    		                }
    		            })
    		        )
  

• 后台controller
  @RequestMapping("/JcResult/echars")
  public ModelAndView getehcars(String cljcrlsh, String jccs, String titlename) {
  ArrayList hc = new ArrayList<>();
  ArrayList co2 = new ArrayList<>();
  ArrayList o2 = new ArrayList<>();
  ArrayList no = new ArrayList<>();
  ArrayList sscs = new ArrayList<>();
  ArrayList co = new ArrayList<>();

    //        ArrayList<Object> hc = new ArrayList<>();
    //        ArrayList<Object> hc = new ArrayList<>();
            ModelAndView mv = new ModelAndView();
    
    
            JjkjAsmProcess ap=null;
            List<JjkjAsmProcess> result = jcResultService.getJjkjAsm2(cljcrlsh, jccs);
    
            if (result.size() != 0) {
                for (int i = 0; i < result.size(); i++) {
                    ap = result.get(i);
                    long noasm = ap.getNo();
                    long co2asm = ap.getCo2();
                    long coasm = ap.getCo();
                    long hcasm = ap.getHc();
                    long sscsasm = ap.getSscs();
                    long o2asm = ap.getO2();
    
                    no.add(noasm);
                    co2.add(co2asm);
                    o2.add(o2asm);
                    hc.add(hcasm);
                    sscs.add(sscsasm);
                    co.add(coasm);
    
                }
                mv.addObject("a", hc);
                mv.addObject("b",no);
                mv.addObject("c",co2);
                mv.addObject("d",co);
                mv.addObject("e",o2);
                mv.addObject("f",sscs);
    
                mv.setViewName("jsp/echartsJsp/asmechars");
            }
            return mv;
        }