【Echarts】Echarts2.0动态加载扇形图。

来源：互联网发布：化妆包淘宝网编辑：程序博客网时间：2024/05/01 14:20

Echarts在数据可视化方面广泛使用，记录一个使用Echarts动态加载扇形图的例子。方便以后使用。

【Echarts】2.0官方API：http://echarts.baidu.com/echarts2/doc/example.html

【Echarts】3.0官方API：http://echarts.baidu.com

HTML代码：

<head>    <title>社会治理</title><meta name="viewport" content="width=device-width, initial-scale=1">    <meta http-equiv="keywords" content="keyword1,keyword2,keyword3">    <meta http-equiv="description" content="this is my page">    <meta http-equiv="content-type" content="text/html; charset=UTF-8">        <!--<link rel="stylesheet" type="text/css" href="./styles.css">--><script src="/LeaderDeskBak/static/jquery/jquery-1.8.3.js" charset="utf-8"></script><script type="text/javascript" src="/LeaderDeskBak/static/js/echarts-all.js" charset="utf-8"></script>  <script type="text/javascript" src="/LeaderDeskBak/static/echarts/esl.js" charset="utf-8"></script><script type="text/javascript" src="/LeaderDeskBak/static/echarts/echarts.js" charset="utf-8"></script><script type="text/javascript" src="/LeaderDeskBak/static/jquery/jquery-1.9.1.min.js" charset="utf-8"></script></head><body><div id="total" style="width: 100%;text-align: center;height: 30px;padding-top:5px;vertical-align:center ">        <label style="font-size:16px;font-weight:  bolder;color: #4782DB">城市事件上报情况统计</label>        <div class="fenge" style="height:10px;width:100%;"></div><div id="shuju" class="tubiao" style="height:400px;width:100%; text-align:right"> </div>     </div></body><script type="text/javascript">//绘制图表需要的指标    var indexCodes ='';    //图表的时间范围var statisticsDate = 10;//图表的地域范围var statisticsArea ='441900' ;  $(document).ready(function() {drawtu();  });   function drawtu(){require.config({   paths:{       echarts:'/LeaderDeskBak/static/echarts'} });    require(    ['echarts',    'echarts/theme/macarons', 'echarts/chart/line', 'echarts/chart/pie',      'echarts/chart/bar', 'echarts/chart/funnel', 'echarts/chart/gauge'],function (ec,theme) {                  drawGovernanceforDriver(ec,theme);});}        function drawGovernanceforDriver(ec,theme){var myChart = echarts.init(document.getElementById('shuju')); var options = {    tooltip : {        trigger: 'item',        formatter: "{a} <br/>{b} : {c} ({d}%)"    },    legend: {        //orient : 'vertical',  //竖着显示        x : 'left',        data:[]    },    toolbox: {    orient : 'vertical',        x : 'right',        y: 'bottom',        show : true,        feature : {            /* magicType : {  //功能列                show: true,                 type: ['pie', 'funnel'],          //图饼转换                option: {                    funnel: {                        x: '25%',                        width: '50%',                        funnelAlign: 'center',                        max: 1548                    }                }            }, */            restore : {show: true},        }    },    calculable : false,    series : [        {            name:'数据占比',            type:'pie',            center:['50%', '60%'],//圆心坐标            radius : ['40%', '60%'],//内外圆半径            itemStyle : {                normal : {                    label : {                        show : true                    },                    labelLine : {                        show : true,                        length:'1'                    }                },                emphasis : {                    label : {                        show : true,                        position : 'center',                        textStyle : {                            fontSize : '30',                            fontWeight : 'bold'                        }                    }                }            },            data:[]        }    ]};                    myChart.showLoading({text: "图表数据正在努力加载..."});      $.ajax({type: 'GET',url : '/LeaderDeskBak/lodeCockPit/getGovernanceforDriver',                dataType: 'json',                success:function(data){var legendData=[];var seriesData=[];if(data!=null && data.legendArr.length>0){     legendData=data.legendArr;     for(var i=0;i<data.legendArr.length;i++){     seriesData.push({     'value':data.valueArr[i],           'name': legendData[i],});     }};options.legend.data=legendData;options.series[0]['data']=seriesData;myChart.setOption(options);},                error:function(){//数据接口异常处理var legendData=[''];var seriesData = [{name:'',type: 'bar',data: [0]}];         options.legend.data=legendData;options.series.data=seriesData;myChart.setOption(options);},                   complete:function(){     //不管数据接口成功或异常，都终于载入提示      myChart.hideLoading();//停止动画载入提示 }});}                    </script></html>

controller代码：

@ResponseBody@RequestMapping(value="/getGovernanceforDriver")public Map<String, Object> getGovernanceforDriver(){logger.info("333");Map<String, Object> data = service.getGovernanceforDriver();return data;}

service层代码：

public Map<String, Object> getGovernanceforDriver(){List<Governance> governances = dao.getGovernance();Map<String, Object> data = new HashMap<String, Object>();List<Object> legendArr = new ArrayList<Object>();List<Object> valueArr = new ArrayList<Object>();if(governances.size()>0){List<GovernanceforDriver> governanceforDrivers = new ArrayList<GovernanceforDriver>();for(Governance governance:governances){GovernanceforDriver governanceforDriver = new GovernanceforDriver();governanceforDriver.setCommunityName(governance.getCommunityName());governanceforDriver.setCommunityId(governance.getCommunityId());governanceforDrivers.add(governanceforDriver);legendArr.add(governanceforDriver.getCommunityName());valueArr.add(governanceforDriver.getCommunityId());}data.put("legendArr", legendArr);data.put("valueArr",valueArr);}else{data.put("legendArr", null);data.put("valueArr",null);}return data;}

效果图：

仅此记录，以防忘记。

0 0