Echarts基本入門之柱狀圖、折線圖通用配置
1echarts的基本步驟
四步
1 找dom容器
2 初始化Init
3 配置options
4 setOptions
幾乎124的步驟是一樣的，options是配置項，想呈現什么圖標就配什么。
最基本的帶最大值最小值的柱狀圖
2 平均值 markLine屬性
3 數值顯示 柱寬度， 橫向柱狀圖
數值顯示 label屬性
柱寬度 barWidth
橫向的話只需要注意兩個軸的轉變就行
通用配置 即餅圖散點圖通用的配置
title 標題
tooltip: 提示
toolbox 工具按鈕
legend 圖例
tooltip 提示框組件， 鼠標滑過圖表的時候提示
formatter也可以設置函數
toolbox
可以導出圖片，數據視圖， 動態(tài)類型切換，數據區(qū)域縮放， 重置等五個工具等功能
legend 圖例，用于篩選系列 需要與series配合使用
四個通用配置基本使用就是這樣
title 標題 tooltip提示框 工具按鈕toolbox 圖例:legend
折線圖
基本繪制
大小值平均值， 標注區(qū)間
大小值平均值跟柱狀圖一摸一樣
標注區(qū)間 markArea
線條控制 平滑 smooth
填充風格
緊挨邊緣
y軸范圍
scale
堆疊圖 serise每個設置stack: ‘all'
正常
會重疊，可以設置
每個series都加
就會變成這樣，不會重疊但是要注意y軸的變化，上面那條線起點是1000，他只是往上添加了1000。
再加上areaStyle
堆疊的效果就更加明顯。
總結
到此這篇關于Echarts基本入門之柱狀圖、折線圖通用配置的文章就介紹到這了,更多相關Echarts柱狀圖折線圖通用配置內容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關文章希望大家以后多多支持腳本之家！
相關文章
這篇文章主要介紹了微信小程序圖表插件(wx-charts)實例代碼，具有一定的參考價值，感興趣的小伙伴們可以參考一下。2017-01-01
本文主要介紹了JavaScript 計算誤差的解決，文中通過示例代碼介紹的非常詳細，對大家的學習或者工作具有一定的參考學習價值，需要的朋友們下面隨著小編來一起學習學習吧2023-02-02
這篇文章主要介紹了es6 filter() 數組過濾方法總結，文中通過示例代碼介紹的非常詳細，對大家的學習或者工作具有一定的參考學習價值，需要的朋友們下面隨著小編來一起學習學習吧2019-04-04
JS常見疑難點分析之match，charAt，charCodeAt，map，search用法分析
這篇文章主要介紹了JS常見疑難點分析之match，charAt，charCodeAt，map，search用法,結合實例形式較為詳細的分析了match，charAt，charCodeAt，map，search的功能,使用方法與相關注意事項,需要的朋友可以參考下2016-12-12
這篇文章主要介紹了JS模仿騰訊圖片站的圖片翻頁按鈕效果,涉及javascript動態(tài)操作頁面元素屬性的相關技巧,具有一定參考借鑒價值,需要的朋友可以參考下2016-06-06
這篇文章主要介紹了Javascript 數組去重的方法（四種）詳解及實例代碼的相關資料,這里對四種去重方法進行了詳細介紹，并附代碼實例，需要的朋友可以參考下2016-11-11
這篇文章主要為大家詳細介紹了微信小程序實現車牌鍵盤，文中示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下2022-07-07
本文主要分享了canvas實現鐘表效果的示例代碼。具有很好的參考價值，下面跟著小編一起來看下吧2017-02-02
深入了解JavaScript中l(wèi)et/var/function的變量提升
這篇文章主要介紹了深入了解JavaScript中l(wèi)et/var/function的變量提升，文章圍繞主題展開詳細的內容介紹，具有一定的參考價值，需要的朋友可以參考一下2022-07-07
眾所周知，JavaScript沒有塊級作用域，只有函數作用域。那就意味著定義在函數中的參數和變量在函數外部是不可見的，而在一個函數內部任何位置定義的變量，在該函數內部任何地方都可見2014-04-04