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)類型切換，數(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è)值,類似進(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
下面腳本之家編輯就將一些css的格式化與壓縮技巧簡(jiǎn)單的介紹下，一把情況需要盡量的縮寫(xiě)樣式，減少體積，然后用工具進(jìn)行壓縮，然后再測(cè)試網(wǎng)頁(yè)。2007-06-06
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