html或jsp页面Echarts使用js/jq获取后台参数

Echarts去调用后台数据,我是做后台开发的,研究好久了,功夫不负有心人啊,终于被我搞出来了

上图这个是Echarts的一个柱形图

<script type="text/javascript">
/* //接收接口名称  接收数组形式
function nic(NicName)  {
	
		alert(1);
	var a = [NicName];
	return {
		NicData:a
	}
}
//接收本月调用接口的数量
 function Sum()  {
	var a = ['1月','2月','3月','4月','5月','6月','7月','8月','9月','10月','11月','12月'];
	return {
		Sum:a
	}
} */
function s(){
	var NicName="";
	var NicDate="";
	var NicList="";
	$.post(
			"/DataFactory666/getNicCount",
			{},
			function(map){
				NicName = map.NicName;
				NicDate = map.NicDate;
				NicList = map.NicList;
				sub(NicName,NicDate,NicList);				
			},
			"json"
		)
		
}

function sub(NicName,NicDate,NicList){
		
	    // 基于准备好的dom,初始化echarts实例
        var myChart = echarts.init(document.getElementById('main'));
        // 指定图表的配置项和数据
        var option = {
             title : {
        text: '主接口查得率',
        subtext: '纯属虚构'
    },
    tooltip : {
        trigger: 'axis'
    },
    legend: {
        data: NicName
    },
    toolbox: {
        show : true,
        feature : {
            dataView : {show: true, readOnly: false},
            magicType : {show: true, type: ['line', 'bar']},
            restore : {show: true},
            saveAsImage : {show: true}
        }
    },
    calculable : true,
    xAxis : [
        {
            type : 'category',
            data : NicDate
        }
    ],
    yAxis : [
        {
            type : 'value'
        }
    ],
    series : NicList
    	/* 
这个是Echarts所需要的数据类型吧
[{name:'菜单查询',
	            type:'bar',
	            data:[
	            	2.6, 5.9, 9.0, 26.4, 28.7, 30.7, 175.6, 182.2, 48.7, 18.8, 6.0, 2.3    	
	            	],
	            markPoint : {
	                data : [
	                    {name : '年最高', value : 182.2, xAxis: 7, yAxis: 183},
	                    {name : '年最低', value : 2.3, xAxis: 11, yAxis: 3}
	                ]
	            },
	            markLine : {
	                data : [
	                    {type : 'average', name : '平均值'}
	                ]
	            }
	        },{name:'天气查询',
	            type:'bar',
	            data:[
	            	2.6, 5.9, 9.0, 26.4, 28.7, 70.7, 175.6, 182.2, 48.7, 18.8, 6.0, 2.3    	
	            	],
	            markPoint : {
	                data : [
	                    {name : '年最高', value : 182.2, xAxis: 7, yAxis: 183},
	                    {name : '年最低', value : 2.3, xAxis: 11, yAxis: 3}
	                ]
	            },
	            markLine : {
	                data : [
	                    {type : 'average', name : '平均值'}
	                ]
	            }
	        }] */
    };   
        // 使用刚指定的配置项和数据显示图表。
        myChart.setOption(option);

}
</script>
上面是调用的方式这是第一种;

$(function(){
     $('#columnChart').highcharts({
       chart: {
         type: 'column'
       },
       title: {
         text: '主接口查得率'
       },
       subtitle: {
         //text: '月收入'
       },
       xAxis: {
       categories: (function(){
	        	 var d = [];
	        	 $.ajax({
	        		url:"hg.do",
	        		success:function(obj){
	        			 for(var i in obj){
	         				d.push(obj[i].date);
	         			} 
	        			console.log(d);
	        		},
	        		dataType:"json",
	        		async:false
	        	 })
	        	 return d; 
         }) ()
       },
       yAxis: {
         min: 0,
         title: {
           text: '次'
         }
       },
       tooltip: {
         headerFormat: '<span style="font-size:10px">{point.key}</span><table>',
         pointFormat: '<tr><td style="color:{series.color};padding:0">{series.name}: </td>' +
           '<td style="padding:0"><b>{point.y:.1f} </b></td></tr>',
         footerFormat: '</table>',
         shared: true,
         useHTML: true
       },
       plotOptions: {
         column: {
           pointPadding: 0.2,
           borderWidth: 0
         }
       },
       series: (function(){
      	 var d = [];
    	 $.ajax({
    		url:"hh.do",
    		success:function(obj){
    			d = obj;
    			console.log(obj);
    		},
    		dataType:"json",
    		async:false
    	 })
    	 return d; 
		}) ()
     });})                                                                                                                                       

这个是使用

(function(){
	        	 var d = [];
	        	 $.ajax({
	        		url:"hg.do",
	        		success:function(obj){
	        			 for(var i in obj){
	         				d.push(obj[i].date);
	         			} 
	        			console.log(d);
	        		},
	        		dataType:"json",
	        		async:false
	        	 })
	        	 return d; 
         }) ()
//调用后台的数据,后台数据拼装可以模仿前台的假数据。



  • 3
    点赞
  • 3
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值