基于echarts实现图表展示

来源：互联网发布：网上开票软件编辑：程序博客网时间：2024/06/05 19:59

[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", //跨域请求的URLdataType:'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

实现的效果图：

2 0