一、简介
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依赖如下：
<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、柱状图
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} <br/>{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 < citis.length; i++) { 32 int data = datas[i]; 33 String color = colors[i]; 34 // 类目对应的柱状图 35 Map<String, Object> map = new HashMap<String, Object>(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} <br/>{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 }