基于echarts实现图表展示

[Author]: kwu

基于echarts实现图表展示

1、引用相关的js框架

[javascript] view
plaincopy

<pre name="code" class="javascript"><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

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

3、配置路径及js的引用

[javascript] view
plaincopy

// 路径配置

require.config({

paths: {

echarts: 'js'

}

});



// 使用

require(

[

'echarts',

'echarts/chart/bar',

'echarts/chart/line'

],

4、主要的js代码，这里实现的是一个堆积图

[javascript] view
plaincopy

var option = {

//设置标题

title:{

text:'',

subtext:''

},

tooltip : {

trigger: 'axis',

axisPointer : { // 坐标轴指示器，坐标轴触发有效

type : 'shadow' // 默认为直线，可选为：'line' | 'shadow'

}

},

legend: {

data:[]

},

toolbox: {

show : true,

feature : {

mark : {show: true},

dataView : {show: true, readOnly: false},

magicType : {show: true, type: ['line', 'bar', 'stack', 'tiled']},

restore : {show: true},

saveAsImage : {show: true}

}

},

calculable : true,

yAxis : [

{

type : 'value'

}

],

xAxis : [

{

type : 'category',

data : []

}

],

series : [

{

name:'',

type:'bar',

stack: '总量',

itemStyle : { normal: {label : {show: true, position: 'insideRight'}}},

data:[]

},

{

name:'',

type:'bar',

stack: '总量',

itemStyle : { normal: {label : {show: true, position: 'insideRight'}}},

data:[]

},

{

name:'',

type:'bar',

stack: '总量',

itemStyle : { normal: {label : {show: true, position: 'insideRight'}}},

data:[]

},

{

name:'',

type:'bar',

stack: '总量',

itemStyle : { normal: {label : {show: true, position: 'insideRight'}}},

data:[]

},

{

name:'',

type:'bar',

stack: '总量',

itemStyle : { normal: {label : {show: true, position: 'insideRight'}}},

data:[]

},

{

name:'',

type:'bar',

stack: '总量',

itemStyle : { normal: {label : {show: true, position: 'insideRight'}}},

data:[]

}



]

};

5、采用ajax动态加载数据

[javascript] view
plaincopy

$.ajax({

type:'get',//jquey是不支持post方式跨域的

async:false,

url:"http://10.130.2.245:9088/dailyAll?limit=25", //跨域请求的URL

dataType:'jsonp',

jsonp: "callback",//服务端用于接收callback调用的function名的参数

success : function(result){

if (result) {

option.title.text = "("+result.titles+")堆积图";

option.title.subtext = result.titles;

option.legend.data = result.titles;



option.xAxis[0].data = result.days;



option.series[0].name = result.titles[0];

option.series[0].data = result.pvcnts;



option.series[1].name = result.titles[1];

option.series[1].data = result.hundsuncnts;



option.series[2].name = result.titles[2];

option.series[2].data = result.apputrackcnts;



option.series[3].name = result.titles[3];

option.series[3].data = result.utrackcnts;



option.series[4].name = result.titles[4];

option.series[4].data = result.mobilelogcnts;



option.series[5].name = result.titles[5];

option.series[5].data = result.dratiocnts;



myChart.setOption(option);

}

},

error:function(){

alert('fail');

}

});

ajax通过restful的服务来交互数据，相关restful的开发，请参考本博客：
http://blog.csdn.net/bdchome/article/details/45937751
实现的效果图：