帶你ECharts入個門
首先匯入相應的 js :
echarts.min.js
china.js(需要顯示中國地圖才匯入這個)
相關js下載(上傳百度雲太麻煩,沒積分的小夥伴可以聯絡我私發 ^-^)
完成一個簡單的ECharts報表,簡單總結就這幾步:
1、在需要顯示圖表的地方定義好 div 並給定寬高,注意在初始化之前一定要給定寬高,否則即使程式碼正確最後也不會顯示。
2、初始化 div 容器:var mycharts = echarts.init(document.getElementById(“xxx”));
3、定義樣式(折線圖、柱狀圖、餅圖、散點圖等),自己不會寫程式碼可以直接去官網找,官網也提供線上編輯的功能,可以除錯後直接複製到程式碼中。根據官網上的例子只要正確獲取後臺的資料保證格式正確填入相應的位置即可。
4、將容器與樣式結合:mychart.setOption(option);
ps:括號裡的 option 就是步驟三中定義樣式的變數名。
例:
<script>
var mycharts = echarts.init(document.getElementById("xxx"));
var option = {
//...
};
mycharts.setOption(option);
</script>
相關文章
- 12個例子帶你入門Electron
- 帶你高效入門 FlutterFlutter
- 2 個案例帶你迅速入門 Python Flask 框架PythonFlask框架
- 九個問題帶你-從入門到熟悉 HTTPSHTTP
- Cris 帶你快速入門 Flink
- 一文帶你入門TransformerORM
- 一文帶你入門LinuxLinux
- 帶你入門RPC之反向代理RPC
- 一文帶你入門 GolangGolang
- 手把手帶你入門 Spring Security!Spring
- 如果讓你帶一個什麼都不懂的人入門學前端,你應該怎麼帶他?前端
- 一個有趣的小例子,帶你入門協程模組-asyncio
- 帶你入門Python爬蟲,8個常用爬蟲技巧盤點Python爬蟲
- Android跨平臺入門:手把手帶你快速入門Flutter!AndroidFlutter
- 一篇文章帶你入門Zookeeper
- 零基礎入門│帶你理解Kubernetes
- 前端圖表外掛ECharts入門教程前端Echarts
- 十五張圖帶你快速入門 shardingsphere-proxy
- 手摸手帶你 Docker 從入門到實踐Docker
- 一篇帶你快速入門ansible和使用
- 23張圖,帶你入門推薦系統
- 4步帶你從Web前端小白到入門!Web前端
- 一文帶你入門動態規劃動態規劃
- 18張圖帶你入門最新版JumpServerServer
- 三篇文章帶你快速入門Kotlin(上)Kotlin
- 一篇文章帶你快速入門createjsJS
- 5分鐘帶你入門apicloud,開發appAPICloudAPP
- 程式設計師筆記|3個問題帶你入門資料建模程式設計師筆記
- Python廖雪峰13個案例講解分析帶你全面入門人工智慧Python人工智慧
- 5步帶你入門GaussDB(DWS)的GDS匯入匯出
- echarts入門(通過axios請求資料)EchartsiOS
- 一文帶你入門圖機器學習機器學習
- 跟我學Python影像處理丨帶你入門OpenGLPython
- 5分鐘帶你快速入門和了解 OAM Kubernetes
- Android 3分鐘帶你入門開發測試Android
- 你想要了解GO語言嗎?帶你入門!Go
- 一篇帶你入門面向介面程式設計程式設計
- 【TS 演化史 -- 破曉】一步一個腳印帶你入門 TS