?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)容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯(cuò)，歡迎將生活随笔推薦給好友。