Echarts基本入門(mén)之柱狀圖、折線圖通用配置
1echarts的基本步驟
四步
1 找dom容器
2 初始化Init
3 配置options
4 setOptions

幾乎124的步驟是一樣的,options是配置項(xiàng),想呈現(xiàn)什么圖標(biāo)就配什么。

最基本的帶最大值最小值的柱狀圖

2 平均值 markLine屬性


3 數(shù)值顯示 柱寬度, 橫向柱狀圖
數(shù)值顯示 label屬性


柱寬度 barWidth


橫向的話只需要注意兩個(gè)軸的轉(zhuǎn)變就行


通用配置 即餅圖散點(diǎn)圖通用的配置
title 標(biāo)題
tooltip: 提示
toolbox 工具按鈕
legend 圖例


tooltip 提示框組件, 鼠標(biāo)滑過(guò)圖表的時(shí)候提示


formatter也可以設(shè)置函數(shù)


toolbox
可以導(dǎo)出圖片,數(shù)據(jù)視圖, 動(dòng)態(tài)類(lèi)型切換,數(shù)據(jù)區(qū)域縮放, 重置等五個(gè)工具等功能


legend 圖例,用于篩選系列 需要與series配合使用




四個(gè)通用配置基本使用就是這樣
title 標(biāo)題 tooltip提示框 工具按鈕toolbox 圖例:legend
折線圖


基本繪制
大小值平均值, 標(biāo)注區(qū)間
大小值平均值跟柱狀圖一摸一樣


標(biāo)注區(qū)間 markArea


線條控制 平滑 smooth


填充風(fēng)格


緊挨邊緣



y軸范圍
scale


堆疊圖 serise每個(gè)設(shè)置stack: ‘a(chǎn)ll'
正常

會(huì)重疊,可以設(shè)置

每個(gè)series都加

就會(huì)變成這樣,不會(huì)重疊但是要注意y軸的變化,上面那條線起點(diǎn)是1000,他只是往上添加了1000。

再加上areaStyle

堆疊的效果就更加明顯。
總結(jié)
到此這篇關(guān)于Echarts基本入門(mén)之柱狀圖、折線圖通用配置的文章就介紹到這了,更多相關(guān)Echarts柱狀圖折線圖通用配置內(nèi)容請(qǐng)搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家!
- 解決echarts 一條柱狀圖顯示兩個(gè)值,類(lèi)似進(jìn)度條的問(wèn)題
- Echarts Bar橫向柱狀圖實(shí)例代碼
- Vue使用Echarts實(shí)現(xiàn)立體柱狀圖
- vue echarts實(shí)現(xiàn)柱狀圖動(dòng)態(tài)展示
- vue echarts實(shí)現(xiàn)橫向柱狀圖
- uniapp引用echarts的詳細(xì)步驟(附柱狀圖實(shí)例)
- echarts動(dòng)態(tài)渲染柱狀圖背景顏色及頂部數(shù)值方法詳解
- 基于vue+echarts實(shí)現(xiàn)柱狀圖漸變色效果(每個(gè)柱子顏色不同)
- Echarts柱狀圖修改柱子顏色漸變及柱子圓角效果實(shí)例
相關(guān)文章
原生JS實(shí)現(xiàn)ajax與ajax的跨域請(qǐng)求實(shí)例
下面小編就為大家分享一篇原生JS實(shí)現(xiàn)ajax與ajax的跨域請(qǐng)求實(shí)例,具有很好的參考價(jià)值,希望對(duì)大家有所幫助。一起跟隨小編過(guò)來(lái)看看吧2017-12-12
微信小程序?qū)崿F(xiàn)的繪制table表格功能示例
這篇文章主要介紹了微信小程序?qū)崿F(xiàn)的繪制table表格功能,涉及微信小程序數(shù)據(jù)讀取及界面布局相關(guān)操作技巧,需要的朋友可以參考下2019-04-04
es6數(shù)組之?dāng)U展運(yùn)算符操作實(shí)例分析
這篇文章主要介紹了es6數(shù)組之?dāng)U展運(yùn)算符操作,結(jié)合實(shí)例形式總結(jié)分析es6數(shù)組擴(kuò)展運(yùn)算符具體原理、實(shí)現(xiàn)方法及操作注意事項(xiàng),需要的朋友可以參考下2020-04-04
js+cavans實(shí)現(xiàn)圖片滑塊驗(yàn)證
這篇文章主要為大家詳細(xì)介紹了js+cavans實(shí)現(xiàn)圖片滑塊驗(yàn)證,文中示例代碼介紹的非常詳細(xì),具有一定的參考價(jià)值,感興趣的小伙伴們可以參考一下2020-09-09
js正則格式化日期時(shí)間自動(dòng)補(bǔ)0的兩種解法
在javascript開(kāi)發(fā)中,我們會(huì)遇到日期時(shí)間格式化的問(wèn)題,下面這篇文章主要給大家介紹了關(guān)于js正則格式化日期時(shí)間自動(dòng)補(bǔ)0的相關(guān)資料,文中通過(guò)示例代碼介紹的非常詳細(xì),需要的朋友可以參考下2021-10-10
基于JavaScript實(shí)現(xiàn)的快速排序算法分析
這篇文章主要介紹了基于JavaScript實(shí)現(xiàn)的快速排序算法,分析了快速排序的原理并結(jié)合實(shí)例形式給出了javascript快速排序的操作步驟與相關(guān)實(shí)現(xiàn)技巧,需要的朋友可以參考下2017-04-04
JSP中使用JavaScript動(dòng)態(tài)插入刪除輸入框?qū)崿F(xiàn)代碼
這篇文章主要介紹了JSP中如何使用JavaScript動(dòng)態(tài)插入刪除輸入框,需要的朋友可以參考下2014-06-06
原生JS實(shí)現(xiàn)左右箭頭選擇日期實(shí)例代碼
原生JS 左右箭頭選擇日期,就是用左右尖括號(hào)可改變中間日期的值,代碼簡(jiǎn)單易懂,非常不錯(cuò),具有參考借鑒價(jià)值,需要的朋友參考下2017-03-03
原生js的數(shù)組除重復(fù)簡(jiǎn)單實(shí)例
下面小編就為大家?guī)?lái)一篇原生js的數(shù)組除重復(fù)簡(jiǎn)單實(shí)例。小編覺(jué)得挺不錯(cuò)的,現(xiàn)在分享給大家,也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧2016-05-05

