每到用echarts這門技術去畫圖的時候,我們大多人都是直接從echarts的官網的案例找相應的案例直接把代碼復制到開發軟件上基本隨便一改就能使用,但是這種情況基本都是在練習的時候和項目開發沒有必須要求的才能這樣使用,但是在那種要求比較嚴格的項目開發,需要做echats圖而且必須和UI設計圖的顏色,字體大小等等一些樣式必須一樣,那種情況下基本官網上的案例基本上已經不能滿足你了,這個時候如果是個對echarts這個插件特別熟悉的用的比較多,那么一些樣式和一些屬性肯定很熟悉了,根本不需要在echarts在線文檔在找相應的屬性在去設置,但是也有一種人存在就是比如我這樣的,因為用echarts這插件用的時間不是很長,用的不是很熟練,但是在項目開發中要求比較嚴格,好多從官網上拿的案例跟UI設置圖有不小的差距,而且不是很美觀,這時候我就需要在echarts在線文檔找屬性,在網上搜,但是在個過程中大多人都是比較痛苦的因為你不知道具體是什么屬性,而且對echarts這插件還處在比較懵懂的階段搜關鍵詞都不知道具體怎么去搜,或者知道怎么去搜,但是搜到后會出現好多不同網頁,而那些網頁內容有不少是不一樣,里面有好多不同的屬性,而那些屬性你根本不知道那些是想要的,你就會一個一個拿去試,但是這個時候又會出現一個問題,有些屬性給你了但是你不會用啊,不知道怎么去設置才能給你寫代碼兼容,導致就算找的想要的屬性也不會用,而我當初就是一個用echarts比較小白的新人,所以為了避免以后再用echarts畫圖的時候找不到想要屬性和設置方法我就把我做項目的時候一些echarts圖的設置寫了下來,如果對你有幫助,我深感榮幸,如果沒有幫助,那么打擾了出門左拐。
xAxis屬性代表echarts圖表的x軸設置代碼如下
xAxis : [ { type : 'category', // type:坐標軸類型。 // [ default: 'category' ] /*可選:
1.'value' 數值軸,適用於連續數據;
2.'category' 類目軸,適用於離散的類目數據,為該類型時必須通過 data 設置類目數據;
3.'time' 時間軸,適用於連續的時序數據,與數值軸相比時間軸帶有時間的格式化,在刻度計算上也有所不同,例如會根據跨度的范圍來決定使用月,星期,日還是小時范圍的刻度;
4.'log' 對數軸。適用於對數數據。*/ data : ['上海','北京'], //x軸下面的數據 axisTick: { show: false, //是否顯示網狀線 默認為true alignWithLabel: true }, //用於設置x下面的字體 axisLabel:{ show:true, //這里的show用於設置是否顯示x軸下的字體 默認為true
interval:0, //可以設置成 0 強制顯示所有標簽。如果設置為1
,表示『隔一個標簽顯示一個標簽』,如果值為2
,表示隔兩個標簽顯示一個標簽,以此類推。
textStyle:{ //textStyle里面寫x軸下的字體的樣式
color:'#333', fontSize:13 } }, axisLine:{ show:true, //這里的show用於設置是否顯示x軸那一條線 默認為true lineStyle:{ //lineStyle里面寫x軸那一條線的樣式 color:'#6FC6F3', width:2, //軸線的粗細 我寫的是2 最小為0,值為0的時候線隱藏 } } }, ]
yAxis屬性代表echarts圖表的y軸,樣式設置方式與x軸的方式是一樣,就是設置的屬性會有所差異
1 yAxis:[{ 2 min:0, //y軸的最小值 3 max:100, //y軸最大值 4 interval:20, //值之間的間隔 5 //上面的三個值可以根據自己需求隨意設置 不設置時會根據圖中的值自動生成相應的值 6 7 type:'value', 8 /* type坐標軸類型:[ default: 'value' ]
可選:1.'value' 數值軸,適用於連續數據。
2.'category' 類目軸,適用於離散的類目數據,為該類型時必須通過 data 設置類目數據。
3.'time' 時間軸,適用於連續的時序數據,與數值軸相比時間軸帶有時間的格式化,在刻度計算上也有所不同,例如會根據跨度的范圍來決定使用月,星期,日還是小時范圍的刻度。
4.'log' 對數軸。適用於對數數據。*/ 9 splitLine:{show:false}, //去除網狀線 默認為true 10 //用於設置y軸的字體 11 axisLabel:{ 12 show:true, //這里的show用於設置是否顯示y軸下的字體 默認為true 13 textStyle:{ //textStyle里面寫y軸下的字體的樣式 14 color:'#333', 15 fontSize:13 16 } 17 }, 18 //用於設置y軸的那一條線 19 axisLine:{ 20 show:true, //這里的show用於設置是否顯示y軸那一條線 默認為true 21 lineStyle:{ //lineStyle里面寫y軸那一條線的樣式 22 color:'#6FC6F3', 23 width:2, //軸線的粗細 我寫的是2 最小為0,值為0的時候線隱藏 24 } 25 } 26 }]