<script type="text/javascript">
function loadData(option) {
$.ajax({
type : 'post', //传输类型
async : false, //同步执行
url : 'billecharts.action', //web.xml中注册的Servlet的url-pattern
data : {},
dataType : 'json', //返回数据形式为json
success : function(result) {
if (result) {
//初始化xAxis[0]的data
option.xAxis[0].data = [];
for (var i=0; i<result.length; i++) {
option.xAxis[0].data.push(result[i].name);
}
//初始化series[0]的data
option.series[0].data = [];
for (var i=0; i<result.length; i++) {
option.series[0].data.push(result[i].num);
}
}
},
error : function(errorMsg) {
alert("加载数据失败");
}
});//AJAX
}//loadData()
var myChart = echarts.init(document.getElementById('main'));
var option = {
tooltip : {
show : true
},
legend : {
data : [ '收入','支出']
},
xAxis : [ {
type : 'category'
}],
yAxis : [ {
type : 'value'
} ],
series : [
{
name : '收入',
type : 'bar',
},
{
name : '支出',
type : 'bar',
}
]
};
//加载数据到option
loadData(option);
//设置option
myChart.setOption(option);
</script>
返回前台的格式 [{"bi_date":1504869888000,"bi_id":1,"expend":2000,"income":4000,"remark":"酒店支出"}]
求大神解决,刚刚接触这个
自己顶下,,。。。。。。。。。。。。。。。。。。。。。很急
这样?(https://img-ask.csdn.net/upload/201709/09/1504931571_271221.png)
给你看下我写的 有点粗糙
你的应该是同步执行的关系 换了试试
三个饼图 两个折线图 上面是饼图的ajax
下面的是折线图的
像option.xAxis[0].data.push(result[i].name这种改值的情况,echerts 是不认的,改完要setOption一遍,但是这种情况会可能出现问题!!!官网Api中有介绍,官网不建议这样做,建议的是myChart.setOption( {series: [{ data:nodes,edges: links }]} )形式,就是setOption里面重新写个option,但是可以需要改动什么就写什么,之前set的option仍然起作用,大体是这么个意思,具体的请去查下Api!!!!
var myChart = echarts.init(document.getElementById('main'));
//设置图标配置项
myChart.setOption({
title:{
text:'酒店财务报表'
},
tooltip:{},
legend:{
data:['收入','支出']
},
xAxis:{
data:[]
},
yAxis:{},
series:[
{
name:'收入',
type:'bar',
data:[]
},
{
name:'支出',
type:'bar',
data:[]
}
]
})
//异步加载数据
$.get('billecharts.action').done(function (data) {
data = eval('('+data+')');
console.log(data)
myChart.setOption({
xAxis:{
data:data.bi_date
},
series:[
{
//根据名字对应到相应的系列
name:"收入",
type:'bar',
data:data.income
},
{
name:'支出',
type:'bar',
data:data.expend
}
]
})
})
```改了下还是不可以