echarts - 使用echarts過程當中遇到的問題(pending...)

 1. 配合tab切換時，被display:none的元素init設置echarts失敗

2018-11-09  18:09:35

現象描述：有一個tabs選項卡，每一個切換項A、B中都有使用echarts，默認展現的A項中的ecarts初始化和繪製都沒問題。

而第二個默認隱藏項B就是一片空白。檢查B的echarts盒子還在且是css中設置的寬高大小。可是內部canvas爲空，即圖表沒有繪製。

找問題過程：

假如個人echarts圖表所在元素爲：div#echartsDiv。

並將其父元素設置 display:none

而後我console一下document.getElementById('echartsDiv');

展開拋出的對象會發現：他的clientWidth和Height都是0，甚至scroll和offset系列的寬高皆爲0（看圖別介意id名對不上）

 

對比一個父元素沒有隱藏的元素，他的寬高就很正常：

這樣咱們就明白了，echarts繪製以前是要獲取要繪製區域的寬高的，若是皆爲0那確定失敗的。

找到問題緣由，就是解決：
既然根出在初始化時的元素寬高上，那咱們開局就設置寬高便可。

我這裏的主要問題是場景用在移動端，元素寬度確定要隨着設備的屏幕改變的。

若是直接在style上設置（注意，我嘗試在css上設置了，沒用），不能設置固定的數值。

因此我利用js的方法在js的開端設置了下：

let echartsW= $('.echarts-box').width(); $('.echarts-cont').css('width',echartsW);

echarts-box是我存放圖標的總的父元素，echarts-cont是我全部圖標公用的類名。

 

而後若是在pc端作響應式的頁面時，若是遇到須要知足當屏幕大小被用戶扯着隨機變時圖標也要改變的需求時，能夠試試下邊這個：

$(window).resize(function () { let echartsW= $('.echarts-box').width(); $('.echarts-cont').css('width',echartsW); });

 

 （如下問題均已解決，空閒時間過來填充）

 

 二、默認顯示的座標指示器從新填充樣式後，變成第一列顯示了，但願展現最後一個

長啥樣呢？先來個官網demo圖：

圖片來自：echarts官網示例圖

好了，打個照面後來講需求：

 

座標指示器從新填充樣式：

想要上邊那樣的效果，就是一條紫線，並且線有漸變：

設置位置爲：

x軸的  axisPointer  屬性：

 

 找對了人就好改了：

線的樣式主要改他的  lineStyle  ，

去掉底部手柄的顯示：

 不想顯示直接改爲false就好了。不過若是想顯示好看點的，掙扎一下的話，就改label下邊這些樣式。

效果：

默認顯示展現最後一個：

 

我這裏封裝成了函數，而後把對象return出去，在xAxis裏邊的axisPointer上調用這個函數，順便傳參（參數爲x軸上的數據），

設置成最後一個，默認展現的就是最後一個了!!

 

 

三、y軸左對齊+偏移的問題

y軸左邊文字要想設置左對齊，能夠設置  axisLabel   的 align：

可是，你發現，真實狀況是設置了left以後長這倒黴樣：

 

首先能看出來，是以y軸爲中心點的。官網一個圖很形象：

center : ,    left : ,      right : 

 

看出規律了嗎？
他是以柱子爲中心線進行偏移的。

那回到最初的問題，

爲何y軸左邊文字設置left後就和y軸柱子重疊了？

這是由於還有一個默認的margin值：

【見】：http://www.echartsjs.com/option.html#yAxis.axisLabel.margin

把這個margin值設爲0便可。

而後就是偏移問題：

怎麼偏移他的位置？

開始感受，好像只能經過margin偏移，可是margin偏移不靠譜的地方在於，文字的寬度是不固定的，沒辦法知道偏移多少才能讓文字和y軸線不重疊。

而後看到一個offset，

y軸偏移還可使用offset: 20,缺點一樣跟margin類似，不能自適應y軸上文字的寬度。

換個思惟思考，能夠偏移內容區域：
即整個圖表內容區域離y軸左邊距遠點。

怎麼實現圖表內容區域偏移？

使用boundaryGap留白策略沒用，

最終方案是：

