echart使用總結

2022-07-20 19:57:11 字數 1533 閱讀 3754

以下引數都是寫在option配置物件內,沒有提及的配置引數歡迎查閱讀echart參考手冊。

一、修改主標題和副標題

title :

y:'top',//控制標題垂直方向的位置'top' | 'bottom' | 'center' | 

textstyle:,//標題字型樣式

subtextstyle,//副標題字型樣式

二、修改統計圖的寬和高,以及位置和最外面的邊框

grid:

},axisline:

axistick:

axislabel: ,//控制x軸字型樣式

formatter: ' °c',//軸上的資料帶單位} }

],四、

滑鼠移動到資料上出現線條的樣式控制

tooltip : }},

滑鼠移動到資料上不出現線條出現陰影

tooltip:

}

},五、

增加兩條y軸,並且指定哪個個資料使用哪個y軸

yaxis : [

},axisline:,

axislabel: ,formatter: ' ' } },,

splitline:},

axislabel: ,formatter: ' '},

show:'true',

position: 'right',//控制新y軸的位置}],

series : [,]

六、折線圖上顯示最大值最小值

series: [}},

markpoint : ,]}

}]七、圖例的樣式控制

legend:

},八、

軸上的資料太長,換行顯示

xaxis: [ // 直角座標系中橫軸陣列

,//x軸

splitline:},//網格顏色

axislabel: ,

interval : 0,

formatter : function(params) else

newparamsname += tempstr;

}} else

return newparamsname

}}, //軸上字型顏色

axistick:,}]

九、easyui裡面的tab使用統計圖,統計圖寬度無法自適應:

//解決tab裡面統計圖不按照div的百分百的寬度顯示,overdetailflowpack無法自適應的div的id

$("#overdetailflowpack").css( 'width', $("#overdetailflowpack").width() );

十、問題:echart中統計圖表被壓縮不能正常地自適應。

(1)x軸資料為陣列['array1'],如果賦值為字串'array1',就會出現統計圖不能正常展開的情況。

(2)使用jqueryeasyui,tab切換顯示不同的統計圖,也會出現統計圖被擠壓變形的情況,解決方法是用js獲取容器的寬度賦值給容器。

十一、統計圖上每個點都顯示對應的資料

series : [

echart高階使用 Echart使用總結

水監測圖表.gif 1 專案中用到的一些屬性 const options yaxis else,折線點設定為實心點 symbolsize 12,折線點的大小 showbackground true,backgroundstyle itemstyle opacity 1 2 echart初始化的時候獲...

echart高階使用 EChart使用簡單介紹

1 title 寫標題,屬性如下 show false true 標題是否顯示 text 標題內容 textstyle修飾標題樣式 subtext 副標題,也可以算是內容 subtextstyle修飾副標題樣式 2 legentd 圖例元件展現了不同系列的標記 symbol 顏色和名字 show f...

echart使用小結

寫在前面。定義的接收圖表 的容器哦必須設定寬高。不然可能找不到就報錯 cannot read property getattribute of null 如果在vue專案裡面,寫了寬高還報這個錯就可能是頁面的容器還沒有載入完,他還沒有找到。動態新增資料 引入echart import echarts...