基于echarts实现图表展示，echarts图表展示

基于echarts实现图表展示，echarts图表展示

[Author]: kwu

基于echarts实现图表展示

1、引用相关的js框架

<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用来展示图表，需给定高度

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

3、配置路径及js的引用

// 路径配置
require.config({
    paths: {
	echarts: 'js'
    }
});

// 使用
require(
[
    'echarts',
    'echarts/chart/bar',
    'echarts/chart/line'
],

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

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动态加载数据

$.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

实现的效果图：