1. 首页
  2. 博客
  3. 详情

ECharts2.0的Java类库使用

LovePanda  • 

  本篇博文转自博客园:http://www.cnblogs.com/always-online/p/5163547.html;本博客的后台也用到这个技术,只是用到的是折线图,博客园的这篇博客中介绍了柱状图,折线图和饼状图,也比较详细,特此修改后拿出来和大家分享。

一、简介

  EChart是百度开发的js图表软件,用它我们可以很方便地以图形化的方式对数据进行分析统计。该种方式js在页面动态拼接json数据,再进行渲染。Echarts官网:http://echarts.baidu.com/这种方法的优点是,灵活,可以随时进行修改。缺点是js代码多,难以维护。此时我们可以Java EChart插件,在后端构造好option数据,最后在页面直接使用构造好的option数据,渲染效果。下载地址为:http://git.oschina.net/free/ECharts;目前Java类库的版本的最高版本为2.2.7,而百度官网已经更新到3.0了,所以暂时只能用2.2的最后一个版本了。要想用3.0的朋友还得等oschina的作者进行更新了。
  EChart提供链式的调用方法,使用也比较方便。它依赖Google的gson包,gson下载地址为:https://github.com/google/gson 。gson与EChart加入项目依赖。
  maven依赖如下:

<dependency>
  <groupId>com.github.abel533</groupId>
  <artifactId>ECharts</artifactId>
  <version>2.2.7</version>
</dependency>
<dependency>
    <groupId>com.google.code.gson</groupId>
    <artifactId>gson</artifactId>
    <version>2.5</version>
</dependency>

二、示例

1、柱状图

/**
     * 柱状图
     * 
     * @param isHorizontal
     *            是否水平放置
     */
    public void testBar(boolean isHorizontal) {
        String[] citis = { "广州", "深圳", "珠海", "汕头", "韶关", "佛山" };
        int[] datas = { 6030, 7800, 5200, 3444, 2666, 5708 };
        String[] colors = { "rgb(2,111,230)", "rgb(186,73,46)", "rgb(78,154,97)", "rgb(2,111,230)", "rgb(186,73,46)", "rgb(78,154,97)" };
        String title = "地市数据";
        GsonOption option = new GsonOption();
        option.title(title); // 标题
        // 工具栏
        option.toolbox().show(true).feature(Tool.mark, // 辅助线
                Tool.dataView, // 数据视图
                new MagicType(Magic.line, Magic.bar),// 线图、柱状图切换
                Tool.restore,// 还原
                Tool.saveAsImage);// 保存为图片
        option.tooltip().show(true).formatter("{a} <br/>{b} : {c}");//显示工具提示,设置提示格式
        option.legend(title);// 图例
        Bar bar = new Bar(title);// 图类别(柱状图)
        CategoryAxis category = new CategoryAxis();// 轴分类
        category.data(citis);// 轴数据类别
        // 循环数据
        for (int i = 0; i < citis.length; i++) {
            int data = datas[i];
            String color = colors[i];
            // 类目对应的柱状图
            Map<String, Object> map = new HashMap<String, Object>(2);
            map.put("value", data);
            map.put("itemStyle", new ItemStyle().normal(new Normal().color(color)));
            bar.data(map);
        }
        if (isHorizontal) {// 横轴为类别、纵轴为值
            option.xAxis(category);// x轴
            option.yAxis(new ValueAxis());// y轴
        } else {// 横轴为值、纵轴为类别
            option.xAxis(new ValueAxis());// x轴
            option.yAxis(category);// y轴
        }
        option.series(bar); 
    }

生成的json数据如下:

{
  "title": {
    "text": "地市数据"
  },
  "toolbox": {
    "feature": {
      "mark": {
        "show": true,
        "title": {
          "mark": "辅助线开关",
          "markClear": "清空辅助线",
          "markUndo": "删除辅助线"
        },
        "lineStyle": {
          "color": "#1e90ff",
          "type": "dashed",
          "width": 2
        }
      },
      "dataView": {
        "show": true,
        "title": "数据视图",
        "readOnly": false,
        "lang": ["数据视图", "关闭", "刷新"]
      },
      "magicType": {
        "show": true,
        "title": {
          "line": "折线图切换",
          "stack": "堆积",
          "bar": "柱形图切换",
          "tiled": "平铺"
        },
        "type": ["line", "bar"]
      },
      "restore": {
        "show": true,
        "title": "还原"
      },
      "saveAsImage": {
        "show": true,
        "title": "保存为图片",
        "type": "png",
        "lang": ["点击保存"]
      }
    },
    "show": true
  },
  "tooltip": {
    "formatter": "{a} <br/>{b} : {c}",
    "show": true
  },
  "legend": {
    "data": ["地市数据"]
  },
  "xAxis": [{
    "type": "category",
    "data": ["广州", "深圳", "珠海", "汕头", "韶关", "佛山"]
  }],
  "yAxis": [{
    "type": "value"
  }],
  "series": [{
    "name": "地市数据",
    "type": "bar",
    "data": [{
      "value": 6030,
      "itemStyle": {
        "normal": {
          "color": "rgb(2,111,230)"
        }
      }
    }, {
      "value": 7800,
      "itemStyle": {
        "normal": {
          "color": "rgb(186,73,46)"
        }
      }
    }, {
      "value": 5200,
      "itemStyle": {
        "normal": {
          "color": "rgb(78,154,97)"
        }
      }
    }, {
      "value": 3444,
      "itemStyle": {
        "normal": {
          "color": "rgb(2,111,230)"
        }
      }
    }, {
      "value": 2666,
      "itemStyle": {
        "normal": {
          "color": "rgb(186,73,46)"
        }
      }
    }, {
      "value": 5708,
      "itemStyle": {
        "normal": {
          "color": "rgb(78,154,97)"
        }
      }
    }]
  }]
}

生成的柱状图如下:
586854-20160127160325629-1736973412.png
2、折线图


/**
     * 折线图
     * 
     * @param isHorizontal
     *            是否水平放置
     */
    public void testLine(boolean isHorizontal) {
        String[] types = { "邮件营销", "联盟广告", "视频广告" };
        int[][] datas = { { 120, 132, 101, 134, 90, 230, 210 }, { 220, 182, 191, 234, 290, 330, 310 }, { 150, 232, 201, 154, 190, 330, 410 } };
        String title = "广告数据";
        GsonOption option = new GsonOption();
        option.title().text(title).subtext("虚构").x("left");// 大标题、小标题、位置
        // 提示工具
        option.tooltip().trigger(Trigger.axis);// 在轴上触发提示数据
        // 工具栏
        option.toolbox().show(true).feature(Tool.saveAsImage);// 显示保存为图片
        option.legend(types);// 图例
        CategoryAxis category = new CategoryAxis();// 轴分类
        category.data("周一", "周二", "周三", "周四", "周五", "周六", "周日");
        category.boundaryGap(false);// 起始和结束两端空白策略
        // 循环数据
        for (int i = 0; i < types.length; i++) {
            Line line = new Line();// 三条线,三个对象
            String type = types[i];
            line.name(type).stack("总量");
            for (int j = 0; j < datas[i].length; j++)
                line.data(datas[i][j]);
            option.series(line);
        }
        if (isHorizontal) {// 横轴为类别、纵轴为值
            option.xAxis(category);// x轴
            option.yAxis(new ValueAxis());// y轴
        } else {// 横轴为值、纵轴为类别
            option.xAxis(new ValueAxis());// x轴
            option.yAxis(category);// y轴
        }
    }

生成的json数据如下:

{
  "title": {
    "text": "广告数据",
    "subtext": "虚构",
    "x": "left"
  },
  "toolbox": {
    "feature": {
      "saveAsImage": {
        "show": true,
        "title": "保存为图片",
        "type": "png",
        "lang": ["点击保存"]
      }
    },
    "show": true
  },
  "tooltip": {
    "trigger": "axis"
  },
  "legend": {
    "data": ["邮件营销", "联盟广告", "视频广告"]
  },
  "xAxis": [{
    "boundaryGap": false,
    "type": "category",
    "data": ["周一", "周二", "周三", "周四", "周五", "周六", "周日"]
  }],
  "yAxis": [{
    "type": "value"
  }],
  "series": [{
    "name": "邮件营销",
    "type": "line",
    "stack": "总量",
    "data": [120, 132, 101, 134, 90, 230, 210]
  }, {
    "name": "联盟广告",
    "type": "line",
    "stack": "总量",
    "data": [220, 182, 191, 234, 290, 330, 310]
  }, {
    "name": "视频广告",
    "type": "line",
    "stack": "总量",
    "data": [150, 232, 201, 154, 190, 330, 410]
  }]
}

生成的折线图如下:
586854-20160127162102879-1547583736.png
3.饼图


/**
     *  饼图
     */
    public void testPie() {
        String[] types = { "邮件营销", "联盟广告", "视频广告" };
        int[] datas = { 120, 132, 101 };
        String title = "广告数据";
        GsonOption option = new GsonOption();
        option.title().text(title).subtext("虚构").x("center");// 大标题、小标题、标题位置
        // 提示工具 鼠标在每一个数据项上,触发显示提示数据
        option.tooltip().trigger(Trigger.item).formatter("{a} <br/>{b} : {c} ({d}%)");
        // 工具栏
        option.toolbox().show(true).feature(new Mark().show(true),// 辅助线
                new DataView().show(true).readOnly(false),// 数据视图
                new MagicType().show(true).type(new Magic[] { Magic.pie, Magic.funnel }), //饼图、漏斗图切换
                new Option().series(new Funnel().x("25%").width("50%").funnelAlign(X.left).max(1548)),// 漏斗图设置
                Tool.restore,// 还原
                Tool.saveAsImage);// 保存为图片
        option.legend().orient(Orient.horizontal).x("left").data(types);// 图例及位置
        option.calculable(true);// 拖动进行计算
        Pie pie = new Pie();
        // 标题、半径、位置
        pie.name(title).radius("55%").center("50%", "60%");
        // 循环数据
        for (int i = 0; i < types.length; i++) {
            Map<String, Object> map = new HashMap<String, Object>(2);
            map.put("value", datas[i]);
            map.put("name", types[i]);
            pie.data(map);
        }
        option.series(pie); 
    }

json数据如下:

{
  "calculable": true,
  "title": {
    "text": "广告数据",
    "subtext": "虚构",
    "x": "center"
  },
  "toolbox": {
    "feature": {
      "mark": {
        "show": true,
        "title": {
          "mark": "辅助线开关",
          "markClear": "清空辅助线",
          "markUndo": "删除辅助线"
        },
        "lineStyle": {
          "color": "#1e90ff",
          "type": "dashed",
          "width": 2
        }
      },
      "dataView": {
        "show": true,
        "title": "数据视图",
        "readOnly": false,
        "lang": ["数据视图", "关闭", "刷新"]
      },
      "magicType": {
        "show": true,
        "title": {
          "line": "折线图切换",
          "stack": "堆积",
          "bar": "柱形图切换",
          "tiled": "平铺"
        },
        "type": ["pie", "funnel"]
      },
      "restore": {
        "show": true,
        "title": "还原"
      },
      "saveAsImage": {
        "show": true,
        "title": "保存为图片",
        "type": "png",
        "lang": ["点击保存"]
      }
    },
    "show": true
  },
  "tooltip": {
    "trigger": "item",
    "formatter": "{a} <br/>{b} : {c} ({d}%)"
  },
  "legend": {
    "orient": "horizontal",
    "data": ["邮件营销", "联盟广告", "视频广告"],
    "x": "left"
  },
  "series": [{
    "center": ["50%", "60%"],
    "radius": "55%",
    "name": "广告数据",
    "type": "pie",
    "data": [{
      "value": 120,
      "name": "邮件营销"
    }, {
      "value": 132,
      "name": "联盟广告"
    }, {
      "value": 101,
      "name": "视频广告"
    }]
  }]
}

生成的饼图如下:
586854-20160127161209551-622668546.png

  本博客后台的系统资源监控模块用到了echarts,主要是用来监控系统的cpu,内存,硬盘,jvm和GC的,具体代码参考admins包下的AdminsController的resourcelogTongji方法的代码,效果如下图:

QQ截图20160128143338.png
最后希望本篇博客对大家使用Echarts有所帮助。



分享到
LovePanda登录 ×
LovePanda注册 ×