ECharts初识与Echarts-java类库应用

最新推荐文章于 2024-08-18 10:27:18 发布

AkkJiang~

最新推荐文章于 2024-08-18 10:27:18 发布

阅读量8.6k

点赞数

分类专栏： JS Java

本文链接：https://blog.csdn.net/akkzhjj/article/details/46291375

版权

Java 同时被 3 个专栏收录

16 篇文章 0 订阅

订阅专栏

15 篇文章 0 订阅

订阅专栏

AJAX

7 篇文章 0 订阅

订阅专栏

　　　ECharts，缩写来自Enterprise Charts，商业级数据图表，来自百度的一款开源、功能强大的数据可视化产品，从官网的example中可以看到能够实现目前见到的各种图形报表，并且带有详细的代码和图形demo：http://echarts.baidu.com/doc/example.html

　　不过我们通常不会像demo中那样绑定死数据，我们通常需要从数据库中获取数据，再展示出来，我们先看绑定静态数据的demo，通过代码分析如何绑定动态数据。

绑定静态数据（官网）

以条形图为例：

JS绑定数据

    <script type="text/javascript">
        // 路径配置
        require.config({
            paths: {
                echarts: 'http://echarts.baidu.com/build/dist'
            }
        });
        
        // 使用
        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不是很熟，而网上也已经有了很成熟的类库，简单学习即可，源码：
　　　http://git.oschina.net/free/ECharts/tree/master/src/main/java/com/github/abel533/echarts/

下面以springmvc框架来再次实现动态数据加载

controller

    @RequestMapping("/example")  
    public  class example{
    @ResponseBody  
    public 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{
    @Override  
    public Option getOption() throws BusinessException {  
        //查询前20  
        PageHelper.startPage(1, 20, false);  
        //数据库查询获取统计数据  
        List<Map<String, Object>> list = exampleDao.getOption();  
        //为了数据从大到小排列，这里需要倒叙  
        Collections.sort(list, new Comparator<Map<String, Object>>() {  
            @Override  
            public int compare(Map<String, Object> o1, Map<String, Object> o2) {  
                return -1;  
            }  
        });  
        //创建Option  
        Option 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);  
        //返回Option  
        return 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类库也是一个开源的类库，开源使他们发展的很快，也更有益于我们的应用和开发。