echarts 百万数据_高速基于echarts的大数据可视化

[Author]: kwu

高速基于echarts的大数据可视化，echarts纯粹的js实现的图表工具。高速开发的过程例如以下：

1、引入echarts的依赖js库

2、设置展示的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');

}

});

}

展示效果图: