echarts異步擷取mysql資料_ECharts異步請求資料

ECharts是百度的一個用于資料可視化圖表展示的一個開源工具。

ECharts官網：ECharts

一、異步請求官網執行個體1

1、引入jQuery.js、echarts.js(多種方式)

2、繪制圖表

①為ECharts準備一個具備大小(寬高)的Dom

②基于準備好的dom，初始化echarts執行個體

③異步請求資料

方法A：

// 基于準備好的dom，初始化echarts執行個體

var myChart = echarts.init(document.getElementById('main'));

// 異步請求資料

$.get('http://localhost:9010/data1.json').done(function (data) {

myChart.setOption({

title: {

text: '異步加載資料demo'

},

tooltip:{},

legend:{

data:['銷量']

},

xAxis:{

data:["襯衫","羊毛衫","雪紡衫","褲子","高跟鞋","襪子"]

},

yAxis:{},

series:[{

name:'銷量',

type:'bar',

data:[5, 20, 36, 10, 10, 20]

}]

});

})

方法B：

先設定完其它的樣式，顯示一個空的直角坐标軸，然後擷取資料後填入資料。

data1.json檔案格式如下：

{

"name": [

"襯衫",

"羊毛衫",

"雪紡衫",

"褲子",

"高跟鞋",

"襪子"

],

"value": [

5,

20,

36,

10,

10,

20

]

}

script：

// 基于準備好的dom，初始化echarts執行個體

var myChart = echarts.init(document.getElementById('main'));

//設定一個空的直角坐标軸，然後擷取資料填入資料

myChart.setOption({

title: {

text: '異步加載資料demo'

},

tooltip: {},

legend: {

data: ['']

},

xAxis: {

data: []

},

yAxis: {},

series: [{

name: '銷量',

type: 'bar',

data: []

}]

})

// 異步請求資料

$.get('http://localhost:9010/data1.json').done(function (resule) {

myChart.setOption({

xAxis: {

// 根據data1.json擷取需要的值

data: resule.name

},

yAxis: {},

series: [{

name: '銷量',

type: 'bar',

// 根據data1.json擷取需要的值

data: resule.value

}]

});

})

兩種方法的顯示結果都如下：

異步請求資料執行個體1

二、異步請求資料執行個體2

data2.json的資料格式和data1.json不一樣，要注意将資料轉換成數組。

data.json檔案：

{

"success": true,

"code": 100000,

"recordsTotal": 5,

"data": [

{

"beginTime": 1531756800000,

"endTime": 1532188800000,

"intervalDays": "0",

"durationDays": "5",

"time":"一月"

},

{

"beginTime": 1535385600000,

"endTime": 1535731200000,

"intervalDays": "38",

"durationDays": "4",

"time":"二月"

},

{

"beginTime": 1539100800000,

"endTime": 1539446400000,

"intervalDays": "40",

"durationDays": "4",

"time":"三月"

},

{

"beginTime": 1541692800000,

"endTime": 1542124800000,

"intervalDays": "27",

"durationDays": "5",

"time":"四月"

},

{

"beginTime": 1545235200000,

"endTime": 1545580800000,

"intervalDays": "37",

"durationDays": "4",

"time":"五月"

}

]

}

script:

// 一、将data2.json中data的月份轉化成數組(将月份提取出來并放到一個新數組裡)

function convertMonthToArray(resule) {

var data = resule.data;

var arr = [];

for (var i = 0; i < data.length; i++) {

// 1、擷取data中的time屬性

console.log(data[i].time);

// 2、将time屬性放到一個新的數組裡

arr.push(data[i].time);

}

console.log(arr);

// 3、傳回arr數組

return arr;

}

//二、将data2.json中間隔時間裝換成數組

function convertIntervalDaysToArray(resule) {

var data = resule.data;

var arr = [];

for (var i = 0; i < data.length; i++) {

arr.push(data[i].intervalDays);

}

return arr;

}

// 三、異步請求資料

$.get('http://localhost:9010/data2.json').done(function (resule) {

// 獲的X，函數方法要傳參，不然無意義

var xAxisMonth = convertMonthToArray(resule);

// 獲的Y

var yAxisIntervalDays = convertIntervalDaysToArray(resule);

myChart.setOption({

xAxis: {

// 根據data2.json擷取需要的值

data: xAxisMonth

},

yAxis: {},

series: [{

name: '銷量',

type: 'bar',

// 根據data2.json擷取需要的值

data: yAxisIntervalDays

}]

});

})

顯示結果：

異步請求資料執行個體2

注意：

$.get('url')，url不能跨域

打開位址要使用本地伺服器打開，如下(學習搭建本地伺服器可以參考：使用python3建立本地區域網路)：

正确浏覽方式.png

錯誤浏覽方式

學習筆記整理，如有錯，望指出，共同進步