↑
↓

echarts饼图（个人复制代码用）

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="width: 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="width: 100%; height: 500px;"></div>
        <div class="zzcMain">
            <div class="zzc">
                <i class="fa fa-2x fa-spinner fa-spin"></i>&nbsp;<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>
jsp

 

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;
    }
java

 

 

posted @ 2021-07-13 10:10  爱跳舞的程序员  阅读(58)  评论(0)  编辑  收藏  举报