首页 > 代码库 > 折线图
折线图
@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>
折线图
声明:以上内容来自用户投稿及互联网公开渠道收集整理发布,本网站不拥有所有权,未作人工编辑处理,也不承担相关法律责任,若内容有误或涉及侵权可进行投诉: 投诉/举报 工作人员会在5个工作日内联系你,一经查实,本站将立刻删除涉嫌侵权内容。