echarts和v-chart使用心得

echarts的響應式

每次窗口大小改變的時候都會觸發onresize事件，這個時候咱們將echarts對象的尺寸賦值給窗口的大小這個屬性，從而實現圖表對象與窗口對象的尺寸一致的狀況
window.onresize = echart.resize;
echart.setOption(option);

echarts異步請求

使用ajax獲取數據的時候，能夠先設置完其餘樣式，顯示一個空直角座標。而後用ajax獲取數據請求。

x軸數據顯示不全，被截取的操做

當X軸上面要渲染的數據太多的時候就會出現只渲染出來一部分，可是圖表中的數據顯示(好比說柱狀圖中的每一個柱子)又會自動的進行寬度的縮放，因此會致使X軸與圖中的信息不相匹配的問題，解決的方法是在X軸設置axisLabel :{ interval:0 }這個屬性問題就能夠解決了，Y軸的使用方法相同

當碰到有tab切換時，再顯示圖表出現的問題
最近在使用echart時，出現了一個問題就是：手機上使用echarts，頁面中有tab切換圖表。除了第一個能夠正常顯示外，其餘的圖表的寬度必須設置成很大。好比說第一個tab的圖表的寬度我設置爲100%，第二個tab圖表的寬我必須設置成300%才行。並且使用grid還不行。在手機端須要作適配，因此設置具體的寬度並很差，設置成百分比會出現問題。

解決：

緣由：緣由多是在進行tab切換時，其寬度並無加載出來。此時，咱們須要將寬度從新加載一遍。

document.getElementById('box').style.width = window.innerWidth+'px';
獲取屏幕寬度，echarts的寬度和屏幕的寬度一致

let box= echarts.init(document.getElementById('box'));
再進行初始化，這個時候設置寬度爲百分之100就能夠了。不用擔憂適配問題

v-charts用法小結
v-charts是基於echarts的二次封裝，使用起來異常方便，地址：https://v-charts.js.org/#/。

功能沒有echarts那麼豐富，但通常狀況下是夠用了。在這裏不講怎麼引入，使用，直接看官方的api便可。因爲其API寫的比較簡單。所以在使用過程當中踩過很多的坑，現作一個小結，方便後來人。

1.在v-charts中使用xAxis

在v-charts中使用xAxis時，須要執行3步。第一個步驟是在html中使用:xAxis=「xAxis」；第二步是在data裏面定義xAxis，聲明爲一個空對象；第三步也就是很是重要的一步就是在methods中，使用

this.xAxis={}

可是在這一步，咱們至關因而用xAxis將原有的覆蓋了，因此咱們要在this.xAxis中從新定義橫座標data，不然圖表會變形。只要從新定義了data，以後咱們就可使用xAxis的其餘任何屬性了。

二、橫座標被截取

橫座標太多不能顯示徹底，經常使用的解決辦法有兩種：

一種是橫座標傾斜，一種就是自定義橫座標間距。

this.xAxis = {
type:'category',
data:rows1,
boundaryGap:true,
axisLabel:{
rotate:30,
interval:0
}
};
用法和echarts相似，interval表示間距，爲0表示橫座標數據所有展現，rotate表示傾斜角度。

若是不想使用傾斜，那就自定義間隔，設置interval的數值便可。

可是我在實際工做中，還碰到一個問題就是：一樣的代碼，一樣的瀏覽器，一樣的電腦配置，當橫座標是日期時，橫座標最右邊的數值被截取了。這讓我非常無語。找了不少緣由，最後解決的辦法是加上：grid=grid，而後給grid設置right值才解決的。

三、圖表不出現或只出現一部分

最近的一個項目中，使用v-chart在本地顯示正常，但項目上線後顯示不正常，只顯示出一部分。其中緣由我也不是很明白。最後只是將圖表的寬度由原來的100%改成具體的px，這才顯示徹底。可能數據在傳輸的時候有網絡問題，致使百分數不能解析吧。

 

原文連接：https://blog.csdn.net/weixin_38384967/article/details/87692513