Echarts基本入門之柱狀圖、折線圖通用配置
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)滑過圖表的時(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基本入門之柱狀圖、折線圖通用配置的文章就介紹到這了,更多相關(guān)Echarts柱狀圖折線圖通用配置內(nèi)容請(qǐng)搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！
- 解決echarts 一條柱狀圖顯示兩個(gè)值,類似進(jì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)文章
這篇文章主要介紹了微信小程序圖表插件(wx-charts)實(shí)例代碼，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下。2017-01-01
本文主要介紹了JavaScript 計(jì)算誤差的解決，文中通過示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2023-02-02
es6 filter() 數(shù)組過濾方法總結(jié)
這篇文章主要介紹了es6 filter() 數(shù)組過濾方法總結(jié)，文中通過示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2019-04-04
JS常見疑難點(diǎn)分析之match，charAt，charCodeAt，map，search用法分析
這篇文章主要介紹了JS常見疑難點(diǎn)分析之match，charAt，charCodeAt，map，search用法,結(jié)合實(shí)例形式較為詳細(xì)的分析了match，charAt，charCodeAt，map，search的功能,使用方法與相關(guān)注意事項(xiàng),需要的朋友可以參考下2016-12-12
這篇文章主要介紹了JS模仿騰訊圖片站的圖片翻頁按鈕效果,涉及javascript動(dòng)態(tài)操作頁面元素屬性的相關(guān)技巧,具有一定參考借鑒價(jià)值,需要的朋友可以參考下2016-06-06
Javascript 數(shù)組去重的方法（四種）詳解及實(shí)例代碼
這篇文章主要介紹了Javascript 數(shù)組去重的方法（四種）詳解及實(shí)例代碼的相關(guān)資料,這里對(duì)四種去重方法進(jìn)行了詳細(xì)介紹，并附代碼實(shí)例，需要的朋友可以參考下2016-11-11
這篇文章主要為大家詳細(xì)介紹了微信小程序?qū)崿F(xiàn)車牌鍵盤，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2022-07-07
本文主要分享了canvas實(shí)現(xiàn)鐘表效果的示例代碼。具有很好的參考價(jià)值，下面跟著小編一起來看下吧2017-02-02
深入了解JavaScript中l(wèi)et/var/function的變量提升
這篇文章主要介紹了深入了解JavaScript中l(wèi)et/var/function的變量提升，文章圍繞主題展開詳細(xì)的內(nèi)容介紹，具有一定的參考價(jià)值，需要的朋友可以參考一下2022-07-07
眾所周知，JavaScript沒有塊級(jí)作用域，只有函數(shù)作用域。那就意味著定義在函數(shù)中的參數(shù)和變量在函數(shù)外部是不可見的，而在一個(gè)函數(shù)內(nèi)部任何位置定義的變量，在該函數(shù)內(nèi)部任何地方都可見2014-04-04