您好,登錄后才能下訂單哦!
本文小編為大家詳細介紹“ECharts異步加載數(shù)據(jù)與數(shù)據(jù)集的方法”,內(nèi)容詳細,步驟清晰,細節(jié)處理妥當,希望這篇“ECharts異步加載數(shù)據(jù)與數(shù)據(jù)集的方法”文章能幫助大家解決疑惑,下面跟著小編的思路慢慢深入,一起來學習新知識吧。
ECharts 通常數(shù)據(jù)設置在 setOption 中,如果我們需要異步加載數(shù)據(jù),可以配合 jQuery等工具,在異步獲取數(shù)據(jù)后通過 setOption 填入數(shù)據(jù)和配置項就行。
json 數(shù)據(jù):
{ "data_pie" : [ {"value":235, "name":"視頻廣告"}, {"value":274, "name":"聯(lián)盟廣告"}, {"value":310, "name":"郵件營銷"}, {"value":335, "name":"直接訪問"}, {"value":400, "name":"搜索引擎"} ] }
實例
var myChart = echarts.init(document.getElementById('main')); $.get('https://www.runoob.com/static/js/echarts_test_data.json', function (data) { myChart.setOption({ series : [ { name: '訪問來源', type: 'pie', // 設置圖表類型為餅圖 radius: '55%', // 餅圖的半徑,外半徑為可視區(qū)尺寸(容器高寬中較小一項)的 55% 長度。 data:data.data_pie } ] }) }, 'json')
如果異步加載需要一段時間,我們可以添加 loading 效果,ECharts 默認有提供了一個簡單的加載動畫。只需要調(diào)用 showLoading 方法顯示。數(shù)據(jù)加載完成后再調(diào)用 hideLoading 方法隱藏加載動畫:
var myChart = echarts.init(document.getElementById('main')); myChart.showLoading(); // 開啟 loading 效果 $.get('https://www.runoob.com/static/js/echarts_test_data.json', function (data) { myChart.hideLoading(); // 隱藏 loading 效果 myChart.setOption({ series : [ { name: '訪問來源', type: 'pie', // 設置圖表類型為餅圖 radius: '55%', // 餅圖的半徑,外半徑為可視區(qū)尺寸(容器高寬中較小一項)的 55% 長度。 data:data.data_pie } ] }) }, 'json')
ECharts 由數(shù)據(jù)驅(qū)動,數(shù)據(jù)的改變驅(qū)動圖表展現(xiàn)的改變,因此動態(tài)數(shù)據(jù)的實現(xiàn)也變得異常簡單。
所有數(shù)據(jù)的更新都通過 setOption 實現(xiàn),你只需要定時獲取數(shù)據(jù),setOption 填入數(shù)據(jù),而不用考慮數(shù)據(jù)到底產(chǎn)生了那些變化,ECharts 會找到兩組數(shù)據(jù)之間的差異然后通過合適的動畫去表現(xiàn)數(shù)據(jù)的變化。
var base = +new Date(2014, 9, 3); var oneDay = 24 * 3600 * 1000; var date = []; var data = [Math.random() * 150]; var now = new Date(base); function addData(shift) { now = [now.getFullYear(), now.getMonth() + 1, now.getDate()].join('/'); date.push(now); data.push((Math.random() - 0.4) * 10 + data[data.length - 1]); if (shift) { date.shift(); data.shift(); } now = new Date(+new Date(now) + oneDay); } for (var i = 1; i < 100; i++) { addData(); } option = { xAxis: { type: 'category', boundaryGap: false, data: date }, yAxis: { boundaryGap: [0, '50%'], type: 'value' }, series: [ { name:'成交', type:'line', smooth:true, symbol: 'none', stack: 'a', areaStyle: { normal: {} }, data: data } ] }; setInterval(function () { addData(true); myChart.setOption({ xAxis: { data: date }, series: [{ name:'成交', data: data }] }); }, 500); var myChart = echarts.init(document.getElementById('main'), 'dark'); myChart.setOption(option);
ECharts 使用 dataset 管理數(shù)據(jù)。
dataset 組件用于單獨的數(shù)據(jù)集聲明,從而數(shù)據(jù)可以單獨管理,被多個組件復用,并且可以基于數(shù)據(jù)指定數(shù)據(jù)到視覺的映射。
下面是一個最簡單的 dataset 的例子:
option = { legend: {}, tooltip: {}, dataset: { // 提供一份數(shù)據(jù)。 source: [ ['product', '2015', '2016', '2017'], ['Matcha Latte', 43.3, 85.8, 93.7], ['Milk Tea', 83.1, 73.4, 55.1], ['Cheese Cocoa', 86.4, 65.2, 82.5], ['Walnut Brownie', 72.4, 53.9, 39.1] ] }, // 聲明一個 X 軸,類目軸(category)。默認情況下,類目軸對應到 dataset 第一列。 xAxis: {type: 'category'}, // 聲明一個 Y 軸,數(shù)值軸。 yAxis: {}, // 聲明多個 bar 系列,默認情況下,每個系列會自動對應到 dataset 的每一列。 series: [ {type: 'bar'}, {type: 'bar'}, {type: 'bar'} ] }
或者也可以使用常見的對象數(shù)組的格式:
option = { legend: {}, tooltip: {}, dataset: { // 這里指定了維度名的順序,從而可以利用默認的維度到坐標軸的映射。 // 如果不指定 dimensions,也可以通過指定 series.encode 完成映射,參見后文。 dimensions: ['product', '2015', '2016', '2017'], source: [ {product: 'Matcha Latte', '2015': 43.3, '2016': 85.8, '2017': 93.7}, {product: 'Milk Tea', '2015': 83.1, '2016': 73.4, '2017': 55.1}, {product: 'Cheese Cocoa', '2015': 86.4, '2016': 65.2, '2017': 82.5}, {product: 'Walnut Brownie', '2015': 72.4, '2016': 53.9, '2017': 39.1} ] }, xAxis: {type: 'category'}, yAxis: {}, series: [ {type: 'bar'}, {type: 'bar'}, {type: 'bar'} ] };
我們可以在配置項中將數(shù)據(jù)映射到圖形中。
我么可以使用 series.seriesLayoutBy 屬性來配置 dataset 是列(column)還是行(row)映射為圖形系列(series),默認是按照列(column)來映射。
以下實例我們將通過 seriesLayoutBy 屬性來配置數(shù)據(jù)是使用列顯示還是按行顯示。
option = { legend: {}, tooltip: {}, dataset: { source: [ ['product', '2012', '2013', '2014', '2015'], ['Matcha Latte', 41.1, 30.4, 65.1, 53.3], ['Milk Tea', 86.5, 92.1, 85.7, 83.1], ['Cheese Cocoa', 24.1, 67.2, 79.5, 86.4] ] }, xAxis: [ {type: 'category', gridIndex: 0}, {type: 'category', gridIndex: 1} ], yAxis: [ {gridIndex: 0}, {gridIndex: 1} ], grid: [ {bottom: '55%'}, {top: '55%'} ], series: [ // 這幾個系列會在第一個直角坐標系中,每個系列對應到 dataset 的每一行。 {type: 'bar', seriesLayoutBy: 'row'}, {type: 'bar', seriesLayoutBy: 'row'}, {type: 'bar', seriesLayoutBy: 'row'}, // 這幾個系列會在第二個直角坐標系中,每個系列對應到 dataset 的每一列。 {type: 'bar', xAxisIndex: 1, yAxisIndex: 1}, {type: 'bar', xAxisIndex: 1, yAxisIndex: 1}, {type: 'bar', xAxisIndex: 1, yAxisIndex: 1}, {type: 'bar', xAxisIndex: 1, yAxisIndex: 1} ] }
常用圖表所描述的數(shù)據(jù)大部分是"二維表"結(jié)構,我們可以使用 series.encode 屬性將對應的數(shù)據(jù)映射到坐標軸(如 X、Y 軸):
var option = { dataset: { source: [ ['score', 'amount', 'product'], [89.3, 58212, 'Matcha Latte'], [57.1, 78254, 'Milk Tea'], [74.4, 41032, 'Cheese Cocoa'], [50.1, 12755, 'Cheese Brownie'], [89.7, 20145, 'Matcha Cocoa'], [68.1, 79146, 'Tea'], [19.6, 91852, 'Orange Juice'], [10.6, 101852, 'Lemon Juice'], [32.7, 20112, 'Walnut Brownie'] ] }, grid: {containLabel: true}, xAxis: {}, yAxis: {type: 'category'}, series: [ { type: 'bar', encode: { // 將 "amount" 列映射到 X 軸。 x: 'amount', // 將 "product" 列映射到 Y 軸。 y: 'product' } } ] };
encode 聲明的基本結(jié)構如下,其中冒號左邊是坐標系、標簽等特定名稱,如 'x', 'y', 'tooltip' 等,冒號右邊是數(shù)據(jù)中的維度名(string 格式)或者維度的序號(number 格式,從 0 開始計數(shù)),可以指定一個或多個維度(使用數(shù)組)。通常情況下,下面各種信息不需要所有的都寫,按需寫即可。
下面是 encode 支持的屬性:
// 在任何坐標系和系列中,都支持: encode: { // 使用 “名為 product 的維度” 和 “名為 score 的維度” 的值在 tooltip 中顯示 tooltip: ['product', 'score'] // 使用 “維度 1” 和 “維度 3” 的維度名連起來作為系列名。(有時候名字比較長,這可以避免在 series.name 重復輸入這些名字) seriesName: [1, 3], // 表示使用 “維度2” 中的值作為 id。這在使用 setOption 動態(tài)更新數(shù)據(jù)時有用處,可以使新老數(shù)據(jù)用 id 對應起來,從而能夠產(chǎn)生合適的數(shù)據(jù)更新動畫。 itemId: 2, // 指定數(shù)據(jù)項的名稱使用 “維度3” 在餅圖等圖表中有用,可以使這個名字顯示在圖例(legend)中。 itemName: 3 } // 直角坐標系(grid/cartesian)特有的屬性: encode: { // 把 “維度1”、“維度5”、“名為 score 的維度” 映射到 X 軸: x: [1, 5, 'score'], // 把“維度0”映射到 Y 軸。 y: 0 } // 單軸(singleAxis)特有的屬性: encode: { single: 3 } // 極坐標系(polar)特有的屬性: encode: { radius: 3, angle: 2 } // 地理坐標系(geo)特有的屬性: encode: { lng: 3, lat: 2 } // 對于一些沒有坐標系的圖表,例如餅圖、漏斗圖等,可以是: encode: { value: 3 }
更多 encode 實例:
life-expectancy-table.json:
[ ["Income","Life Expectancy","Population","Country","Year"], [815,34.05,351014,"Australia",1800], [1314,39,645526,"Canada",1800], [985,32,321675013,"China",1800], [864,32.2,345043,"Cuba",1800], [1244,36.5731262,977662,"Finland",1800], [1803,33.96717024,29355111,"France",1800], [1639,38.37,22886919,"Germany",1800], [926,42.84559912,61428,"Iceland",1800], [1052,25.4424,168574895,"India",1800], [1050,36.4,30294378,"Japan",1800], [579,26,4345000,"North Korea",1800], [576,25.8,9395000,"South Korea",1800], [658,34.05,100000,"New Zealand",1800] ]
實例
$.get('https://www.runoob.com/static/js/life-expectancy-table.json', function (data) { var sizeValue = '57%'; var symbolSize = 2.5; option = { legend: {}, tooltip: {}, toolbox: { left: 'center', feature: { dataZoom: {} } }, grid: [ {right: sizeValue, bottom: sizeValue}, {left: sizeValue, bottom: sizeValue}, {right: sizeValue, top: sizeValue}, {left: sizeValue, top: sizeValue} ], xAxis: [ {type: 'value', gridIndex: 0, name: 'Income', axisLabel: {rotate: 50, interval: 0}}, {type: 'category', gridIndex: 1, name: 'Country', boundaryGap: false, axisLabel: {rotate: 50, interval: 0}}, {type: 'value', gridIndex: 2, name: 'Income', axisLabel: {rotate: 50, interval: 0}}, {type: 'value', gridIndex: 3, name: 'Life Expectancy', axisLabel: {rotate: 50, interval: 0}} ], yAxis: [ {type: 'value', gridIndex: 0, name: 'Life Expectancy'}, {type: 'value', gridIndex: 1, name: 'Income'}, {type: 'value', gridIndex: 2, name: 'Population'}, {type: 'value', gridIndex: 3, name: 'Population'} ], dataset: { dimensions: [ 'Income', 'Life Expectancy', 'Population', 'Country', {name: 'Year', type: 'ordinal'} ], source: data }, series: [ { type: 'scatter', symbolSize: symbolSize, xAxisIndex: 0, yAxisIndex: 0, encode: { x: 'Income', y: 'Life Expectancy', tooltip: [0, 1, 2, 3, 4] } }, { type: 'scatter', symbolSize: symbolSize, xAxisIndex: 1, yAxisIndex: 1, encode: { x: 'Country', y: 'Income', tooltip: [0, 1, 2, 3, 4] } }, { type: 'scatter', symbolSize: symbolSize, xAxisIndex: 2, yAxisIndex: 2, encode: { x: 'Income', y: 'Population', tooltip: [0, 1, 2, 3, 4] } }, { type: 'scatter', symbolSize: symbolSize, xAxisIndex: 3, yAxisIndex: 3, encode: { x: 'Life Expectancy', y: 'Population', tooltip: [0, 1, 2, 3, 4] } } ] }; myChart.setOption(option); });
我們可以使用 visualMap 組件進行視覺通道的映射。
視覺元素可以是:
symbol: 圖元的圖形類別。
symbolSize: 圖元的大小。
color: 圖元的顏色。
colorAlpha: 圖元的顏色的透明度。
opacity: 圖元以及其附屬物(如文字標簽)的透明度。
colorLightness: 顏色的明暗度。
colorSaturation: 顏色的飽和度。
colorHue: 顏色的色調(diào)。
visualMap 組件可以定義多個,從而可以同時對數(shù)據(jù)中的多個維度進行視覺映射。
var option = { dataset: { source: [ ['score', 'amount', 'product'], [89.3, 58212, 'Matcha Latte'], [57.1, 78254, 'Milk Tea'], [74.4, 41032, 'Cheese Cocoa'], [50.1, 12755, 'Cheese Brownie'], [89.7, 20145, 'Matcha Cocoa'], [68.1, 79146, 'Tea'], [19.6, 91852, 'Orange Juice'], [10.6, 101852, 'Lemon Juice'], [32.7, 20112, 'Walnut Brownie'] ] }, grid: {containLabel: true}, xAxis: {name: 'amount'}, yAxis: {type: 'category'}, visualMap: { orient: 'horizontal', left: 'center', min: 10, max: 100, text: ['High Score', 'Low Score'], // Map the score column to color dimension: 0, inRange: { color: ['#D7DA8B', '#E15457'] } }, series: [ { type: 'bar', encode: { // Map the "amount" column to X axis. x: 'amount', // Map the "product" column to Y axis y: 'product' } } ] };
以下實例多個圖表共享一個 dataset,并帶有聯(lián)動交互:
setTimeout(function () { option = { legend: {}, tooltip: { trigger: 'axis', showContent: false }, dataset: { source: [ ['product', '2012', '2013', '2014', '2015', '2016', '2017'], ['Matcha Latte', 41.1, 30.4, 65.1, 53.3, 83.8, 98.7], ['Milk Tea', 86.5, 92.1, 85.7, 83.1, 73.4, 55.1], ['Cheese Cocoa', 24.1, 67.2, 79.5, 86.4, 65.2, 82.5], ['Walnut Brownie', 55.2, 67.1, 69.2, 72.4, 53.9, 39.1] ] }, xAxis: {type: 'category'}, yAxis: {gridIndex: 0}, grid: {top: '55%'}, series: [ {type: 'line', smooth: true, seriesLayoutBy: 'row'}, {type: 'line', smooth: true, seriesLayoutBy: 'row'}, {type: 'line', smooth: true, seriesLayoutBy: 'row'}, {type: 'line', smooth: true, seriesLayoutBy: 'row'}, { type: 'pie', id: 'pie', radius: '30%', center: ['50%', '25%'], label: { formatter: ': {@2012} (vnt7ywd%)' }, encode: { itemName: 'product', value: '2012', tooltip: '2012' } } ] }; myChart.on('updateAxisPointer', function (event) { var xAxisInfo = event.axesInfo[0]; if (xAxisInfo) { var dimension = xAxisInfo.value + 1; myChart.setOption({ series: { id: 'pie', label: { formatter: ': {@[' + dimension + ']} (kj3di00%)' }, encode: { value: dimension, tooltip: dimension } } }); } }); myChart.setOption(option); });
讀到這里,這篇“ECharts異步加載數(shù)據(jù)與數(shù)據(jù)集的方法”文章已經(jīng)介紹完畢,想要掌握這篇文章的知識點還需要大家自己動手實踐使用過才能領會,如果想了解更多相關內(nèi)容的文章,歡迎關注億速云行業(yè)資訊頻道。
免責聲明:本站發(fā)布的內(nèi)容(圖片、視頻和文字)以原創(chuàng)、轉(zhuǎn)載和分享為主,文章觀點不代表本網(wǎng)站立場,如果涉及侵權請聯(lián)系站長郵箱:is@yisu.com進行舉報,并提供相關證據(jù),一經(jīng)查實,將立刻刪除涉嫌侵權內(nèi)容。