ECharts，缩写来自Enterprise Charts，商业级数据图表，来自百度的一款开源、功能强大的数据可视化产品，从官网的example中可以看到能够实现目前见到的各种图形报表，并且带有详细的代码和图形demo：
不过我们通常不会像demo中那样绑定死数据，我们通常需要从数据库中获取数据，再展示出来，我们先看绑定静态数据的demo，通过代码分析如何绑定动态数据。
绑定静态数据（官网）
以条形图为例：
JS绑定数据 <script type="text/javascript">// 路径配置require.config({paths: {echarts: ''}});// 使用require(['echarts','echarts/chart/bar' // 使用柱状图就加载bar模块，按需加载],function (ec) {// 基于准备好的dom，初始化echarts图表var myChart = ec.init(document.getElementById('main'));var option = {title : {text: '平台交易额',subtext: ''},tooltip : {trigger: 'axis'},legend: {data:['2015年']},toolbox: {show : true,feature : {mark : {show: true},dataView : {show: true, readOnly: false},magicType: {show: true, type: ['line', 'bar']},restore : {show: true},saveAsImage : {show: true}}},calculable : true,xAxis : [{type : 'value',boundaryGap : [0, 0.01]}],yAxis : [{type : 'category',data : ['1月','2月','3月','4月','5月','总']}],series : [{name:'2015年',type:'bar',data:[48203, 53489, 119034, 184970, 231744, 630230]}]};// 为echarts对象加载数据myChart.setOption(option);});</script>
其中最关系的就是其中的option如何动态加载数据。其实无非就是拼串，我们既可以在前台去拼也可以在后台拼接成json串返回页面。如果整个项目只需要一种图表，我们拼一拼也无所谓，但是要应对以后的图形变化，或者新增图形，每种图形都拼一遍肯定是麻烦，也不符合面向对象的特点，既然如此，我们就需要把option变成对象去管理。 个人对Echarts其中各个图表的option不是很熟，而网上也已经有了很成熟的类库，简单学习即可，源码：
下面以springmvc框架来再次实现动态数据加载controller
@RequestMapping("/example")public class example{@ResponseBodypublic WebResult getOption() throws Exception {WebResult result = new WebResult();try {Option option = injuryService.selectRemoveCauses();result.isOK();result.setData(option);} catch (BusinessException e) {result.setException(e);}return result;}
Service逻辑处理
Public class exampleService{@Overridepublic Option getOption() throws BusinessException {//查询前20PageHelper.startPage(1, 20, false);//数据库查询获取统计数据List<Map<String, Object>> list = exampleDao.getOption();//为了数据从大到小排列，这里需要倒叙Collections.sort(list, new Comparator<Map<String, Object>>() {@Overridepublic int compare(Map<String, Object> o1, Map<String, Object> o2) {return -1;}});//创建OptionOption option = new Option();option.title("平台交易额").tooltip(Trigger.axis).legend("2015年");//横轴为值轴option.xAxis(new ValueAxis().boundaryGap(0d, 0.01));//创建类目轴CategoryAxis category = new CategoryAxis();//柱状数据Bar bar = new Bar("2015年");//循环数据for (Map<String, Object> objectMap : list) {//设置类目category.data(objectMap.get("NAME"));//类目对应的柱状图bar.data(objectMap.get("TOTAL"));}//设置类目轴option.yAxis(category);//设置数据option.series(bar);//返回Optionreturn option;} }
Dao数据访问
代码略，从数据库获取需要的数据即可
Jsp页面
<body style="padding:0"><div style="padding:10px;clear: both;"><div id="example" style="height:600px;"></div></div></body><script src="echarts/echarts-all.js"></script><script type="text/javascript">//图表var exampleChar = echarts.init(document.getElementById('example'));//查询function loadDrugs() {psLineChar.clear();psLineChar.showLoading({text: '正在努力的读取数据中…'});$.getJSON('example.htm', function (data) {if (data.success) {exampleChar.setOption(data.data, true);exampleChar.hideLoading();} else {alert('提示', data.msg);}});}//载入图表loadDrugs();</script>
不敢哪种图表，其中变化的就是option的参数，学会了一种，其他的也就很容易实现。
Echarts是一个开源的图形报表，，Echarts-java类库也是一个开源的类库，开源使他们发展的很快，也更有益于我们的应用和开发。
版权声明：本文为博主原创文章，未经博主允许不得转载。
影子依旧可以相亲相爱。哪一块骨骼最温暖，总能一击即中。
