Echarts使用心得總結——非同步資料載入與更新（二）
阿新 • • 發佈：2019-02-05
上次用Echarts做了一個會員增量統計圖表，正好用到了Echarts非同步資料載入，使用的是下拉聯動+Echarts資料更新，下面把實現程式碼分享給大家。
一、時間選擇器下拉聯動的實現：
<div class="selects-div">
<select id="YYYY" onchange="YYYYDD(this.value)" >
<option value="">選擇年</option>
</select>
<select id="MM" onchange="MMDD(this.value)" - 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9
- 10
- 11
1、使用js新增年份：
if (document.attachEvent)
window.attachEvent("onload", YYYYMMDDstart);
else - 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9
- 10
- 11
- 12
- 13
- 14
- 15
2、當年份改變時，載入月份的option：
function YYYYDD(str) //年發生變化時日期發生變化(主要是判斷閏平年)
{
loadDataOfYear();
var MMvalue = $('#MM').val();
if (MMvalue == "") {
var e = $('#DD');
optionsClear(e);
return;
}
var n = MonHead[MMvalue - 1];
if (MMvalue == 2 && IsPinYear(str)) n++;
writeDay(n)
//重置選擇日option
function optionsClear(e) {
e.html('<option value="">選擇 日</option>');
}
//判斷是否閏平年
function IsPinYear(year)
{
return (0 == year % 4 && (year % 100 != 0 || year % 400 == 0));
}
//據條件寫日期的下拉框
function writeDay(n)
{
var e = $('#DD');
optionsClear(e);
for (var i = 1; i < (n + 1) ; i++)
e.append(new Option(" " + i + " 日", i));
}
}- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9
- 10
- 11
- 12
- 13
- 14
- 15
- 16
- 17
- 18
- 19
- 20
- 21
- 22
- 23
- 24
- 25
- 26
- 27
- 28
- 29
- 30
- 31
- 32
- 33
- 34
3、當月份改變時，載入day的option：
//月發生變化時日期聯動
function MMDD(str)
{
loadDataOfMonth();//更新資料
var YYYYvalue = $('#YYYY').val();
if (YYYYvalue == "") {
var e = $('#DD');
optionsClear(e);
return;
}
var n = MonHead[str - 1];
if (str == 2 && IsPinYear(YYYYvalue)) n++;
writeDay(n)
}- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9
- 10
- 11
- 12
- 13
- 14
- 15
二、Echarts資料非同步載入和更新：
1、非同步載入資料：
var json = JSON.parse($('#hfJson').val());//獲取json資料
var dataAxis = [];//X軸name
var data = [];//y軸資料
for (var i = 0; i < json.length ; i++) {
dataAxis.push(json[i].X+'年');
data.push(json[i].Y);
}
// 基於準備好的dom，初始化echarts例項
var myChart = echarts.init(document.getElementById('main'));
myChart.setOption({
title: {
text: '會員增量統計表',
subtext: ''
},
toolbox: {
feature: {
magicType: {
type: ['stack', 'tiled']
},
dataView: {},
saveAsImage: {
pixelRatio: 2
}
}
},
tooltip: {
},
xAxis: {
data: []
},
yAxis: {
axisLine: {
show: false
},
axisTick: {
show: false
},
axisLabel: {
textStyle: {
color: '#999'
}
}
},
series: [
{
type: 'line',
itemStyle: {
normal: {
color: '#83bff6'
}
},
data: []
}
]
});
// 使用剛指定的配置項和資料顯示圖表。
myChart.setOption({
xAxis: {
data: dataAxis
},
series: [
{
type: 'line',
itemStyle: {
normal: {
color: '#83bff6'
}
},
data: data
}
]
});- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9
- 10
- 11
- 12
- 13
- 14
- 15
- 16
- 17
- 18
- 19
- 20
- 21
- 22
- 23
- 24
- 25
- 26
- 27
- 28
- 29
- 30
- 31
- 32
- 33
- 34
- 35
- 36
- 37
- 38
- 39
- 40
- 41
- 42
- 43
- 44
- 45
- 46
- 47
- 48
- 49
- 50
- 51
- 52
- 53
- 54
- 55
- 56
- 57
- 58
- 59
- 60
- 61
- 62
- 63
- 64
- 65
- 66
- 67
- 68
- 69
- 70
- 71
- 72
- 73
- 74
- 75
- 76
2、資料更新操作（當改變年份或月份時更新資料）：
//年份改變，更新資料
function loadDataOfYear() {
var url;
if (str == "") {
url = '/tools/admin_ajax.ashx?action=ylzg_stat_member_amount&option=0';
$("#MM").find("option[text='選擇月']").attr("selected", true);
} else if ($('#MM option:selected').val() == "") {
url = '/tools/admin_ajax.ashx?action=ylzg_stat_member_amount&option=1&year=' + str;
} else {
url = '/tools/admin_ajax.ashx?action=ylzg_stat_member_amount&option=2&year=' + str + '&month=' + $('#MM option:selected').val();
}
myChart.showLoading();
$.ajax({
type: "post",
url: url,
data: {},
success: function (msg) {
if (msg.status == 1) {
myChart.hideLoading();
var obj = msg;
dataAxis = [];
data = [];
for (var i = 0; i < obj.data.length; i++) {
var strX;
if (str == "") {
strX = obj.data[i].X + "年";
} else if ($('#MM option:selected').val() == "") {
strX = obj.data[i].X + "月";
} else {
strX = obj.data[i].X + "日";
}
dataAxis.push(strX);
data.push(obj.data[i].Y);
}
myChart.setOption({
xAxis: {
data: dataAxis
},
series: [
{
type: 'line',
itemStyle: {
normal: {
color: '#83bff6'
}
},
data: data
}
]
});
}
else {
alert(msg.msg);
}
}
})
}
//月份改變，更新資料
function loadDataOfMonth() {
if ($('#YYYY option:selected').val() == "") {
alert("請選擇年份");
return;
}
var url = str == "" ? '/tools/admin_ajax.ashx?action=ylzg_stat_member_amount&option=1&year=' + $('#YYYY option:selected').val() :
'/tools/admin_ajax.ashx?action=ylzg_stat_member_amount&option=2&year=' + $('#YYYY option:selected').val() + '&month=' + str;
myChart.showLoading();
$.ajax({
type: "post",
url: url,
data: {},
success: function (msg) {
if (msg.status == 1) {
myChart.hideLoading();
var obj = msg;
dataAxis = [];
data = [];
for (var i = 0; i < obj.data.length; i++) {
var strX = str == "" ? obj.data[i].X + '月' : obj.data[i].X + '日';
dataAxis.push(strX);
data.push(obj.data[i].Y);
}
myChart.setOption({
xAxis: {
data: dataAxis,
},
series: [
{
type: 'line',
itemStyle: {
normal: {
color: '#83bff6'
}
},
data: data
}
]
});
}
else {
alert(msg.msg);
}
}
})
}- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9
- 10
- 11
- 12
- 13
- 14
- 15
- 16
- 17
- 18
- 19
- 20
- 21
- 22
- 23
- 24
- 25
- 26
- 27
- 28
- 29
- 30
- 31
- 32
- 33
- 34
- 35
- 36
- 37
- 38
- 39
- 40
- 41
- 42
- 43
- 44
- 45
- 46
- 47
- 48
- 49
- 50
- 51
- 52
- 53
- 54
- 55
- 56
- 57
- 58
- 59
- 60
- 61
- 62
- 63
- 64
- 65
- 66
- 67
- 68
- 69
- 70
- 71
- 72
- 73
- 74
- 75
- 76
- 77
- 78
- 79
- 80
- 81
- 82
- 83
- 84
- 85
- 86
- 87
- 88
- 89
- 90
- 91
- 92
- 93
- 94
- 95
- 96
- 97
- 98
- 99
- 100
- 101
- 102
- 103
- 104
- 105
- 106
- 107
- 108
三、執行例項為：
