echarts圖表基礎配置

01:標題配置=>title

1.標題是否顯示

2.標題的位置

3.標題的文本樣式

02:提示信息配置=>tooltip

? ? ? ? 1.提示信息分為兩種,一種自定義的,一種根據(jù)數(shù)據(jù)提供的

????????2.提示信息觸發(fā)類型,triger:'axis'軸觸發(fā),鼠標懸浮一條軸上時,顯示相應數(shù)據(jù),'item'折現(xiàn)點觸發(fā),鼠標懸浮折現(xiàn)點上時顯示相應數(shù)據(jù)

? ? ? ? 3.formatter函數(shù)可以自定義提示的內(nèi)容,有個params參數(shù),參數(shù)里面有三個常用的值,seriesName是series的name值,name是x軸的值,value是y軸的值

? ? ? ? 4.axisPointer坐標軸指示器配置項:type:'line', line線型,cross十字準星,shadow陰影,然后線條的樣式可以在label:{}中修改


03:圖例的顏色配置

? ? ? ? 1.和lenged,title,series,xAxis,yAxis同級,用于設置圖例的顏色,需要多少個顏色就可以設置多少個,color:[ ]是一個數(shù)組


04:legend 圖例設置

????????1.圖例的位置

????????2.圖例的類型:rect矩形,circle圓形,roundRect圓角矩形,triangle三角形,diamond菱形,arrow箭頭,pin類似坐標點,none沒有,以及自定義圖標

? ? ? ? 3.圖例容器的設置:容器背景顏色,容器邊框顏色,邊框粗細,邊框圓角,容器投影顏色,投影模糊大小,水平垂直偏移量,容器寬高,容器內(nèi)邊距

? ? ? ? 4.圖例公共的文本樣式


05:xAxis X軸設置

##借鑒自? http://www.lxweimin.com/p/b649e8cbf2cd? ? ? https://www.cnblogs.com/zqq-blog/p/10636102.html

????????1.x軸的顯示位置,boundaryGap:true,默認為true在兩個刻線之間顯示,false在刻線上顯示

????????2.坐標軸文字和刻度的配置項axisLabel:{x軸文本的顯示隱藏,x軸數(shù)據(jù)間隔,x軸文本傾斜,可用于x軸坐標文字顯示不全,刻度線的朝向,文本與軸線之間的距離,文字字體的風格、粗細,水平垂直對齊方式,行高,文字快背景色,文字顏色,大小}

????????3.軸線的設置axisLine:{軸線兩端的箭頭,線體lineStyle:{線的類型,顏色,粗細}}

????????4.軸線你刻度的設置AxisTick:{顯示隱藏,刻線的長度、朝向,刻線的樣式lineStyle:{顏色,寬度,類型(實線,虛線等)}}

06:yAxis Y軸設置

????????1.y值type:'value'

????????2.其他大部分同xAxis

07:圖表網(wǎng)格區(qū)域grid

????????1.網(wǎng)格區(qū)域的位置

08:主體series配置

????????1.series是一個數(shù)組,里面是一個一個的對象,可以有很多組數(shù)據(jù)

????????2.圖表的類型(線型,柱形,餅型等)

????????3.當為line(線)型時,可以設置平滑的曲線,折現(xiàn)點的類型,大小,旋轉(zhuǎn)角度,相對于原位置的便宜,是否顯示

????????4.可選擇是否開啟在拐點標志的動畫效果,圖例懸停的聯(lián)動高亮,以及懸停在圖形元素上時鼠標的樣式

????????5.是否連接空數(shù)據(jù)

????????6.折現(xiàn)點以及線條的設置

? ? ? ? 7.折線圖面積填充的漸變色設置

? ? ? ? 8.提示線(警戒線的配置)

09:圖表跟著窗口放大縮小

10:附贈一位大哥寫的更詳細的??

????????https://www.cnblogs.com/consider/p/11730923.html

