折线图

Posted 2020-08-06 箜篌浅醉

@RequestMapping(value = {"","list"})
    public String viewList(Model model, HttpServletResponse response,HttpServletRequest request){
        String start = request.getParameter("start");
         List listyue = new ArrayList();
            List listsl= new ArrayList();
             List<Map<String, Object>> Viewlist = boNewViewService.Viewlist(start);
             for(Map<String,Object> vi : Viewlist){
                 String yue = vi.get("yue").toString();
                 String sl = vi.get("sl").toString();
                 String view = vi.toString();
                 listyue.add(yue);
                 listsl.add(sl);
             }
            model.addAttribute("listyue", listyue);
            model.addAttribute("listsl", listsl);
            model.addAttribute("Viewlist", Viewlist);
         return "modules/dmwz/BoNewViewList";
    }

 <!-- 为ECharts准备一个具备大小（宽高）的Dom -->
    <div id="main" style="height:400px; width: 100%"></div>
    <div id="" style="height:300px; width: 100%">
    <table class="table table-striped table-bordered table-condensed">
        <tr>
              <td style="font-weight: bold;">访问月份 </td>
              <td style="font-weight: bold;"> 访问次数</td>
        </tr>
        <c:forEach items="${Viewlist}" var="Viewlist">
            <tr>
                 <td> ${Viewlist.yue} </td>
                 <td>${Viewlist.sl}</td>
            </tr>
        </c:forEach>
    </table>
    </div>
    <!-- ECharts单文件引入 -->
    <script type="text/javascript">
        // 基于准备好的dom，初始化echarts实例
        var myChart = echarts.init(document.getElementById(‘main‘));
        var num = [];
        var ss =[];
        
        <c:forEach items="${listyue}" var="listyue">
            num.push("${listyue}");
             
        </c:forEach> 
        <c:forEach items="${listsl}" var="listsl">
            ss.push("${listsl}");
            
        </c:forEach>
        
 
         option = {
                 title : {
                       text: ‘网页访问量‘, 
                 },
                 tooltip : {
                     trigger: ‘axis‘
                 },
                 legend: {
                     data:[‘访问量‘]
                 },
                 toolbox: {
                     show : true,
                     feature : {
                         mark : {show: true},
                       /*   dataView : {show: true, readOnly: false}, */
                         magicType : {show: true, type: [‘line‘, ‘bar‘]},
                        /*  restore : {show: true}, */
                         saveAsImage : {show: true}
                     }
                 },
                 calculable : true,
                 xAxis : [
                     {
                         type : ‘category‘,
                         name : ‘月份‘,
                         boundaryGap : false,
                        axisLabel : {
                            formatter:‘{value}月 ‘
                        }, 
                         data : num
                     }
                 ],
                 yAxis : [
                     {
                         type : ‘value‘,
                        name : ‘访问量‘,
                         axisLabel : {
                             formatter: ‘{value} ‘
                         }, 
                        
                    splitNumber:5
                     }
                 ],
                 series : [
                     {
                         name:‘访问量‘,
                         type:‘line‘,
                         data: ss, 
                        itemStyle : { normal: {label : {show: true}}},
                         markLine : {
                           /*   data : [
                                 {type : ‘average‘, name: ‘平均值‘}
                             ] */
                         }
                     },
                 ]
             };
        
       
            // 使用刚指定的配置项和数据显示图表。
            myChart.setOption(option);
            window.onresize = myChart.resize;
    </script>