echarts饼图 +easyui 异步显示数据

来源：互联网发布：js div class 编辑：程序博客网时间：2024/05/17 22:39

刚开始编写echarts的时候一头的雾水，不知道这个动态显示数据应该怎么来表示，后来在不懈地摸索下终于把这一模块的问题解决。

前端我是用的easyui来写的，里面的一些插件datagrid等十分好用，一些朋友可以去尝试一下。在controller中我使用了JsonResult 来

返回一个json数据返回。数据比较简单。希望大家不要介意。

    @RequestMapping(value = "/chartByArea")    @ResponseBody    public JsonResult chartByArea(){        List<Map> objList = userService.chartByArea();        JsonResult result = new JsonResult();        Map<String,List<Map>> data = new HashMap<>();        data.put("objList",objList);        result.setStatus("1");        result.setData(data);        return result;    }
public class JsonResult {    private String status;    private Map data;    private String msg;    public String getStatus() {        return status;    }    public void setStatus(String status) {        this.status = status;    }    public Map getData() {        return data;    }    public void setData(Map data) {        this.data = data;    }    public String getMsg() {        return msg;    }    public void setMsg(String msg) {        this.msg = msg;    }}

在xml文件里要注意他的resultType
  <select id="chartByArea" resultType="java.util.HashMap">    SELECT    D.AREA_CODE title,COUNT(D.AREA_CODE) amount    FROM  DUSER D    GROUP BY  d.AREA_CODE  </select>

下面是jsp中的重点
            <div class="easyui-panel" style="width: 100%"                 data-options="title:'员工区域分布'">                <div id="chart0" style="width: 350px;height:200px ">                    <div class="chart0-content">加载数据...</div>                </div>            </div>

$(document).ready(function(){        $.get('${host}/user/chartByArea', function(data){            var box = $("#chart0");            if(data.status === "1"){                var objList = data.data.objList;                var chartData = [];                $.each(objList, function(i, obj){                    var tobj = {                        value:obj.AMOUNT,                        name: chart0formatter(obj.TITLE)                    };                    chartData.push(tobj);                });                box.find('.chart0-content').remove();                var chart0 = echarts.init(document.getElementById('chart0'));                var option0 = {                    tooltip : {trigger: 'item',formatter: "{a} <br/>{b} : {c} ({d}%)"},                    color:['#c23531','#2f4554'],                    legend:{orient: 'vertical', left: 'left',data: ['溪洛渡','成都']},                    series : [{name: '所在地址',type: 'pie',radius: '55%',center:['65%','60%'],                        data:[{value:2, name:'溪洛渡'}]  }]                };                option0.series[0].data = chartData;                chart0.setOption(option0);            }else{                box.find('.chart0-content').html('请求失败');            }        });        function chart0formatter(TITLE){            if(TITLE === '1'){                return '溪洛渡';            }else if(TITLE === '2') {                return '成都';            }        }}

记得xml里面写的title和amount,在jsp上赋值给value,name时要大写。这两个属性是放在option里面的series中data的显示式样。
可以通过series里面type来设置样式，pie 是饼图；

阅读全文

1 0