最后編輯于
?著作權歸作者所有,轉(zhuǎn)載或內(nèi)容合作請聯(lián)系作者
平臺聲明:文章內(nèi)容(如有圖片或視頻亦包括在內(nèi))由作者上傳并發(fā)布,文章內(nèi)容僅代表作者本人觀點,簡書系信息發(fā)布平臺,僅提供信息存儲服務。
  • 序言:七十年代末,一起剝皮案震驚了整個濱河市,隨后出現(xiàn)的幾起案子,更是在濱河造成了極大的恐慌,老刑警劉巖,帶你破解...
    沈念sama閱讀 228,739評論 6 534
  • 序言:濱河連續(xù)發(fā)生了三起死亡事件,死亡現(xiàn)場離奇詭異,居然都是意外死亡,警方通過查閱死者的電腦和手機,發(fā)現(xiàn)死者居然都...
    沈念sama閱讀 98,634評論 3 419
  • 文/潘曉璐 我一進店門,熙熙樓的掌柜王于貴愁眉苦臉地迎上來,“玉大人,你說我怎么就攤上這事。” “怎么了?”我有些...
    開封第一講書人閱讀 176,653評論 0 377
  • 文/不壞的土叔 我叫張陵,是天一觀的道長。 經(jīng)常有香客問我,道長,這世上最難降的妖魔是什么? 我笑而不...
    開封第一講書人閱讀 63,063評論 1 314
  • 正文 為了忘掉前任,我火速辦了婚禮,結果婚禮上,老公的妹妹穿的比我還像新娘。我一直安慰自己,他們只是感情好,可當我...
    茶點故事閱讀 71,835評論 6 410
  • 文/花漫 我一把揭開白布。 她就那樣靜靜地躺著,像睡著了一般。 火紅的嫁衣襯著肌膚如雪。 梳的紋絲不亂的頭發(fā)上,一...
    開封第一講書人閱讀 55,235評論 1 324
  • 那天,我揣著相機與錄音,去河邊找鬼。 笑死,一個胖子當著我的面吹牛,可吹牛的內(nèi)容都是我干的。 我是一名探鬼主播,決...
    沈念sama閱讀 43,315評論 3 442
  • 文/蒼蘭香墨 我猛地睜開眼,長吁一口氣:“原來是場噩夢啊……” “哼!你這毒婦竟也來了?” 一聲冷哼從身側響起,我...
    開封第一講書人閱讀 42,459評論 0 289
  • 序言:老撾萬榮一對情侶失蹤,失蹤者是張志新(化名)和其女友劉穎,沒想到半個月后,有當?shù)厝嗽跇淞掷锇l(fā)現(xiàn)了一具尸體,經(jīng)...
    沈念sama閱讀 49,000評論 1 335
  • 正文 獨居荒郊野嶺守林人離奇死亡,尸身上長有42處帶血的膿包…… 初始之章·張勛 以下內(nèi)容為張勛視角 年9月15日...
    茶點故事閱讀 40,819評論 3 355
  • 正文 我和宋清朗相戀三年,在試婚紗的時候發(fā)現(xiàn)自己被綠了。 大學時的朋友給我發(fā)了我未婚夫和他白月光在一起吃飯的照片。...
    茶點故事閱讀 43,004評論 1 370
  • 序言:一個原本活蹦亂跳的男人離奇死亡,死狀恐怖,靈堂內(nèi)的尸體忽然破棺而出,到底是詐尸還是另有隱情,我是刑警寧澤,帶...
    沈念sama閱讀 38,560評論 5 362
  • 正文 年R本政府宣布,位于F島的核電站,受9級特大地震影響,放射性物質(zhì)發(fā)生泄漏。R本人自食惡果不足惜,卻給世界環(huán)境...
    茶點故事閱讀 44,257評論 3 347
  • 文/蒙蒙 一、第九天 我趴在偏房一處隱蔽的房頂上張望。 院中可真熱鬧,春花似錦、人聲如沸。這莊子的主人今日做“春日...
    開封第一講書人閱讀 34,676評論 0 26
  • 文/蒼蘭香墨 我抬頭看了看天上的太陽。三九已至,卻和暖如春,著一層夾襖步出監(jiān)牢的瞬間,已是汗流浹背。 一陣腳步聲響...
    開封第一講書人閱讀 35,937評論 1 288
  • 我被黑心中介騙來泰國打工, 沒想到剛下飛機就差點兒被人妖公主榨干…… 1. 我叫王不留,地道東北人。 一個月前我還...
    沈念sama閱讀 51,717評論 3 393
  • 正文 我出身青樓,卻偏偏與公主長得像,于是被迫代替她去往敵國和親。 傳聞我的和親對象是個殘疾皇子,可洞房花燭夜當晚...
    茶點故事閱讀 48,003評論 2 374

推薦閱讀更多精彩內(nèi)容

  • Echarts「折線圖」基礎配置 一、使用步驟 1.引入 echarts (1)在script引入 (2)命令引入...
    回到唐朝做IT閱讀 5,133評論 0 2
  • Echarts「柱狀圖」基礎配置 一、使用步驟 1.引入 echarts (1)在script引入 (2)命令引入...
    回到唐朝做IT閱讀 4,247評論 0 3
  • 首先附上v-chart官網(wǎng)地址:https://v-charts.js.org/#/[https://v-char...
    小小魚yyds閱讀 10,302評論 0 2
  • 我是黑夜里大雨紛飛的人啊 1 “又到一年六月,有人笑有人哭,有人歡樂有人憂愁,有人驚喜有人失落,有的覺得收獲滿滿有...
    陌忘宇閱讀 8,578評論 28 53
  • 信任包括信任自己和信任他人 很多時候,很多事情,失敗、遺憾、錯過,源于不自信,不信任他人 覺得自己做不成,別人做不...
    吳氵晃閱讀 6,208評論 4 8