杰瑞教育

技术分享PARTICIPANTS STYLE
您当前的位置:首页 > 技术分享

使用ECharts实现数据图表分析

|
 一、ECharts介绍

  实现对统计数据的图形分析之前用过JFreeChar,但它是用纯java实现编码繁琐且效果不佳,后来又使用过Fusioncharts 报表工具,它是基于Flash的图表组件、以XML为数据、提供丰富的Flash动画作为图标模板,实现简单效果不错但flash是老东西了且浏览器需要flash插件的支持,更关键的是手机端浏览器基本上不支持。最近看到百度提供一套ECharts(Enterprise Charts)商业产品图表库,它是基于ZReader(一个全新的轻量级canvas类库),可在pc和移动端流畅的运行,支持折线图(区域图)、柱状图(条状图)、散点图(气泡图)、K线图、饼图(环形图)等12类图表。

 二、实现应用案例

  下面就结合应用看看ECharts的使用

  案例效果:

  条形图

 

  切换折线图

 

   查看图形数据

 

 三、如何使用ECharts

1、环境搭建

  下载echarts-2.2.2,官网地址:http://echarts.baidu.com/

 

  将build\dist目录下的内容拷贝到项目中 如图所示:

 

2、在sell_char.html页面中引入文件

  chart目录下存放了12种图形的js文件,可根据需要引入,这也是官方推荐的导入方式(模块化单文件引入)

复制内容到剪贴板
  1. <head>  
  2. <script src="echarts/dist/echarts.js"></script>  
  3. <script src="jquery/jquery-1.7.2.min.js"></script>  
  4. <script type="text/javascript">  
  5.     $(function(){//jquery的文档就绪函数  
  6.         // 路径配置  
  7.         require.config({  
  8.             paths: {  
  9.                 echarts: 'echarts/dist'  
  10.             } });      
  11.         require(  
  12.             [  
  13.                 'echarts',//代指echarts设置的路径,即'echarts/dist'  
  14.                 'echarts/chart/bar', // 使用柱状图加载bar模块,引入bar.js  
  15.                 'echarts/chart/line'//加载折线图,引入line.js文件, 按需加载  
  16.             ],  
  17. function (ec) {  
  18.           var myChart = ec.init(document.getElementById('sell_data'));  
  19.           var option = { //配置选项,使用echarts的关键部分  
  20.                     ...  
  21.            }  
  22.                 myChart.setOption(option);  
  23.     });  
  24. </script>  
  25. </head>  
  26. <!-- 为ECharts准备一个具备大小的区域,必须指定高度 -->  
  27. <div id="sell_data" style="height:400px"></div>  

3、sell_char.html完整的代码

复制内容到剪贴板
  1.  <!-- ECharts单文件引入 -->  
  2. <script src="echarts/dist/echarts.js"></script>  
  3. <script src="jquery/jquery-1.7.2.min.js"></script>  
  4. <script type="text/javascript">  
  5.     $(function(){  
  6.         //获得后台数据  
  7.         var category_data;//类型信息  
  8.         var soft_data;//软件部销售数据  
  9.         var net_data;//网络部销售数据  
  10.         var mobile_data;//移动事业部销售数据  
  11.         $.ajax({  
  12.             url:'/21-sun/echarts/EChartsDataServelt',  
  13.             async:false,  
  14.             success: function(data){  
  15.                 category_data=data.category;  
  16.                 soft_data=data.soft_data;  
  17.                 net_data=data.net_data;  
  18.                 mobile_data=data.mobile_data;}  
  19.             })  
  20.         // 路径配置  
  21.         require.config({  
  22.             paths: {  
  23.                 echarts: 'echarts/dist'  
  24.             }  
  25.         });      
  26.           require(  
  27.             [  
  28.                 'echarts',  
  29.                 'echarts/chart/bar', // 使用柱状图就加载bar模块,按需加载  
  30.                 'echarts/chart/line'  
  31.             ],  
  32.             function (ec) {  
  33.                 // 基于准备好的dom,初始化echarts图表  
  34.                 var myChart = ec.init(document.getElementById('sell_data'));   
  35.                 var option = {  
  36.                     tooltip: {//提示框,鼠标悬浮交互时的信息提示  
  37.                         show: true  
  38.                     },  
  39.                       
  40.                     toolbox:{//定义工具按钮  
  41.                         show : true,  
  42.                         feature : {  
  43.                         dataView : {show: true, readOnly: false},//数据信息按钮  
  44.                         magicType : {show: true, //显示折线、柱状图等切换按钮  
  45.                         type: ['line', 'bar','stack', 'tiled']}  
  46.                         }  
  47.                     },  
  48.                     legend: {//图例  
  49.                         data:['软件部','网络板块','移动事业部']  
  50.                     },  
  51.                     xAxis : [//x轴设置  
  52.                         {  
  53.                             type : 'category',//x轴显示类别  
  54.                             data : category_data //["第一季度","第二季度","第三季度","第四季度"]  
  55.                         }  
  56.                     ],  
  57.                     yAxis : [//y轴设置  
  58.                         {  
  59.                             type : 'value' //y轴显示数据值  
  60.                         }  
  61.                     ],  
  62.                     series : [  
  63.                         {  
  64.                             "name":"软件部",  
  65.                             "type":"bar",  
  66.                             "data":soft_data //[80, 300, 200, 100]  
  67.                         },  
  68.                          {  
  69.                             "name":"网络板块",  
  70.                             "type":"bar",  
  71.                             "data":net_data //[50, 200, 120, 200]  
  72.                         },  
  73.                          {  
  74.                             "name":"移动事业部",  
  75.                             "type":"bar",  
  76.                             "data":mobile_data //[20, 60, 30, 15]  
  77.                         }  
  78.                     ]  
  79.                 };  
  80.           
  81.                 // 为echarts对象加载数据   
  82.                 myChart.setOption(option);   
  83.             }  
  84.         );  
  85.           
  86.     });  
  87.     </script>  
  88. </head>  
  89. <body>  
  90.     <div id="sell_data" style="height:400px"></div>  
  91.     <!-- ECharts单文件引入 -->  
  92. </body>  
  93. </html>  

4、后台EChartsDataServelt代码

复制内容到剪贴板
  1. public void doPost(HttpServletRequest request, HttpServletResponse response)  
  2.             throws ServletException, IOException {  
  3.         response.setContentType("text/json; charset=utf-8");  
  4.         JSONObject jsonObj=new JSONObject();  
  5.         //后台数据,这里给定数据就不从数据库获取了  
  6.         Map map=new HashMap();  
  7.         map.put("category", new String[]{"第一季度","第二季度","第三季度","第四季度"});  
  8.         map.put("soft_data", new int[]{80, 300, 200, 100} );  
  9.         map.put("net_data", new int[]{50, 200, 120, 200});  
  10.         map.put("mobile_data",new int[]{20, 60, 30, 15});  
  11.         jsonObj.putAll(map);  
  12.         response.getWriter().println(jsonObj.toString());  
  13.           
  14.     }  


  想要了解更多内容的小伙伴,可以点击查看源码,亲自运行测试。

  疑问咨询或技术交流,请加入官方QQ群:JRedu技术交流 (452379712)

 

作者:杰瑞教育
本文版权归烟台杰瑞教育科技有限公司所有,欢迎转载,但未经作者同意必须保留此段声明,且在文章页面明显位置给出原文连接,否则保留追究法律责任的权利。
 
捷瑞数字 版权所有Copyright © 2014 All rights reserved [鲁ICP备09041295号] 管理员登陆