在Echarts圖中給坐標軸加一個標識線markLine
Echart3數(shù)據(jù)可視化視圖
給坐標軸加一個標識線markLine
當X軸不是數(shù)值時,而是一個類型數(shù)據(jù),如年份,公司名,企業(yè)名,這時Echarts圖就不是從X軸起始位置開始的,所以我們就要給X軸加一個虛擬的值'0',在markLine中也是在賦值起始位置X軸值時,放置虛擬數(shù)據(jù),并且設置一個boundaryGap: 0,可以讓坐標軸與刻度之間空白變?yōu)?,這時標示線就從X軸起始位置開始了,詳細屬性可以去Echarts官網(wǎng)查看。
這里還要說一句在設置markLine下面data值時{x:”,//代表的是容器內(nèi)x的值,y:”,容器內(nèi)y的值},如果要設置在坐標軸內(nèi)的標示線,就要設置xAxis和yAxis.
代碼如下
option ={ xAxis: { splitLine: { show: false, }, axisLabel: { color: '#fff', rotate: '35', fontSize: 10, }, data: ['0', '2013年', '2014年', '2015年', '2016年', '2017年'], boundaryGap: 0, }, yAxis: { name: '(單位/km)', splitLine: { show: false, }, axisLabel: { color: '#fff', }, axisPointer: { lineStyle: { color: '#fff', }, value: '140', }, }, grid: { top: '10%', bottom: '27%', }, series: [{ data: DataAll, type: 'scatter', symbolSize: function (parmas) { return Math.ceil(parmas[2] / 1000); }, label: { emphasis: { show: true, formatter: function (param) { return param.data[3] + param.data[4]; }, position: 'top', }, }, markLine: { data: [ [ { name: '標線1起點', xAxis: 0, yAxis: 300, symbol: 'circle'}, { name: '標線1終點', xAxis: '2017年', yAxis: 300, symbol: 'circle' }, ], ], label: { normal: { show: true, position: 'middle', formatter: '節(jié)能與新能源汽車技術路線圖2020年目標', }, }, lineStyle: { normal: { type: 'solid', color: '#fff', }, }, }, itemStyle: { normal: { color: '#0fefee', }, }, }], }
效果圖
補充知識:日常記要 之 Echarts結合百度地圖,動態(tài)添加不同顏色的markline(markpoint同理)
其實找了網(wǎng)上的資料,大部分是同個顏色的markline,或者沒有所謂的定時,很是苦惱,于是自己查找API,解決了實際開發(fā)中的問題,今天有空特地拿出來簡單整理下,有什么不懂,或者我沒說清楚的,歡迎留言,廢話不多說,直接開始吧。
根據(jù)echarts官方API,動態(tài)添加markline需要使用addMarkLine()方法,它接收兩個參數(shù):一個seriesIdx系列索引(這里應該是指對應每一條markline的索引值)和一個markData(這里請參考官方API)。
在遇到的實際需求中,要求動態(tài)添加傳播的路線,并且能夠添加根據(jù)不同的顏色區(qū)分開來。這里遇到的問題主要有一下幾個:
既然是動態(tài)添加markline,那么就存在一對多,或者多對一的情況。這個比較好處理,就是在數(shù)據(jù)中,添加一個表示層級關系的屬性,一方面可以表現(xiàn)所謂的層級傳播關系,另一方面,在每次傳播過程中,同一層不管是一條markline還是多條,都是一樣的處理方法;
顏色的區(qū)分,因為實際遇到的情況是層級并不會很多,所以沒有做一個專門的Color對象去給每一層隨機添加顏色,而是實現(xiàn)定義好一個長度能夠滿足需求的數(shù)組存儲顏色值,這樣的一個好處是避免隨機下顏色接近看不出層級的關系;但是還有一個問題,是涉及到百度地圖的,這個留在后面說;
索引值的問題,既然需要動態(tài)添加markline,那么seriesIdx是否動態(tài)變化呢,還是每一層一個seriesIdx呢,想知道嗎?請耐心往下看吧。
其實上面提到的問題,在單純用echarts下應該是比較好解決的(雖然我并沒有做過測試),但是結合百度地圖的話,有個坑這里必須提一下,就是百度地圖是可以推動、縮放,以及它和echarts其實是兩個東西?。ó斎晃疫@里說的是,你動態(tài)添加到ecahrts里面的數(shù)據(jù),對百度地圖來說,根本就不知道?。?。
那么怎么解決呢,上代碼吧。
首先關于上面的第1個問題,由于數(shù)據(jù)是查詢出來的,并且業(yè)務需求是沒有實現(xiàn)規(guī)定好哪一條markline是哪一層,所以值考慮首位是不相同的,也就是開始和結束不在同一個位置,當然中間線的傳播是可以的,這個根據(jù)具體的業(yè)務去處理就可以了。(這里插句話,阿里的 fastjson還是挺好用的,但是在它的JSONArray有點尷尬,有數(shù)據(jù)沖突(還是相同這個有點忘記了)然后遍歷時,會生成一個$ref這樣的循環(huán)引用的東西出來,簡直了,不過JSONObject則不會出現(xiàn)同樣的問題)。
require.config({ // ecahrts引用,這里不做解釋了,請自行參考ecahrts的API例子 paths: { echarts: './lib/echarts' }, packages: [ { name: 'BMap', location: './lib/echarts/Bmap', main: 'main' } ] }); require( [ 'echarts', 'BMap', 'echarts/chart/map' // 使用柱map模塊,按需加載 ], function (echarts, BMapExtension) { // 初始化地圖 var BMapExt = new BMapExtension(that.element.find('div')[0], BMap, echarts, { enableMapClick: false }); var map = BMapExt.getMap(); // 因為這個有實際用途了,所以這里的代碼塊就不貼出來了,可按照自己的需求實現(xiàn),具體查看百度地圖的API // 這里主要處理的是,設置了百度地圖的邊界,初始化時顯示的區(qū)域,以及地圖的放大系數(shù) ...... // 在加載時,以下操作請加上,這里就回答了上面提到的第2個問題,因為echarts在動態(tài)加載markline時,其實數(shù)據(jù)時沒有加載進百度地圖的(當然我不知道這樣說明對不對哈),但百度地圖在每次縮放、拖拽時,都會重新渲染頁面,導致出現(xiàn)的加載情況不是我們想要的,比如剛才添加的markline不見了,或者所有的markline顏色變得跟當前最后一條添加的markline一樣,這些都是應該在這里先處理好,避免它發(fā)生。在全部的markline加載完之后,再初始化一下百度地圖的數(shù)據(jù),那么這個時候恢復百度地圖原有的功能,不管怎么渲染,都不會再出現(xiàn)前面的情況。 map.disableScrollWheelZoom(); // 禁用滾輪縮放 map.disableDoubleClickZoom(); // 禁用雙擊放大 map.disableDragging(); // 禁止拖拽 map.disableAutoResize(); // 禁止自適應容器變化 // 初始化echarts var fm = ''; var count = 0; var option = { color: [], tooltip: { trigger: 'item', formatter: fm }, series: [] }; // 這里是添加鼠標hover在markline上時,顯示的指定格式的內(nèi)容 if (!$.isEmptyObject(that.options.tooltip)) { if (that.options.tooltip.formatter && that.options.tooltip.formatter.indexOf('function') > -1) { option.tooltip.formatter = eval('(' + that.options.tooltip.formatter + ')'); } } // 添加第一層的markline that.buildMM(null, option, color, geoCoordVar, data, count); // 百度地圖獲取echarts容器 var container = BMapExt.getEchartsContainer(); // 初始化 myChart = BMapExt.initECharts(container); // 第一次設置option BMapExt.setOption(option, true); // setInterval的方式動態(tài)添加markline,count用來記錄當前的層,用以判斷是否所有層都已添加 var clear = null; var count = 0; clear = setInterval(function () { count++; if (count > level.length) { clear = window.clearInterval(clear); // 第二次設置option,這一步很重要,如果不設置,就會產(chǎn)生前面提到的情況(這真是一個坑,浪費了好多時間) BMapExt.setOption(option, true); map.enableScrollWheelZoom(); // 允許滾輪縮放 map.enableDoubleClickZoom(); // 允許雙擊放大 map.enableDragging(); } // 添加下一層的markline that.buildMM(myChart, option, color, geoCoordVar, data, count); // 其它操作 ...... }, that.options.speed); // speed是指定的添加速度 }); buildMM: function (myChart, option, color, geoCoordVar, data, count) { for (var i = 0; i < data.length; i++) { // 在查詢結果數(shù)據(jù)中,level標表示層級關系,這里與count匹配下一層的數(shù)據(jù) if (data[i]['level'] == count) { // 生成markline數(shù)據(jù) var ml = { smooth: true, effect: { show: false }, data: this.getMM(data[i])['markline'], itemStyle: { normal: { color: color[count], borderWidth: 1, lineStyle: { type: 'solid', shadowBlur: 20, color: color[count] } } } }; // 由于每一條markline是一個series,并且結合百度地圖,所以這里的參數(shù)中,需要注意type=map,mepType=none var item = { name: data[i]['name'], type: 'map', mapType: 'none', data: [], markLine: ml, geoCoord: geoCoordVar, itemStyle: { normal: { color: color[count], borderWidth: 1, lineStyle: { type: 'solid', shadowBlur: 20, color: color[count] } } } }; // 將當前markline的item添加到series中 option.series.push(item); // 調用addMarkLine,這里請注意看,seriesIdx我設置的都是0,如果不設置0,是會報錯的,所以也就是這么簡單地解決了第三個問題,因為每一個addMarkLine的markline對echarts來時都是新增的(當然這也只是我個人理解) myChart.addMarkLine( 0, ml ); } } }
以上的代碼我沒有全部貼出來,但是已經(jīng)夠用了,主要的內(nèi)容都在里面了。在每個地方基本都有做注釋,如有什么說的不對的,歡迎批評指正。好了,就到這了~希望大家多多支持腳本之家。
相關文章
vue3?process.env.XXX環(huán)境變量不生效的解決方法
這篇文章主要給大家介紹了關于vue3?process.env.XXX環(huán)境變量不生效的解決方法,通過文中介紹的方法可以很方便的解決遇到的問題,對大家學習或者使用vue3具有一定的參考借鑒價值,需要的朋友可以參考下2023-08-08淺談angular4.0中路由傳遞參數(shù)、獲取參數(shù)最nice的寫法
下面小編就為大家分享一篇淺談angular4.0中路由傳遞參數(shù)、獲取參數(shù)最nice的寫法,具有很好的參考價值,希望對大家有所幫助。一起跟隨小編過來看看吧2018-03-03Vue數(shù)組響應式操作及高階函數(shù)使用代碼詳解
這篇文章主要介紹了Vue數(shù)組響應式操作及高階函數(shù)使用代碼詳解,文中通過示例代碼介紹的非常詳細,對大家的學習或者工作具有一定的參考學習價值,需要的朋友可以參考下2020-08-08Vue.js 中的 v-model 指令及綁定表單元素的方法
這篇文章主要介紹了Vue.js 中的 v-model 指令及綁定表單元素的方法,本文通過實例代碼給大家介紹的非常詳細,具有一定的參考借鑒價值,需要的朋友可以參考下2018-12-12