高速基於echarts的大數據可視化

[Author]: kwu 

高速基於echarts的大數據可視化，echarts純粹的js實現的圖表工具。高速開發的過程例如如下：

一、引入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>

二、設置展現的div

	<!-- 爲ECharts準備一個具有大小（寬高）的Dom -->
	<div id="main" style="height: 300px"></div>

三、畫圖的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);
	}
}

四、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');
		}
	});
}

五、定時調度及參數設置

//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');
		}
	});
}

展現效果圖: