echarts - 使用echarts过程中遇到的问题(pending...)
?1. 配合tab切換時(shí),被display:none的元素init設(shè)置echarts失敗
2018-11-09??18:09:35
現(xiàn)象描述:有一個(gè)tabs選項(xiàng)卡,每個(gè)切換項(xiàng)A、B中都有使用echarts,默認(rèn)展示的A項(xiàng)中的ecarts初始化和繪制都沒問題。
而第二個(gè)默認(rèn)隱藏項(xiàng)B就是一片空白。檢查B的echarts盒子還在且是css中設(shè)置的寬高大小。但是內(nèi)部canvas為空,即圖表沒有繪制。
找問題過程:
假如我的echarts圖表所在元素為:div#echartsDiv。
并將其父元素設(shè)置 display:none
然后我console一下document.getElementById('echartsDiv');
展開拋出的對(duì)象會(huì)發(fā)現(xiàn):他的clientWidth和Height都是0,甚至scroll和offset系列的寬高皆為0(看圖別介意id名對(duì)不上)
?
對(duì)比一個(gè)父元素沒有隱藏的元素,他的寬高就很正常:
這樣我們就明白了,echarts繪制之前是要獲取要繪制區(qū)域的寬高的,如果皆為0那肯定失敗的。
找到問題原因,就是解決:
既然根出在初始化時(shí)的元素寬高上,那我們開局就設(shè)置寬高即可。
我這里的主要問題是場(chǎng)景用在移動(dòng)端,元素寬度肯定要隨著設(shè)備的屏幕改變的。
如果直接在style上設(shè)置(注意,我嘗試在css上設(shè)置了,沒用),不能設(shè)置固定的數(shù)值。
所以我利用js的方法在js的開端設(shè)置了下:
let echartsW= $('.echarts-box').width(); $('.echarts-cont').css('width',echartsW);echarts-box是我存放圖標(biāo)的總的父元素,echarts-cont是我所有圖標(biāo)公用的類名。
?
然后如果在pc端做響應(yīng)式的頁面時(shí),如果遇到需要滿足當(dāng)屏幕大小被用戶扯著隨機(jī)變時(shí)圖標(biāo)也要改變的需求時(shí),可以試試下邊這個(gè):
$(window).resize(function () {let echartsW= $('.echarts-box').width();$('.echarts-cont').css('width',echartsW); });?
?(以下問題均已解決,空閑時(shí)間過來填充)
?
?2、默認(rèn)顯示的坐標(biāo)指示器重新填充樣式后,變成第一列顯示了,希望展示最后一個(gè)
長(zhǎng)啥樣呢?先來個(gè)官網(wǎng)demo圖:
圖片來自:echarts官網(wǎng)示例圖
好了,打個(gè)照面后來說需求:
?
坐標(biāo)指示器重新填充樣式:
想要上邊那樣的效果,就是一條紫線,而且線有漸變:
設(shè)置位置為:
x軸的? axisPointer??屬性:?
?找對(duì)了人就好改了:
線的樣式主要改他的? lineStyle??,
去掉底部手柄的顯示:
?不想顯示直接改成false就行了。不過如果想顯示好看點(diǎn)的,掙扎一下的話,就改label下邊這些樣式。
效果:
默認(rèn)顯示展示最后一個(gè):
?
我這里封裝成了函數(shù),然后把對(duì)象return出去,在xAxis里邊的axisPointer上調(diào)用這個(gè)函數(shù),順便傳參(參數(shù)為x軸上的數(shù)據(jù)),
設(shè)置成最后一個(gè),默認(rèn)展示的就是最后一個(gè)了!!
?
?
3、y軸左對(duì)齊+偏移的問題
y軸左邊文字要想設(shè)置左對(duì)齊,可以設(shè)置? axisLabel?? 的 align:
但是,你發(fā)現(xiàn),真實(shí)情況是設(shè)置了left之后長(zhǎng)這倒霉樣:
?
首先能看出來,是以y軸為中心點(diǎn)的。官網(wǎng)一個(gè)圖很形象:
center :?,? ? left : ,? ? ? right :?
?
看出規(guī)律了嗎?
他是以柱子為中心線進(jìn)行偏移的。
那回到最初的問題,
為什么y軸左邊文字設(shè)置left后就和y軸柱子重疊了?
這是因?yàn)檫€有一個(gè)默認(rèn)的margin值:
【見】:http://www.echartsjs.com/option.html#yAxis.axisLabel.margin
把這個(gè)margin值設(shè)為0即可。
然后就是偏移問題:
怎么偏移他的位置?
開始感覺,好像只能通過margin偏移,但是margin偏移不靠譜的地方在于,文字的寬度是不固定的,沒辦法知道偏移多少才能讓文字和y軸線不重疊。
然后看到一個(gè)offset,
y軸偏移還可以使用offset: 20,缺點(diǎn)同樣跟margin相似,不能自適應(yīng)y軸上文字的寬度。
換個(gè)思維思考,可以偏移內(nèi)容區(qū)域:
即整個(gè)圖表內(nèi)容區(qū)域離y軸左邊距遠(yuǎn)點(diǎn)。
怎么實(shí)現(xiàn)圖表內(nèi)容區(qū)域偏移?
使用boundaryGap留白策略沒用,
最終方案是:
使用了offset讓 y 軸整體左偏,
然后grid左邊距為offset偏移的值,表現(xiàn)上就是讓整個(gè)圖表區(qū)域整體右偏,這樣就是留出了y軸向左offset值那么大寬度的距離存放y軸的文案數(shù)據(jù)。
形象點(diǎn)說:
代碼:
調(diào)整內(nèi)容區(qū)域的左邊距整體向右移動(dòng)點(diǎn):
1 grid: { 2 left: '11%' 3 },?
y軸向左移,偏離內(nèi)容區(qū)域:
1 yAxis: { 2 type: 'value', 3 offset: 50, 4 //向左偏移50px 5 axisLabel: { 6 align: 'left', 7 //設(shè)置我們的目的:左對(duì)齊 8 margin: -8, 9 //看效果偏移對(duì)應(yīng)數(shù)據(jù) 10 }, 11 splitLine: { 12 show: false //把橫線隱藏掉 13 }, 14 },?
最終效果:
?
?
4、【線圖】給選中的點(diǎn)顯示特殊指定樣式 :
就是這些圓圈:
想讓其默認(rèn)不顯示,以前都是設(shè)置? ?symbolSize=0;??
但是這次的需求還需要點(diǎn)擊(移動(dòng)端)的時(shí)候展示特定的symbol樣式。
去掉symbolSize=0;轉(zhuǎn)而設(shè)置??showSymbol??為false就行了。
官網(wǎng)說如果設(shè)置 false, 則只有在 tooltip hover 的時(shí)候顯示。
?
然后在線圖的series里邊設(shè)置:
emphasis: {itemStyle: {color: 'rgba(55,167,137,1)',borderWidth: 18,borderColor: 'rgba(55,138,119,0.42)'}, },?
正好是我們要的樣式。
5、自定義樣式的tooltip氣泡
5-1、tooltip定位層級(jí)太高了,其層級(jí)是七個(gè)9。。。
這一點(diǎn)就需要我們改源碼了。去源碼里搜索z-index,不出意外就這一個(gè)z-index關(guān)鍵詞,把9999999改成你想要的第一點(diǎn)的值。
一般改成1就好了。其他想在他上邊的改成2即可。
5-2、tooltip氣泡樣式自定義:
?先來看看兩個(gè)官網(wǎng)默認(rèn)的tooltip樣式:
是不是很局限?如果ui設(shè)計(jì)了樣式后,你該怎么修改呢?分兩種情況:
一、設(shè)計(jì)的樣式是在默認(rèn)樣式基礎(chǔ)上的顏色值等的修改
二、與默認(rèn)樣式不同的結(jié)構(gòu),甚至“變態(tài)”的樣式
那么第一種,就很簡(jiǎn)單了,根據(jù)官網(wǎng)提供您的API接口就可以修改了:
上面這段樣式,就是改了背景色和文字的顏色,這么一段代碼就行了。
?
?但是第二種情況就難辦了,比如說這種:
?
以后業(yè)務(wù)中,遇到的樣式肯定千變?nèi)f化,我這里不可能一一舉例。但是下邊提供一下這種“自定義的太過分的樣式”的解決思路:
相信看過我前邊的文章,你已經(jīng)知道又一個(gè)API叫formatter了,并且也體會(huì)到了他的重要性了。tooltip也不例外,也有這個(gè)
?
?http://www.echartsjs.com/option.html#tooltip.formatter
強(qiáng)大之處在于formatter這個(gè)函數(shù)的一個(gè)參數(shù),他能給你返回任何你想要的、關(guān)于當(dāng)前鼠標(biāo)hover/click等事件觸發(fā)時(shí)圖表對(duì)應(yīng)點(diǎn)的數(shù)據(jù):
(后邊還有,具體看官網(wǎng))
在他的回調(diào)函數(shù)里邊,你甚至可以return出自己自定義的結(jié)構(gòu),進(jìn)而覆蓋掉原來的結(jié)構(gòu),并且通過行間樣式拼接到自定義結(jié)構(gòu)上,比如這樣,
1 formatter: function (params) { 2 return '<span style="padding: 6px 12px 4px 14px;border-radius: 200px;background: rgba(23,202,184,.1);color: #17cab8;font-size: 18px">' + params[0].value + '</span>'; 3 }?
你想要什么樣式就能拼成什么樣式
5-3、自定義樣式的label氣泡,給氣泡添加陰影或其他額外樣式
上邊說道,修改自定義樣式,有很多api給我們用,但是當(dāng)我想設(shè)置盒陰影這個(gè)樣式的時(shí)候,死活找不到對(duì)應(yīng)的接口。 ? 后來,在api的tooltip底部找到了這個(gè)屬性:extraCssText,用于設(shè)置接口沒有給咱們提供的額外樣式 1 extraCssText: 'box-shadow: 0 0 3px rgba(0, 0, 0, 0.3);'這樣上邊一段代碼,盒陰影就搞定了。怎么樣,度娘還是很貼心的吧!
5-4、自定義樣式的label控制顯示范圍
問題描述:我們經(jīng)過formatter返回的label標(biāo)簽層,其樣式范圍不再受echats默認(rèn)的范圍限制了,比如沒定義之前的,是會(huì)距離x軸有一定距離的,但是我們自定義之后,他就可以和x軸的文案在同一位置,這樣就會(huì)導(dǎo)致一個(gè)問題就是tooltip的label層蓋住了x軸的文案。
這種情況,我們依舊通過和formatter一樣性質(zhì)的一個(gè)position方法來設(shè)置:
tooltip: {position: function (pos, params, dom, rect, size) {let left1 = pos[0],top1 = pos[1],Tleft = size.viewSize[0] - size.contentSize[0],Ttop = size.viewSize[1] - size.contentSize[1] - 100;if (left1 > Tleft - 100) {left1 = Tleft;} else if (top1 > Ttop) {top1 = Ttop;}return {left: left1,top: top1};} },5-5、自定義樣式的label層默認(rèn)顯示
問題描述:
自定義樣式的label氣泡怎么初始化的時(shí)候就顯示在固定的點(diǎn)(默認(rèn)不顯示是因?yàn)橐婚_始就沒有被填充到結(jié)構(gòu)中,想辦法填充到結(jié)構(gòu)中,而不是點(diǎn)擊的時(shí)候填充)可以通過dispatch這個(gè)方法設(shè)置:
myEcharts.dispatchAction({type: 'showTip',seriesIndex: 0,dataIndex: 1//第一種寫法,根據(jù)x軸上的索引值指定,數(shù)字類型 }); myEcharts.dispatchAction({type: 'showTip',seriesIndex:0,name: '10.12'//第二種寫法,根據(jù)x軸上的name值執(zhí)行,字符串類型 });
6、datazoom的問題
6-1、鎖定datazoom
zoomLock: true?
這樣,圖標(biāo)區(qū)域就只能左右平移不能雙指拉伸縮放了(移動(dòng)端禁掉雙指,pc端禁掉滾輪)
?
6-2、阻止默認(rèn)的移動(dòng)事件
preventDefaultMouseMove:false這樣手勢(shì)放到圖表上邊就禁止掉了圖標(biāo)內(nèi)部的上下拖動(dòng)事件,也就能在移動(dòng)端頁面上移。(長(zhǎng)頁面需要上下移動(dòng)達(dá)到向下翻頁的情況)
?
6-3、(未解決)手勢(shì)沖突
接上一問題、圖表上還需要左右平移,當(dāng)手勢(shì)不是非常水平的話,會(huì)被識(shí)別成上移頁面,最終用戶體驗(yàn)不太好(app里邊是用原生代碼畫的圖表,心里一句大佬。)
?
?
7、ios和安卓適配問題
7-1、(未解決)rem顯示
圖表里的字體和位置設(shè)置的時(shí)候能不能改成rem格式?在安卓里,viewport解析成了1.0的,導(dǎo)致圖表特別特別大。
7-2、安卓和ios的適配問題
比如:oppo手機(jī),圖例頂部一小部分被超出隱藏:
思路:
準(zhǔn)備一個(gè)oUa變量,用于判斷是否是ios還是安卓環(huán)境,
然后設(shè)置legend的 padding: oUa.ios()?0:5,
?
8、echarts 怎么給x軸左邊加圖標(biāo)
(未解決)設(shè)計(jì)稿上的x和y軸交叉處的那個(gè)L形狀的圖標(biāo)。
?
?9、終極-監(jiān)聽click事件必須點(diǎn)到柱上,點(diǎn)擊柱子之間的空白區(qū)域沒有作用
(在我們后端研發(fā)那里學(xué)到的~)
比如,我們直接監(jiān)聽echarts的click事件:
?
myChart.on('click',(params)=>{console.log(params); })?
就會(huì)拿到當(dāng)前點(diǎn)擊柱狀圖的各種信息。這個(gè)在echarts下鉆文章里就說過了。
但是最近移動(dòng)端再使用這個(gè)工具,我們發(fā)現(xiàn)一個(gè)問題:必須點(diǎn)擊到柱子上,才能出現(xiàn)數(shù)據(jù),點(diǎn)擊柱子之間的空白區(qū)域出現(xiàn)不了。
比如下圖中畫圓圈的位置,紅色箭頭是截圖時(shí)鼠標(biāo)的位置:
?
實(shí)際上按照默認(rèn)設(shè)置,空白區(qū)域被柱子平分了,理論上來說點(diǎn)擊空白區(qū)域也應(yīng)該算是點(diǎn)到柱之上的。就像我們hover在空白區(qū)域,也能出現(xiàn)對(duì)應(yīng)tooltip的數(shù)據(jù)一樣。
?
echarts下鉆時(shí)我還真沒注意到這一點(diǎn),但這次在移動(dòng)端發(fā)現(xiàn)了。然后回過頭試了試,還真是在空白區(qū)域點(diǎn)擊沒反應(yīng)。
?
然后在網(wǎng)上搜到了解決方法:echarts監(jiān)聽點(diǎn)擊(空白處)事件,echarts監(jiān)聽滑動(dòng)事件
然后把我之前的做法替換掉試了下:
再次點(diǎn)擊空白區(qū)域,確實(shí)拿到了:
不過這次拿到的params參數(shù)是一個(gè)事件對(duì)象,。所以你能得到的也就是當(dāng)前鼠標(biāo)的坐標(biāo)點(diǎn)。
還好,echarts給了我們這樣一個(gè)方法:
判斷給定的點(diǎn)是否在指定的坐標(biāo)系或者系列上。
?
就是讓你判斷當(dāng)前點(diǎn)擊的空白區(qū)域?qū)儆谀膫€(gè)柱子/線點(diǎn)的,再返回給你對(duì)應(yīng)坐標(biāo)系或系列上的屬性值。
?
對(duì)應(yīng)的,如果條件成立,鼠標(biāo)點(diǎn)擊的位置在對(duì)應(yīng)柱上,那么使用它上邊緊接著的另一個(gè)方法:
然后利用這個(gè)方法,執(zhí)行:
myChart.convertFromPixel({ seriesIndex: 0 }, [params.offsetX, params.offsetY])[0]這樣,我們點(diǎn)擊對(duì)應(yīng)柱子的空白區(qū)域,就可以拿到一個(gè)索引值,比如我從第一個(gè)柱點(diǎn)到最后一個(gè)柱,打印出來的index值如下:
有了索引值,我們?cè)偃Data或者series的data數(shù)組里邊拿對(duì)應(yīng)數(shù)據(jù)就可以實(shí)現(xiàn)了。
?
轉(zhuǎn)載于:https://www.cnblogs.com/padding1015/p/9936533.html
總結(jié)
以上是生活随笔為你收集整理的echarts - 使用echarts过程中遇到的问题(pending...)的全部?jī)?nèi)容,希望文章能夠幫你解決所遇到的問題。
- 上一篇: RDIFramework.NET V3.
- 下一篇: Netty3之ServerBootstr