Echarts动态刷新数据---ajax调用（Demo）
以下用颜色标注部分为关键代码： ---使用ajax调用接口，动态获取（刷新）数据
html:
省内各区县GDP/企业数量
沪深上市
新三板
上市后备
江苏四板
JS:
$(function() {
$(".span_border").eq(0).click(function() {
/*option.series[0].data = [325, 1680, 3160, 1136, 2317, 1377, 3160];
option.series[1].data = [17, 3, 3, 3, 3, 3, 3];
myChart.setOption(option);*/
var type = "0";
loadDatas(type);
})
$(".span_border").eq(1).click(function() {
/*option.series[0].data = [0, 1680, 3160, 1136, 2317, 1377, 3160];
option.series[1].data = [17, 3, 3, 3, 3, 0, 3];
myChart.setOption(option);*/
var type = "1";
loadDatas(type);
})
$(".span_border").eq(2).click(function() {
/*option.series[0].data = [325, 0, 3160, 1136, 2317, 1377, 3160];
option.series[1].data = [17, 3, 3, 0, 3, 3, 3];
myChart.setOption(option);*/
var type = "2";
loadDatas(type);
})
$(".span_border").eq(3).click(function() {
/*option.series[0].data = [325, 1680, 0, 1136, 2317, 1377, 3160];
option.series[1].data = [17, 0, 3, 3, 3, 3, 3];
myChart.setOption(option);*/
var type = "3";
loadDatas(type);
})
function loadDatas(type) {
myChart.clear();
myChart.showLoading(); //数据获取显示之前先加载一段动画
$.ajax({
type: "post",
url: "http://61.155.4.120:8080/jsee-interface/company/get_county_statistical.do",
async: true,
dataType: "json",
success: function(result) {
if(type == "0") { //沪深上市
var ccgcoListForStksectorGDP = result.result_info.ccgcoListForStksectorGDP;
for(var i = 0; i < ccgcoListForStksectorGDP.length; i++) {
var data = ccgcoListForStksectorGDP[i];
data1.push(data.gdp_value);
data2.push(data.num_com);
}
option.series[0].data = data1;
option.series[1].data = data2;
myChart.hideLoading(); //数据获取成功之后隐藏动画
myChart.setOption(option);
}
if(type == "1") { //新三板
var ccgcoListForPubSecuritiesmainGDP = result.result_info.ccgcoListForPubSecuritiesmainGDP;
var data3 = [];
var data4 = [];
for(var i = 0; i < ccgcoListForPubSecuritiesmainGDP.length; i++) {
var data = ccgcoListForPubSecuritiesmainGDP[i];
data3.push(data.gdp_value);
data4.push(data.num_com);
}
option.series[0].data = data3 ;
option.series[1].data = data4;
myChart.hideLoading(); //数据获取成功之后隐藏动画
myChart.setOption(option);
}
if(type == "2") { //上市后备
var ccgcoListForPreEnterPriseGDP = result.result_info.ccgcoListForPreEnterPriseGDP;
var data5 = [];
var data6 = [];
for(var i = 0; i < ccgcoListForPreEnterPriseGDP.length; i++) {
var data = ccgcoListForPreEnterPriseGDP[i];
data5.push(data.gdp_value);
data6.push(data.num_com);
}
option.series[0].data = data5;
option.series[1].data = data6;
myChart.hideLoading(); //数据获取成功之后隐藏动画
myChart.setOption(option);
}
if(type == "3") { //江苏四板
var ccgcoListForCifOrganGDP = result.result_info.ccgcoListForCifOrganGDP;
var data7 = [];
var data8 = [];
for(var i = 0; i < ccgcoListForCifOrganGDP.length; i++) {
var data = ccgcoListForCifOrganGDP[i];
data7.push(data.gdp_value);
data8.push(data.num_com);
}
option.series[0].data = data7;
option.series[1].data = data8;
myChart.hideLoading(); //数据获取成功之后隐藏动画
myChart.setOption(option);
}
//myChart.hideLoading();
},
error: function() {
alert("获取失败");
}
});
}
// 基于准备好的dom，初始化echarts实例
var myChart = echarts.init(document.getElementById('chartmain'));
var data1 = []; //存储gdp数据
var data2 = []; //存储数量
// 指定图表的配置项和数据
var option = {
title: {
text: '',
show: false
},
tooltip: {},
legend: {
orient: 'horizontal',
left: 20,
top: 10,
data: ['GDP/亿', '数量'],
},
grid: {
left: 60
},
xAxis: [{
splitNumber: 3,
position: 'top',
name: '单位/亿',
nameLocation: 'start',
axisLine: {
lineStyle: {
width: 0 //这里是坐标轴的宽度,为0就是不显示
}
},
axisTick: {
show: false
}
}, {
splitNumber: 3,
name: "单位/个",
position: 'bottom',
nameLocation: 'start',
axisLine: {
lineStyle: {
width: 0 //这里是坐标轴的宽度,为0就是不显示
}
},
axisTick: {
show: false
}
}],
dataZoom: [
{
id: 'dataZoomY',
type: 'slider',
yAxisIndex: [0],
filterMode: 'empty',
start: 20,
end: 80
}
],
yAxis: [{
data: ["高淳区", "常熟市", "昆山市", "丹阳市", "张家港市", "宜兴市", "昆山市", "昆山市", "丹阳市", "张家港市", "宜兴市", "昆山市"],
inverse: true,
}],
series: [{
type: 'bar',
barWidth: 20,
name: 'GDP/亿',
//data: [325, 1680, 3160, 1136, 2317, 1377, 3160],
data: data1,
label: {
normal: {
show: true,
position: 'right',
}
},
}, {
name: '数量',
type: 'bar',
barWidth: 20,
xAxisIndex: 1,
//data: [17, 3, 3, 3, 3, 3, 3],
data: data2,
label: {
normal: {
show: true,
position: 'right',
}
},
}]
};
myChart.showLoading(); //数据获取显示之前先加载一段动画
$.ajax({
type: "post",
url: "http://61.175.4.120:808/jse-interface/company/get_county_statistical.do",
async: true,
dataType: "json",
success: function(result) {
var ccgcoListForStksectorGDP = result.result_info.ccgcoListForStksectorGDP;
for(var i = 0; i < ccgcoListForStksectorGDP.length; i++) {
var data = ccgcoListForStksectorGDP[i];
data1.push(data.gdp_value);
data2.push(data.num_com);
}
myChart.hideLoading(); //数据获取成功之后隐藏动画
myChart.setOption(option);
},
error: function() {
alert("获取失败");
}
});
// 使用刚指定的配置项和数据显示图表。
myChart.setOption(option);
})