正如標題所說，這是Echarts的一遍填坑，如果你是一些echart的配置的話可以閱讀
http://echarts.baidu.com/opti...的官網配置信息。今天我想給大家分享的是一些我前段時間從highchart改echart的時候所遇到的一些問題。希望能對大家有用。

1、echart 在使用的時候標簽必須明確的定義其高度，不能讓其自適應，否則會出現顯示不出來的情況！

<div id="echart" style="width:100%;height:300px;"></div>

2、關于echart中Y坐標不完全等比例顯示問題

當你遇到Y軸不是等分顯示的時候，這時候你就應該看看你Y坐標配置中是否配置了max這個選項，當配置max這一項的時候，Y坐標的最大顯示數會以你配置的最大值作為結束，也就可能出現Y坐標不能完全等分顯示的情況

yAxis :{type: 'value',axisLine: {show: false},axisTick: {show: false,},scale: true,splitLine:{ show:true,},splitNumber: 3,position:'left',//max:_self.value,axisLabel: {inside: false,interval: 0,formatter: function(value, index) {return value;}} }

3、關于X軸type類型為time時如何自定義時間軸
有時候在項目中我們可能為遇到將X軸設置為時間軸的時候，但是又想自定義一定的規則來達到想要的效果。那么怎么辦。我想echart官網中關于time的動態數據案例說的也夠詳細（http://echarts.baidu.com/demo...），但是它們的并不是我想要的格式，這時候怎么辦，我們可以通過max和min和達到設置X坐標的效果，通過interval來設置間距。

xAxis :{type:'time',axisTick: { //坐標軸刻度相關設置alignWithLabel: true,lineStyle: {color: '#ccc'}},axisLine: { //坐標軸軸線相關設置lineStyle: {color: '#ccc'}},axisLabel: { //坐標軸刻度標簽的相關設置textStyle: {color: "#666"}},splitLine: {show: false},minInterval: 24 * 3600 * 1000,interval: 24 * 3600 * 1000 * tickInterval,min:_self.order_chart_data.order_chart_xAxis[0],max:_self.order_chart_data.order_chart_xAxis[_self.order_chart_data.order_chart_xAxis.length-1] },效果：

時間選擇為1天時，圖表并以小時為單位更新數據：

時間選擇為大于1天時，圖表并以天為單位更新數據：

當設置X軸type類型為time的時候還有幾點要注意的時：

(1)、x軸配置中不用配置data屬性 (2)、series中的數據類型data屬性要嚴格按照下面這種格式書寫數據格式（否則數據會加載不出來）series : {name: 'echarts',yAxisIndex: 0,type:'line',data : {name:_self.order_chart_data.order_chart_xAxis[i],value: [_self.order_chart_data.order_chart_xAxis[i],yAxis_one[i]]},showSymbol: false,itemStyle: {normal: {color: '#5AAAEA',lineStyle: {color: '#5AAAEA'}}}}

要說的就這么多，總的來說echart相對來說還是比較簡單的，官網的案例基本可以滿足全部需要。希望以上問題對大家能有幫助！！！

總結

以上是生活随笔為你收集整理的关于Echarts的填坑之旅的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。