首页 > 代码库 > 折线图

折线图

@RequestMapping(value = http://www.mamicode.com/{"","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>

 

折线图