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

[Author]: kwu

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

1、引入echarts的依赖js库

[javascript] view
plaincopy

<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

[html] view
plaincopy

<!-- 为ECharts准备一个具备大小（宽高）的Dom -->

<div id="main" style="height: 300px"></div>

3、绘图的JS

[javascript] view
plaincopy

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数据

[javascript] view
plaincopy

//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、定时调度及参数设置

[javascript] view
plaincopy

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

}

});

}

展示效果图: