java 版本EChart使用

2021-03-04 13:27

阅读:684

一、简介
  EChart是百度开发的js图表软件,用它我们可以很方便地以图形化的方式对数据进行分析统计。该种方式js在页面动态拼接json数据,再进行渲染。这种方法的优点是,灵活,可以随时进行修改。缺点是js代码多,难以维护。此时我们可以Java EChart插件,在后端构造好option数据,最后在页面直接使用构造好的option数据,渲染效果。下载地址为:http://git.oschina.net/free/ECharts
  EChart提供链式的调用方法,使用也比较方便。它依赖Google的gson包,gson下载地址为:https://github.com/google/gson 。gson与EChart加入项目依赖。
  maven依赖如下:

技术图片
com.github.abel533
  ECharts
  2.2.7com.google.code.gson
    gson
    2.5
技术图片

二、示例
  1、柱状图

技术图片
 1     /**
 2      * 柱状图
 3      * 
 4      * @param isHorizontal
 5      *            是否水平放置
 6      */
 7     public void testBar(boolean isHorizontal) {
 8         String[] citis = { "广州", "深圳", "珠海", "汕头", "韶关", "佛山" };
 9         int[] datas = { 6030, 7800, 5200, 3444, 2666, 5708 };
10         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)" };
11         String title = "地市数据";
12 
13         GsonOption option = new GsonOption();
14 
15         option.title(title); // 标题
16         // 工具栏
17         option.toolbox().show(true).feature(Tool.mark, // 辅助线
18                 Tool.dataView, // 数据视图
19                 new MagicType(Magic.line, Magic.bar),// 线图、柱状图切换
20                 Tool.restore,// 还原
21                 Tool.saveAsImage);// 保存为图片
22 
23         option.tooltip().show(true).formatter("{a} 
{b} : {c}");//显示工具提示,设置提示格式 24 25 option.legend(title);// 图例 26 27 Bar bar = new Bar(title);// 图类别(柱状图) 28 CategoryAxis category = new CategoryAxis();// 轴分类 29 category.data(citis);// 轴数据类别 30 // 循环数据 31 for (int i = 0; i map = new HashMap(2); 36 map.put("value", data); 37 map.put("itemStyle", new ItemStyle().normal(new Normal().color(color))); 38 bar.data(map); 39 } 40 41 if (isHorizontal) {// 横轴为类别、纵轴为值 42 option.xAxis(category);// x轴 43 option.yAxis(new ValueAxis());// y轴 44 } else {// 横轴为值、纵轴为类别 45 option.xAxis(new ValueAxis());// x轴 46 option.yAxis(category);// y轴 47 } 48 49 option.series(bar); 50 }
技术图片

   生成的json数据如下:

技术图片
技术图片
  1 {
  2   "title": {
  3     "text": "地市数据"
  4   },
  5   "toolbox": {
  6     "feature": {
  7       "mark": {
  8         "show": true,
  9         "title": {
 10           "mark": "辅助线开关",
 11           "markClear": "清空辅助线",
 12           "markUndo": "删除辅助线"
 13         },
 14         "lineStyle": {
 15           "color": "#1e90ff",
 16           "type": "dashed",
 17           "width": 2
 18         }
 19       },
 20       "dataView": {
 21         "show": true,
 22         "title": "数据视图",
 23         "readOnly": false,
 24         "lang": ["数据视图", "关闭", "刷新"]
 25       },
 26       "magicType": {
 27         "show": true,
 28         "title": {
 29           "line": "折线图切换",
 30           "stack": "堆积",
 31           "bar": "柱形图切换",
 32           "tiled": "平铺"
 33         },
 34         "type": ["line", "bar"]
 35       },
 36       "restore": {
 37         "show": true,
 38         "title": "还原"
 39       },
 40       "saveAsImage": {
 41         "show": true,
 42         "title": "保存为图片",
 43         "type": "png",
 44         "lang": ["点击保存"]
 45       }
 46     },
 47     "show": true
 48   },
 49   "tooltip": {
 50     "formatter": "{a} 
{b} : {c}", 51 "show": true 52 }, 53 "legend": { 54 "data": ["地市数据"] 55 }, 56 "xAxis": [{ 57 "type": "category", 58 "data": ["广州", "深圳", "珠海", "汕头", "韶关", "佛山"] 59 }], 60 "yAxis": [{ 61 "type": "value" 62 }], 63 "series": [{ 64 "name": "地市数据", 65 "type": "bar", 66 "data": [{ 67 "value": 6030, 68 "itemStyle": { 69 "normal": { 70 "color": "rgb(2,111,230)" 71 } 72 } 73 }, { 74 "value": 7800, 75 "itemStyle": { 76 "normal": { 77 "color": "rgb(186,73,46)" 78 } 79 } 80 }, { 81 "value": 5200, 82 "itemStyle": { 83 "normal": { 84 "color": "rgb(78,154,97)" 85 } 86 } 87 }, { 88 "value": 3444, 89 "itemStyle": { 90 "normal": { 91 "color": "rgb(2,111,230)" 92 } 93 } 94 }, { 95 "value": 2666, 96 "itemStyle": { 97 "normal": { 98 "color": "rgb(186,73,46)" 99 } 100 } 101 }, { 102 "value": 5708, 103 "itemStyle": { 104 "normal": { 105 "color": "rgb(78,154,97)" 106 } 107 } 108 }] 109 }] 110 }
技术图片

  生成的图如下:

  技术图片

  2、折线图

技术图片
 1 /**
 2      * 折线图
 3      * 
 4      * @param isHorizontal
 5      *            是否水平放置
 6      */
 7     public void testLine(boolean isHorizontal) {
 8         String[] types = { "邮件营销", "联盟广告", "视频广告" };
 9         int[][] datas = { { 120, 132, 101, 134, 90, 230, 210 }, { 220, 182, 191, 234, 290, 330, 310 }, { 150, 232, 201, 154, 190, 330, 410 } };
10         String title = "广告数据";
11 
12         GsonOption option = new GsonOption();
13 
14         option.title().text(title).subtext("虚构").x("left");// 大标题、小标题、位置
15 
16         // 提示工具
17         option.tooltip().trigger(Trigger.axis);// 在轴上触发提示数据
18         // 工具栏
19         option.toolbox().show(true).feature(Tool.saveAsImage);// 显示保存为图片
20 
21         option.legend(types);// 图例
22 
23         CategoryAxis category = new CategoryAxis();// 轴分类
24         category.data("周一", "周二", "周三", "周四", "周五", "周六", "周日");
25         category.boundaryGap(false);// 起始和结束两端空白策略
26 
27         // 循环数据
28         for (int i = 0; i 
技术图片

  生成的json数据如下:

技术图片 View Code

  生成的图如下:

    技术图片

  3、饼图

技术图片
 1 /**
 2      *  饼图
 3      */
 4     public void testPie() {
 5         String[] types = { "邮件营销", "联盟广告", "视频广告" };
 6         int[] datas = { 120, 132, 101 };
 7         String title = "广告数据";
 8         GsonOption option = new GsonOption();
 9 
10         option.title().text(title).subtext("虚构").x("center");// 大标题、小标题、标题位置
11 
12         // 提示工具 鼠标在每一个数据项上,触发显示提示数据
13         option.tooltip().trigger(Trigger.item).formatter("{a} 
{b} : {c} ({d}%)"); 14 15 // 工具栏 16 option.toolbox().show(true).feature(new Mark().show(true),// 辅助线 17 new DataView().show(true).readOnly(false),// 数据视图 18 new MagicType().show(true).type(new Magic[] { Magic.pie, Magic.funnel }), //饼图、漏斗图切换 19 new Option().series(new Funnel().x("25%").width("50%").funnelAlign(X.left).max(1548)),// 漏斗图设置 20 Tool.restore,// 还原 21 Tool.saveAsImage);// 保存为图片 22 23 option.legend().orient(Orient.horizontal).x("left").data(types);// 图例及位置 24 25 option.calculable(true);// 拖动进行计算 26 27 Pie pie = new Pie(); 28 29 // 标题、半径、位置 30 pie.name(title).radius("55%").center("50%", "60%"); 31 32 // 循环数据 33 for (int i = 0; i map = new HashMap(2); 35 map.put("value", datas[i]); 36 map.put("name", types[i]); 37 pie.data(map); 38 } 39 40 option.series(pie); 41 }
技术图片

  生成的json数据如下:

技术图片
技术图片
 1 {
 2   "calculable": true,
 3   "title": {
 4     "text": "广告数据",
 5     "subtext": "虚构",
 6     "x": "center"
 7   },
 8   "toolbox": {
 9     "feature": {
10       "mark": {
11         "show": true,
12         "title": {
13           "mark": "辅助线开关",
14           "markClear": "清空辅助线",
15           "markUndo": "删除辅助线"
16         },
17         "lineStyle": {
18           "color": "#1e90ff",
19           "type": "dashed",
20           "width": 2
21         }
22       },
23       "dataView": {
24         "show": true,
25         "title": "数据视图",
26         "readOnly": false,
27         "lang": ["数据视图", "关闭", "刷新"]
28       },
29       "magicType": {
30         "show": true,
31         "title": {
32           "line": "折线图切换",
33           "stack": "堆积",
34           "bar": "柱形图切换",
35           "tiled": "平铺"
36         },
37         "type": ["pie", "funnel"]
38       },
39       "restore": {
40         "show": true,
41         "title": "还原"
42       },
43       "saveAsImage": {
44         "show": true,
45         "title": "保存为图片",
46         "type": "png",
47         "lang": ["点击保存"]
48       }
49     },
50     "show": true
51   },
52   "tooltip": {
53     "trigger": "item",
54     "formatter": "{a} 
{b} : {c} ({d}%)" 55 }, 56 "legend": { 57 "orient": "horizontal", 58 "data": ["邮件营销", "联盟广告", "视频广告"], 59 "x": "left" 60 }, 61 "series": [{ 62 "center": ["50%", "60%"], 63 "radius": "55%", 64 "name": "广告数据", 65 "type": "pie", 66 "data": [{ 67 "value": 120, 68 "name": "邮件营销" 69 }, { 70 "value": 132, 71 "name": "联盟广告" 72 }, { 73 "value": 101, 74 "name": "视频广告" 75 }] 76 }] 77 }
技术图片

  生成的图如下:

  技术图片  


评论


亲,登录后才可以留言!