最近在用echarts制作报表。由于数据量很大。所以加载的时候需要时间有点长。这就需要用到showloading方法。但是搞了好久。总是不起作用。最后。死马当成活马医。把官网文档里的代码拷下来。一点点去试,最后终于成了。然后发现这个必须要用settimeout才行。坑死了。不知道为啥要这样。
下面贴代码:
1,
var myChart = echarts.init(document.getElementById('main'));
页面初始化后调用方法:function inittran() {
// 初始 option
myChart.showLoading();
setTimeout(initTransac, ,2000);
}
2,
function initTransac() {
//页面数据初始化
var date = new Date();
var cmonth = 12;
var nyear = date.getFullYear();
var cyear = $("#ddlyear").val();
if (nyear == cyear) {
cmonth = date.getMonth() + 1;
}
var title = "";
if ($('#parkSelect').val() != "") {
title += $('#parkSelect').val();
}
if ($('#carNo').val() != "") {
title += $('#carNo').val();
}
if (cyear != "") {
title += cyear + "年";
}
if (cmonth != "") {
title += cmonth + "月";
}
title += "交易额";
var nametitle = "月份";
var tooltiptitle = "月份";
if ($("#ddlmonth").val() != "0") {
nametitle = "天数";
tooltiptitle = "日";
}
var m = new Array();
var c = new Array();
// 异步加载数据
$.ajax({
url: "/manage/echarts/transac/ajax/index",
dataType: "json",
async: false,
data: {
"year": cyear,
"month": cmonth,
"cmonth": $("#ddlmonth").val(),
"parkName": $('#parkSelect').val(),
"carNo" : $('#carNo').val()
},
success: function (msg) {
myChart.hideLoading();
option = {
text: title,
tooltip : {
trigger: 'item',
formatter: function (params, ticket, callback) {
return '时间:'+params.name + tooltiptitle + '<br/>交易额:'+ formatCurrency(params.value)+'元';
}
},
toolbox: {
show : true,
feature : {
magicType: { show: true, type: ['line', 'bar'] },
restore : { show: true },
},
},
calculable : true,
legend: {
data: '交易额',
itemGap: 5
},
xAxis: [
{
type : 'category',
name : nametitle,
data : msg.m
}
],
yAxis: [
{
type : 'value',
name : '交易额/元',
}
],
series : [
{
name: '交易额',
type: 'bar',
data: msg.c,
itemStyle: {
normal: {
// 设置扇形的颜色
color: '#c23531',
shadowBlur: 200,
shadowColor: 'rgba(0, 0, 0, 0.5)'
}
}
}
]
};
myChart.hideLoading();
myChart.setOption(option);
}
});
}