echarts作為圖表使用的越來越廣泛。其API也是非常詳細，官方例項也是非常詳細。這裡主要總結一下echarts中常用的幾個小點以及基於echarts封裝的適用於vue的圖表v-charts，實現更加簡單。

echarts的使用

1、引入 2、準備一個寬高的dom 3、初始化echarts例項 var myChart = echarts.init(document.getElementById(‘main’));

4、指定圖表的配置項和資料 var option = {}

5、使用剛指定的配置項和資料顯示圖表 myChart.setOption(option);

echarts配置項

配置項中比較重要的 有這幾項： title——標題 legend——圖示 grid——佈局 xAxis——x軸 yAxis——y軸 tooltip——滑鼠懸停的提示內容 series——echarts必不可少的部分使用者指定圖示的型別（type）以及對應的data資料，

itemStyle:設定通用樣式，比如陰影，透明，顏色，邊框顏色，寬度等。

echarts.js一定要配置xAxis,yAxis，series這三個引數，如果不想配置的話也要初始化可以將其設定為空JSON。同時要保證在echarts.init之前的物件是有寬高的。

但是在設定餅圖的時候，是不需要xAxis，yAxis的，因為沒有xy軸

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的其他任何屬性了。

2、橫座標被擷取

橫座標太多不能顯示完全，常用的解決辦法有兩種：

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

 this.xAxis = {
        type:'category',
        data:rows1,
        boundaryGap:true,
        axisLabel:{
            rotate:30,
            interval:0
        }
      };

用法和echarts類似，interval表示間距，為0表示橫座標資料全部展示，rotate表示傾斜角度。

如果不想使用傾斜，那就自定義間隔，設定interval的數值即可。

但是我在實際工作中，還碰到一個問題就是：同樣的程式碼，同樣的瀏覽器，同樣的電腦配置，當橫座標是日期時，橫座標最右邊的數值被截取了。這讓我很是無語。找了很多原因，最後解決的辦法是加上：grid=grid，然後給grid設定right值才解決的。

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

最近的一個專案中，使用v-chart在本地顯示正常，但專案上線後顯示不正常，只顯示出一部分。其中原因我也不是很明白。最後只是將圖表的寬度由原來的100%改為具體的px，這才顯示完全。可能資料在傳輸的時候有網路問題，導致百分數不能解析吧。