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); });?
?（以下問題均已解決，空閑時間過來填充）
?
?2、默認顯示的坐標指示器重新填充樣式后，變成第一列顯示了，希望展示最后一個
長啥樣呢？先來個官網demo圖：
圖片來自：echarts官網示例圖
好了，打個照面后來說需求：
?
坐標指示器重新填充樣式：
想要上邊那樣的效果，就是一條紫線，而且線有漸變：
設置位置為：
x軸的? axisPointer??屬性：?
?找對了人就好改了：
線的樣式主要改他的? lineStyle??，
去掉底部手柄的顯示：
?不想顯示直接改成false就行了。不過如果想顯示好看點的，掙扎一下的話，就改label下邊這些樣式。
效果：
默認顯示展示最后一個：
?
我這里封裝成了函數，然后把對象return出去，在xAxis里邊的axisPointer上調用這個函數，順便傳參（參數為x軸上的數據），
設置成最后一個，默認展示的就是最后一個了!!
?
?
3、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 },?
最終效果：
?
?
4、【線圖】給選中的點顯示特殊指定樣式 :
就是這些圓圈：
想讓其默認不顯示，以前都是設置? ?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)'}, },?
正好是我們要的樣式。
5、自定義樣式的tooltip氣泡
5-1、tooltip定位層級太高了，其層級是七個9。。。
這一點就需要我們改源碼了。去源碼里搜索z-index，不出意外就這一個z-index關鍵詞，把9999999改成你想要的第一點的值。
一般改成1就好了。其他想在他上邊的改成2即可。
5-2、tooltip氣泡樣式自定義：
?先來看看兩個官網默認的tooltip樣式：
是不是很局限？如果ui設計了樣式后，你該怎么修改呢？分兩種情況：
一、設計的樣式是在默認樣式基礎上的顏色值等的修改
二、與默認樣式不同的結構，甚至“變態”的樣式
那么第一種，就很簡單了，根據官網提供您的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-3、自定義樣式的label氣泡，給氣泡添加陰影或其他額外樣式
上邊說道，修改自定義樣式，有很多api給我們用，但是當我想設置盒陰影這個樣式的時候，死活找不到對應的接口。 ? 后來，在api的tooltip底部找到了這個屬性：extraCssText，用于設置接口沒有給咱們提供的額外樣式 1 extraCssText: 'box-shadow: 0 0 3px rgba(0, 0, 0, 0.3);'這樣上邊一段代碼，盒陰影就搞定了。怎么樣，度娘還是很貼心的吧！
5-4、自定義樣式的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-5、自定義樣式的label層默認顯示
問題描述：
自定義樣式的label氣泡怎么初始化的時候就顯示在固定的點（默認不顯示是因為一開始就沒有被填充到結構中，想辦法填充到結構中，而不是點擊的時候填充）可以通過dispatch這個方法設置：
myEcharts.dispatchAction({type: 'showTip',seriesIndex: 0,dataIndex: 1//第一種寫法，根據x軸上的索引值指定，數字類型 }); myEcharts.dispatchAction({type: 'showTip',seriesIndex:0,name: '10.12'//第二種寫法，根據x軸上的name值執行，字符串類型 });
6、datazoom的問題
6-1、鎖定datazoom
zoomLock: true?
這樣，圖標區域就只能左右平移不能雙指拉伸縮放了（移動端禁掉雙指，pc端禁掉滾輪）
?
6-2、阻止默認的移動事件
preventDefaultMouseMove：false這樣手勢放到圖表上邊就禁止掉了圖標內部的上下拖動事件，也就能在移動端頁面上移。（長頁面需要上下移動達到向下翻頁的情況）
?
6-3、（未解決）手勢沖突
接上一問題、圖表上還需要左右平移，當手勢不是非常水平的話，會被識別成上移頁面，最終用戶體驗不太好(app里邊是用原生代碼畫的圖表，心里一句大佬。)
?
?
7、ios和安卓適配問題
7-1、（未解決）rem顯示
圖表里的字體和位置設置的時候能不能改成rem格式？在安卓里，viewport解析成了1.0的，導致圖表特別特別大。
7-2、安卓和ios的適配問題
比如：oppo手機，圖例頂部一小部分被超出隱藏：
思路：
準備一個oUa變量，用于判斷是否是ios還是安卓環境，
然后設置legend的 padding: oUa.ios()?0:5,
?
8、echarts 怎么給x軸左邊加圖標
（未解決）設計稿上的x和y軸交叉處的那個L形狀的圖標。
?
?9、終極-監聽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數組里邊拿對應數據就可以實現了。
?
轉載于:https://www.cnblogs.com/padding1015/p/9936533.html
總結
以上是生活随笔為你收集整理的echarts - 使用echarts过程中遇到的问题(pending...)的全部內容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： RDIFramework.NET V3.
- 下一篇： Netty3之ServerBootstr