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; }) ()
//调用后台的数据,后台数据拼装可以模仿前台的假数据。