快速基于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');
		}
	});
}

展示效果图: