jsp
<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%> <%@include file="/commons/include/html_doctype.html"%> <html> <head> <title>最大负荷对比</title> <%@include file="/commons/include/get.jsp"%> <script type="text/javascript" src="${ctx}/js/echarts/echarts.min.js"></script> <link rel="stylesheet" type="text/css" href="${ctx}/styles/oms/ddrb/ddrb.css"> <script type="text/javascript"> function pFn(tjrq) { $(".zzcMain").show(); $("#tjrqForm").submit(); } $(function(){ $(".zzcMain").hide(); }); </script> </head> <body> <div class="panel" style=" 100%"> <span style="color: #6983BD;">日期: </span> <form id="tjrqForm" method="post" action="pieDate.ht"> <input type="text" value="${tjrq}" name="tjrq" size="14" onclick="WdatePicker({dateFmt:'yyyy-MM-dd',isShowOK:false,maxDate:'%y-%M-#{%d-1}',onpicked:function(dp){pFn(dp.cal.getNewDateStr())}})" class="Wdate" style="color: #6983BD;"> </form> <div id="app" style=" 100%; height: 500px;"></div> <div class="zzcMain"> <div class="zzc"> <i class="fa fa-2x fa-spinner fa-spin"></i> <span>正在查询,请稍候...</span> </div> </div> </div> <script type="text/javascript"> // 基于准备好的dom，初始化echarts实例 var app = echarts.init(document.getElementById('app')); var data = genData(); var arr = null; //$(function(){ var str = ${data}; arr = str.split(","); //}); var option = { title: { text: '日地方电电量', x: 'center', subtext:'单位：兆瓦时（mwh）' }, tooltip: { trigger: 'item', formatter: "{a} <br/>{b} : {c} ({d}%)" }, legend: { type: 'scroll', orient: 'vertical', right: 10, top: 20, bottom: 20, data: data.legendData, selected: data.selected }, series: [{ name: '', type: 'pie', radius: '55%', center: ['40%', '50%'], data: data.seriesData, label:{ //饼图图形上的文本标签 normal:{ show:true, position:'inner', //标签的位置 textStyle : { fontWeight : 300 , fontSize : 16 //文字的字体大小 }, formatter:'{c} mwh' } }, itemStyle: { emphasis: { shadowBlur: 10, shadowOffsetX: 0, shadowColor: 'rgba(0, 0, 0, 0.5)' } } }, { name: '', type: 'pie', radius: '55%', center: ['40%', '50%'], data: data.seriesData, label:{ //饼图图形上的文本标签 normal:{ show:true, position:'outer', //标签的位置 textStyle : { fontWeight : 300 , fontSize : 16 //文字的字体大小 }, formatter:'{b} {d}%' } }, itemStyle: { emphasis: { shadowBlur: 10, shadowOffsetX: 0, shadowColor: 'rgba(0, 0, 0, 0.5)' } } }] }; function genData() { var nameList = ['生物质电量','地方水电电量','地方光电电量','地方风电电量'] var legendData = []; var seriesData = []; var arr = ${data}.split(","); var selected = {}; for(var i = 0; i < 4; i++) { seriesData.push({ name: nameList[i], value: arr[i] }); legendData.push(nameList[i]); } return { legendData: legendData, seriesData: seriesData, selected: selected }; } app.setOption(option); </script> </body> </html>
java
/** * 饼图 */ @RequestMapping("pieDate") public ModelAndView pieDate(HttpServletRequest request, HttpServletResponse response) throws Exception { ModelAndView mv = new ModelAndView("/yjdlbbchart/pieDate.jsp"); SimpleDateFormat sdf = new SimpleDateFormat("yyyy-MM-dd"); String tjrq = request.getParameter("tjrq"); Calendar c = Calendar.getInstance(); if (tjrq == null) { c.add(Calendar.DATE, -1); tjrq = sdf.format(c.getTime()); } String data = ""; String rq = "\'" + tjrq + "\'"; data = "111"+ "," + "222"+ "," +"333"+ "," + "444" ; data = "\'" + data + "\'"; mv.addObject("tjrq", tjrq); mv.addObject("rq", rq); mv.addObject("data", data); return mv; }