jfinal + eCharts 饼图的数据交互 (数据库中读取数据)

    

    前一段时间碰到了一个小功能，利用echarts饼图显示数据库中部门员工的值，我们使用的java框架是 jfinal 。

    话不多说先看效果图吧。

                                       

引入JS文件：echarts.min.js    echarts.js       jquery.min.js

html代码：<div id="echarts" style="width: 600px; height: 600px; margin: 0 auto;"></div>

js代码：function loadOneColumn() {
        // 基于准备好的dom，初始化echarts实例
        var myeChart = echarts.init(document.getElementById('echarts'));


        // 指定图表的配置项和数据
        myeChart.setOption({
        title: {
                text: '岗位员工人数展示',
                // subtext: '岗位员工人数',
                x:'center'
            },
            tooltip: {
            trigger: 'item',
           formatter: "{a} <br/>{b} : {c} ({d}%)"
            },
            legend: {
            orient: 'vertical',
           left: 'left',
                data: []
            },
            toolbox: {
                show: true,
                feature: {
                    mark: { show: true },
                    dataView: { show: true, readOnly: true }, // 数据视图工具，可以展现当前图表所用的数据
                    restore: { show: true }, // 配置项还原
                    saveAsImage: { show: true }  // 把图表保存为图片
                }
            },
            series: [{
                name: '员工人数',
                type: 'pie',
                radius: '65%',
                center: ['50%', '50%'],
                itemStyle: {
               emphasis: {
                   shadowBlur: 10,
                   shadowOffsetX: 0,
                   shadowColor: 'rgba(0, 0, 0, 0.5)'
               }
           },
                data: []
            }]

        });

        myeChart.showLoading();    //数据加载完之前先显示一段简单的loading动画
        var names = [];    //类别数组（用于存放饼图的类别）
        var brower = [];
        
        $.ajax({
            type: 'post',
            url: '/admin/echarts/selectEcharts',//请求数据的地址
            dataType: "json",        //返回数据形式为json
            success: function (result) {
                //请求成功时执行该函数内容，result即为服务器返回的json对象  result.list,
                $.each(result, function (index,item) {
                    names.push(item.name);    //挨个取出类别并填入类别数组 
                    brower.push({
                        name: item.name,
                        value: item.value
                    });
                });
                myeChart.hideLoading();    //隐藏加载动画
                myeChart.setOption({        //加载数据图表
                    legend: {
                        data: names
                    },
                    series: [{
                        data: brower
                    }]
                });
            },
            error: function (errorMsg) {
                //请求失败时执行该函数
                alert("图表请求数据失败!");
                myeChart.hideLoading();
            }
        });
      };
      

     loadOneColumn();

js部分代码完毕。legend 里面的data显示的是有哪些部门，series 里面的data接收的是从后台传过来的json数据。

data数据格式：[{name: "会计组", value: 1}, {name: "系统集成组", value: 1}, {name: "软件开发组", value: 12}]

java 代码很简单，只需要返回数据库的值就行了。   renderJson(Db.find(sql)); 

拓展：

       toolbox(工具栏)学习。内置有导出图片、数据视图、动态类型切换、数据区域缩放、重置五个工具。 最主要的是 feature。

        下面来分别介绍这五个工具

         saveAsImage：这个工具可以把图表保存为图片。里面有些常用的参数，type->保存图片的格式，

                               name->保存文件的名字，backgroundColor->保存图片的背景色，

                               show->是否显示该工具，还有一些别的属性可以自己再使用的时候查询API文档。

         restore：配置项还原。主要属性是show->是否显示该工具。

         dataView：数据视图工具，可以展现当前图表所用的数据，编辑后可以动态更新。show->是否显示该工具，

                          readOnly->是否不可编辑，optionToContent->自定义 dataView 展现函数，

                          用以取代默认的 textarea 使用更丰富的数据编辑。可以返回 dom 对象或者 html 字符串，

                          backgroundColor->数据视图浮层背景色。

        dataZoom：数据区域缩放。目前只支持直角坐标系的缩放（这里的含义就是柱状体，折线图可以缩放，

                            但是像饼状图就不能缩放）。show->是否显示该工具。

       magicType：动态类型切换。show->是否显示该工具，type->这是个数组，启用的动态类型，

                         包括'line'（切换为折线图）, 'bar'（切换为柱状图）, 'stack'（切换为堆叠模式）, 'tiled'（切换为平铺模式）。

      代码部分：

            toolbox: { //可视化的工具箱
                show: true,
                feature: {
                    dataView: { //数据视图
                        show: true
                    },
                    restore: { //重置
                        show: true
                    },
                    dataZoom: { //数据缩放视图
                        show: true
                    },
                    saveAsImage: {//保存图片
                        show: true
                    },
                    magicType: {//动态类型切换
                        type: ['bar', 'line']
                    }
                }

            }

第一次使用echarts，不好的地方请多指教。

源代码地址： https://download.****.net/download/evloutionplus/10446331