echarts+ajax+restful实现图表(bar/line)

先看效果图：

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

基本的js引用:

1 2 3

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

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

3、配置路径及js的引用

1 2 3 4 5 6 7 8 9 10 11 12 13

// 路径配置 require.config({      paths: {      echarts: 'js'      } }); // 使用 require( [      'echarts',      'echarts/chart/bar',      'echarts/chart/line' ],

4、echarts配置js：

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82

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+restful获取服务器端的数据

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38

$.ajax({ type: 'get' , //jquey是不支持post方式跨域的 async: false , url: "http://10.130.2.245:9088/dailyAll?limit=25" , //跨域请求的URL dataType: '<a href="http://www.suchso.com/UIweb/javascript-tongyuan-kuayu.html" class="keylink" title=" JSONP" target="_blank">JSONP</a>' , 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' );   }  });