echarts饼图 +easyui 异步显示数据

最新推荐文章于 2019-03-31 22:36:54 发布

原创最新推荐文章于 2019-03-31 22:36:54 发布 · 3.9k 阅读

3 ·

CC 4.0 BY-SA版权

文章标签：

#echarts #easyui #java

echarts 异步数据显示专栏收录该内容

1 篇文章

订阅专栏

本文介绍如何使用ECharts结合EasyUI实现动态数据显示，并通过Java后端提供数据支持。具体包括前端页面设计、数据交互及图表配置。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

刚开始编写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 是饼图；