使用了offset讓 y 軸總體左偏，

而後grid左邊距爲offset偏移的值，表現上就是讓整個圖表區域總體右偏，這樣就是留出了y軸向左offset值那麼大寬度的距離存放y軸的文案數據。

形象點說：

代碼：

調整內容區域的左邊距總體向右移動點：

1 grid: { 2    left: '11%'
3 },

 

y軸向左移，偏離內容區域：

 1 yAxis: {  2     type: 'value',  3     offset: 50,  4     //向左偏移50px
 5  axisLabel: {  6         align: 'left',  7         //設置咱們的目的：左對齊
 8         margin: -8,  9         //看效果偏移對應數據
10  }, 11  splitLine: { 12         show: false //把橫線隱藏掉
13  }, 14 },

 

最終效果：

 

 

四、【線圖】給選中的點顯示特殊指定樣式 :

就是這些圓圈：

想讓其默認不顯示，之前都是設置   symbolSize=0;  

可是此次的需求還須要點擊（移動端）的時候展現特定的symbol樣式。

去掉symbolSize=0；轉而設置  showSymbol  爲false就好了。

官網說若是設置 false， 則只有在 tooltip hover 的時候顯示。

 

而後在線圖的series裏邊設置：

emphasis: { itemStyle: { color: 'rgba(55,167,137,1)', borderWidth: 18, borderColor: 'rgba(55,138,119,0.42)' }, }, 

 

正好是咱們要的樣式。

五、自定義樣式的tooltip氣泡

5-一、tooltip定位層級過高了，其層級是七個9。。。

這一點就須要咱們改源碼了。去源碼裏搜索z-index，不出意外就這一個z-index關鍵詞，把9999999改爲你想要的第一點的值。

通常改爲1就行了。其餘想在他上邊的改爲2便可。

5-二、tooltip氣泡樣式自定義：

 先來看看兩個官網默認的tooltip樣式：

是否是很侷限？若是ui設計了樣式後，你該怎麼修改呢？分兩種狀況：

1、設計的樣式是在默認樣式基礎上的顏色值等的修改

2、與默認樣式不一樣的結構，甚至「變態」的樣式

那麼第一種，就很簡單了，根據官網提供您的API接口就能夠修改了：

上面這段樣式，就是改了背景色和文字的顏色，這麼一段代碼就好了。

 

 可是第二種狀況就難辦了，好比說這種：

 

之後業務中，遇到的樣式確定變幻無窮，我這裏不可能一一舉例。可是下邊提供一下這種「自定義的太過度的樣式」的解決思路：

相信看過我前邊的文章，你已經知道又一個API叫formatter了，而且也體會到了他的重要性了。tooltip也不例外，也有這個

 

 http://www.echartsjs.com/option.html#tooltip.formatter

強大之處在於formatter這個函數的一個參數，他能給你返回任何你想要的、關於當前鼠標hover/click等事件觸發時圖表對應點的數據：

（後邊還有，具體看官網）

在他的回調函數裏邊，你甚至能夠return出本身自定義的結構，進而覆蓋掉原來的結構，而且經過行間樣式拼接到自定義結構上，好比這樣，

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-三、自定義樣式的label氣泡，給氣泡添加陰影或其餘額外樣式

上邊說道，修改自定義樣式，有不少api給咱們用，可是當我想設置盒陰影這個樣式的時候，死活找不到對應的接口。

 

後來，在api的tooltip底部找到了這個屬性：extraCssText，用於設置接口沒有給我們提供的額外樣式

1 extraCssText: 'box-shadow: 0 0 3px rgba(0, 0, 0, 0.3);'

這樣上邊一段代碼，盒陰影就搞定了。怎麼樣，度娘仍是很貼心的吧！

5-四、自定義樣式的label控制顯示範圍

問題描述：咱們通過formatter返回的label標籤層，其樣式範圍再也不受echats默認的範圍限制了，好比沒定義以前的，是會距離x軸有必定距離的，可是咱們自定義以後，他就能夠和x軸的文案在同一位置，這樣就會致使一個問題就是tooltip的label層蓋住了x軸的文案。

這種狀況，咱們依舊經過和formatter同樣性質的一個position方法來設置：

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-五、自定義樣式的label層默認顯示

問題描述：

自定義樣式的label氣泡怎麼初始化的時候就顯示在固定的點（默認不顯示是由於一開始就沒有被填充到結構中，想辦法填充到結構中，而不是點擊的時候填充）

能夠經過dispatch這個方法設置：

myEcharts.dispatchAction({
    type: 'showTip',
    seriesIndex: 0,
    dataIndex: 1//第一種寫法，根據x軸上的索引值指定，數字類型
});
myEcharts.dispatchAction({
    type: 'showTip',
    seriesIndex:0,
    name: '10.12'//第二種寫法，根據x軸上的name值執行，字符串類型
});

　　

六、datazoom的問題

6-一、鎖定datazoom

zoomLock: true

 

這樣，圖標區域就只能左右平移不能雙指拉伸縮放了（移動端禁掉雙指，pc端禁掉滾輪）

 

6-二、阻止默認的移動事件

preventDefaultMouseMove：false

這樣手勢放到圖表上邊就禁止掉了圖標內部的上下拖動事件，也就能在移動端頁面上移。（長頁面須要上下移動達到向下翻頁的狀況）

 

6-三、（未解決）手勢衝突

接上一問題、圖表上還須要左右平移，當手勢不是很是水平的話，會被識別成上移頁面，最終用戶體驗不太好(app裏邊是用原生代碼畫的圖表，內心一句大佬。)

 

 

七、ios和安卓適配問題

7-一、（未解決）rem顯示

圖表裏的字體和位置設置的時候能不能改爲rem格式？在安卓裏，viewport解析成了1.0的，致使圖表特別特別大。

7-二、安卓和ios的適配問題

好比：oppo手機，圖例頂部一小部分被超出隱藏：

思路：

準備一個oUa變量，用於判斷是不是ios仍是安卓環境，

而後設置legend的 padding: oUa.ios()?0:5,

 

八、echarts 怎麼給x軸左邊加圖標

（未解決）設計稿上的x和y軸交叉處的那個L形狀的圖標。

 

 九、終極-監聽click事件必須點到柱上，點擊柱子之間的空白區域沒有做用

（在咱們後端研發那裏學到的~）

好比，咱們直接監聽echarts的click事件：

 

myChart.on('click',(params)=>{
   console.log(params);
})

 

　　

就會拿到當前點擊柱狀圖的各類信息。這個在echarts下鑽文章裏就說過了。

可是最近移動端再使用這個工具，咱們發現一個問題：必須點擊到柱子上，才能出現數據，點擊柱子之間的空白區域出現不了。

好比下圖中畫圓圈的位置，紅色箭頭是截圖時鼠標的位置：

 

實際上按照默認設置，空白區域被柱子平分了，理論上來講點擊空白區域也應該算是點到柱之上的。就像咱們hover在空白區域，也能出現對應tooltip的數據同樣。

 

echarts下鑽時我還真沒注意到這一點，但此次在移動端發現了。而後回過頭試了試，還真是在空白區域點擊沒反應。

 

而後在網上搜到了解決方法：echarts監聽點擊（空白處）事件，echarts監聽滑動事件

而後把我以前的作法替換掉試了下：

再次點擊空白區域，確實拿到了：

不過此次拿到的params參數是一個事件對象，。因此你能獲得的也就是當前鼠標的座標點。

還好，echarts給了咱們這樣一個方法：

判斷給定的點是否在指定的座標系或者系列上。

 

就是讓你判斷當前點擊的空白區域屬於哪一個柱子/線點的，再返回給你對應座標系或系列上的屬性值。

 

對應的，若是條件成立，鼠標點擊的位置在對應柱上，那麼使用它上邊緊接着的另外一個方法：

而後利用這個方法，執行：

myChart.convertFromPixel({ seriesIndex: 0 }, [params.offsetX, params.offsetY])[0]

這樣，咱們點擊對應柱子的空白區域，就能夠拿到一個索引值，好比我從第一個柱點到最後一個柱，打印出來的index值以下：

有了索引值，咱們再取xData或者series的data數組裏邊拿對應數據就能夠實現了。