亚洲在线久爱草,狠狠天天香蕉网,天天搞日日干久草,伊人亚洲日本欧美

為了賬號安全,請及時綁定郵箱和手機立即綁定
已解決430363個問題,去搜搜看,總會有你想問的

echarts官方示例代碼解釋(非專業前端,javascripts有基礎不精通),還望賜教

echarts官方示例代碼解釋(非專業前端,javascripts有基礎不精通),還望賜教

無無法師 2017-03-19 13:44:32
$.get('data/asset/data/lines-bus.json',?function(data)?{ ????var?hStep?=?300?/?(data.length?-?1); ????var?busLines?=?[].concat.apply([],?data.map(function?(busLine,?idx)?{ ????????var?prevPt; ????????var?points?=?[]; ????????for?(var?i?=?0;?i?<?busLine.length;?i?+=?2)?{ ????????????var?pt?=?[busLine[i],?busLine[i?+?1]]; ????????????if?(i?>?0)?{ ????????????????pt?=?[ ????????????????????prevPt[0]?+?pt[0], ????????????????????prevPt[1]?+?pt[1] ????????????????]; ????????????} ????????????prevPt?=?pt; ????????????points.push([pt[0]?/?1e4,?pt[1]?/?1e4]); ????????} ????????return?{ ????????????coords:?points, ????????????lineStyle:?{ ????????????????normal:?{ ????????????????????color:?echarts.color.modifyHSL('#5A94DF',?Math.round(hStep?*?idx)) ????????????????} ????????????} ????????}; ????}));data/asset/data/lines-bus.json是:echarts源地址:http://echarts.baidu.com/demo.html#lines-bmap-effect
查看完整描述

2 回答

?
慕無忌6238110

TA貢獻1條經驗 獲得超3個贊

首先lines-bus.json是一個二維數組,里面每一個一維數組存儲一輛公交車的軌跡,其中第一個和第二個元素為初始坐標(經緯度*10000),往后每兩個元素為一組表示經緯度的偏移量(*10000)。

var?busLines?=?[].concat.apply([],?data.map(function?(busLine,?idx)?{}))是將data數組映射到一個新的數組里,即將lines-bus.json轉換為真實的經緯度坐標。

var?pt?=?[busLine[i],?busLine[i?+?1]];為起始點坐標。

if?(i?>?0)?{

? ? ? ? ? ? ? ?pt?=?[prevPt[0]?+?pt[0], prevPt[1]?+?pt[1] ];

????????????}計算加上偏移量后的經緯度*10000

prevPt?=?pt;將當前坐標賦值給上一個點坐標,繼續循環;

points.push([pt[0]?/?1e4,?pt[1]?/?1e4]);坐標小數點前移四位得到真實的經緯度值,存儲到points數組里。

?return?{

????????????coords:?points,

????????????lineStyle:?{

????????????????normal:?{

????????????????????color:?echarts.color.modifyHSL('#5A94DF',?Math.round(hStep?*?idx))

????????????????}

????????????}

????????};為新數組的存儲格式,新的數組每一個元素是一個對象。


查看完整回答
3 反對 回復 2017-06-22
?
慕仔1023009

TA貢獻1條經驗 獲得超1個贊

你好,我想請教一下,你怎么知道知道data/asset/data/lines-bus.json的數據的???


查看完整回答
1 反對 回復 2019-01-19
  • 2 回答
  • 0 關注
  • 8058 瀏覽
慕課專欄
更多

添加回答

舉報

0/150
提交
取消
微信客服

購課補貼
聯系客服咨詢優惠詳情

幫助反饋 APP下載

慕課網APP
您的移動學習伙伴

公眾號

掃描二維碼
關注慕課網微信公眾號