快速基于echarts的大数据可视化

[Author]: kwu 

快速基于echarts的大数据可视化，echarts纯粹的js实现的图表工具，快速开发的步骤如下：

1、引入echarts的依赖js库

 <script type="text/javascript" src="js/esl/esl.js"></script>
 <script type="text/javascript" src="js/echarts.js"></script>
 <script type="text/javascript" src="js/jquery.js"></script>

2、设置展示的div

 <!-- 为ECharts准备一个具备大小（宽高）的Dom -->
 <div id="main" style="height: 300px"></div>

3、绘图的JS

 var myChart;
 var option;

 // 画图
 function drawCharts(echartsHomePath) {
     // 路径配置
     require.config({
         paths : {
             echarts : echartsHomePath +'js'
         }
     })

     // 使用
     require([ 'echarts', 'echarts/chart/bar', 'echarts/chart/line' ], function(
             ec) {
         myChart = ec.init(document.getElementById('main'));


         //官网复制option 开始


         option = {
                 title : {
                     text: '某地区蒸发量和降水量',
                     subtext: '纯属虚构'
                 },
                 tooltip : {
                     trigger: 'axis'
                 },
                 legend: {
                     data:['蒸发量']
                 },
                 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 : 'category',
                         data : ['1月','2月','3月','4月','5月','6月','7月','8月','9月','10月','11月','12月']
                     }
                 ],
                 yAxis : [
                     {
                         type : 'value'
                     }
                 ],
                 series : [
                     {
                         name:'蒸发量',
                         type:'bar',
                         data:[2.0, 4.9, 7.0, 23.2, 25.6, 76.7, 135.6, 162.2, 32.6, 20.0, 6.4, 3.3],
                         markPoint : {
                             data : [
                                 {type : 'max', name: '最大值'},
                                 {type : 'min', name: '最小值'}
                             ]
                         },
                         markLine : {
                             data : [
                                 {type : 'average', name: '平均值'}
                             ]
                         }
                     }
                 ]
             };


         //官网复制option 结束
         myInterval(restPath);
     });
 }


 //填充数据
 function setResult(result, option, myChart) {
     if (result) {
         option.title.text = "每日apputrack趋势图";
         option.title.subtext = "apputrack";
         option.legend.data[0] = "apputrack";
         option.xAxis[0].data = result.day;
         option.series[0].name = "apputrack";
         option.series[0].data = result.cnt;
         myChart.setOption(option);
     }
 }

4、ajax获取restful数据

 //ajax获取数据
 function myInterval(restPath) {
     $.ajax({
         type : 'get',// jquey是不支持post方式跨域的
         async : false,
         url : baseUrl +restPath,  // 跨域请求的URL
         dataType : 'jsonp',
         jsonp : "callback",// 服务端用于接收callback调用的function名的参数
         success : function(result) {
             setResult(result, option, myChart);
         },
         error : function() {
             alert('fail');
         }
     });
 }

5、定时调度及参数设置

 //ajax获取数据
 function myInterval(restPath) {
     $.ajax({
         type : 'get',// jquey是不支持post方式跨域的
         async : false,
         url : baseUrl +restPath,  // 跨域请求的URL
         dataType : 'jsonp',
         jsonp : "callback",// 服务端用于接收callback调用的function名的参数
         success : function(result) {
             setResult(result, option, myChart);
         },
         error : function() {
             alert('fail');
         }
     });
 }

展示效果图: