echarts 雷达图_如何把Echarts用成在线数据可视化工具
今天虎哥給大家介紹個新工具,用于數據可視化,它是一個開源的插件,由JavaScript編寫并實現的。可以流暢的運行在PC端和移動端,兼容絕大部分瀏覽器。Echarts具有強大的交互性,官網:
https://www.echartsjs.com/index.html
Echarts的優勢在于他是中國人開發的,所以有完善的中文文檔,非常方便閱讀和使用。
這個是Echarts的首頁,他的官方文檔非常的多而且詳細。
Echarts可以繪制的圖有37種,每一種里還有不同的風格,基本上你能想到的數據可視化方式都可以通過Echarts實現。下面給出一些官方的案例:
官方文檔的配置項中把所有的可調節參數都列了出來,以及這些參數如何進行調節都寫得非常清楚,也放了示例代碼。所以這些都沒必要去學習并記住。只需要把它當成一個字典,當你想要調節圖中的什么參數時再去其中搜索就行,非常強大且方便。
簡單介紹完Echarts接下來我們說說今天的重點,怎么能在這個網頁上實現在線制圖吶~
第一步當然是先思考你想繪制的是哪種類型的圖,在官方實例中找到相似的例子點進去,就會有例子完整代碼,比如以雷達圖為例,點進去后是這樣的:
完整的代碼都在左側,并且是可以修改的,所以我們要做的就是在線修改,首先讀懂它的例子,在讀懂后基本就可以確定我們要求改的參數有哪些,將我們的數據填進去,按我們的需求修改一下就好啦~給大家放個源代碼和修改后代那的對比,紅色箭頭指的地方是我們需要修改的地方:
一共就7處需要修改,填上我們的數據就可以啦~最后出來的圖是這樣的:
這個屬于修改比較小的部分,但其實可以修改調整的參數非常多,給大家放一個我之前通過這種方式將官網的氣泡圖經過非常大的調整后繪制出的另一種風格的氣泡圖。
官網的案例這這樣的:
我修改后的氣泡圖:
只要善于使用配置項文件,想要修改出什么樣的圖都不成問題~
最后要說的一點是,畫完圖怎么保存到本地,就在下圖右下角紅色箭頭指著的地方就有個Download。到此在線制圖的步驟就徹底結束了。
最后虎哥想說最重要的一點!
網頁不保存,記得備份代碼,不小心刷新了的話就全都沒有了!!!別功虧一簣!!隨時備份一下代碼!!!
總結
以上是生活随笔為你收集整理的echarts 雷达图_如何把Echarts用成在线数据可视化工具的全部內容,希望文章能夠幫你解決所遇到的問題。
- 上一篇: esp8266接收到的数据如何存放到数组
- 下一篇: 未找到要求的 from 关键字_性能优化