Python中Django與Echarts的結合用法圖文詳解
前言
今天為大家分享Echarts在Python 的Django框架中的使用
項目倉庫為https://gitcode.net/sabian2/myechartdemo.git
公開倉庫，大家可以通過如下命令獲取項目文件
git clone https://gitcode.net/sabian2/myechartdemo.git
什么是Echarts
Echarts是一款基于JavaScript的數(shù)據(jù)可視化圖表庫，提供直觀，生動，可交互，可個性化定制的數(shù)據(jù)可視化圖表。官網(wǎng)地址為https://echarts.apache.org/zh/index.html。在官網(wǎng)的示例欄目可以找到很多有用的示例，總有一款適合你。今天的分享也主要以示例為主。
選一個示例-簡單的餅圖
這里選擇一個簡單餅圖作為我們此次分享的第一個簡單示例
https://echarts.apache.org/examples/zh/editor.html?c=pie-simple
圖形分析
圖形是一個餅圖，左側有圖例，上方有圖表標題和副標題，鼠標挪動到圖表上還會顯示當前項目的數(shù)據(jù)
前端核心代碼分析
這個echarts主要的部分就是寫option，這是圖形的配置參數(shù)。
其中title配置標題部分，tooltip配置鼠標移上去的操作，legend配置圖例，series配置數(shù)據(jù)
作為初學者，主要是仿照各種示例，將數(shù)據(jù)構造出來。
圖形的生成基本步驟
將示例文件下載后在pycharm或者其他工具中打開源代碼
上半部分向我們展示了文件的結構，我們的圖形主要是依托于一個id為container的div進行的。后續(xù)就全是腳本，先是導入cdn上的echarts.min.js.
后面就是核心配置的js代碼，先取得容器元素，再初始化，填寫配置，最后是加載配置
使用myChart.setOption(option)加載配置。
綜合下來最主要的就是做option的配置，即便是加上函數(shù)用ajax定時刷新數(shù)據(jù)，也是在不斷修改option的值，并執(zhí)行setOption函數(shù)，以刷新頁面的數(shù)據(jù)。
那么在django中，我的思路就是只需要構造series或者構造series中的data，這樣在后臺直接渲染給頁面即可。
django的操作
數(shù)據(jù)構造
這個餅圖的數(shù)據(jù)較為簡單，我直接在django的視圖函數(shù)中按照示例的格式構造數(shù)據(jù)
渲染關鍵點
此時渲染到模板中的data是需要加safe修飾的，不然會解析成如下的網(wǎng)頁格式，導致渲染圖表失敗。
最終效果
給頁面加好路由后訪問
稍復雜示例-河流圖
河流圖示例地址為
https://echarts.apache.org/examples/zh/editor.html?c=themeRiver-basic
圖形分析
每一類數(shù)據(jù)就是一條河流，寬度代表了那個時刻的流量
前端核心代碼分析
前端主要是配置數(shù)據(jù)，對于仿照者而言，我們主要是修改legend和series中的data部分數(shù)據(jù)，對照同樣的格式來傳數(shù)據(jù)。
django操作
數(shù)據(jù)構造
原有數(shù)據(jù)很清晰，只需要在視圖函數(shù)中構造一樣格式的數(shù)據(jù)即可，然后在legend和series的兩個data出分別傳入names和data。
最終效果
添加示例沒有的標題
從上一個示例中把title復制過來，調整下left的位置，避免和圖例沖突
即可取得標題
添加時間軸的縮放
這個在另外一個示例中遇到的，感覺很好用，可以修改后放到這里
參考示例地址：https://echarts.apache.org/examples/zh/editor.html?c=custom-profile給河流圖的配置加上這樣的參數(shù)，就可以縮放了
縮放欄的位置由dataZoom中的位置參數(shù)調整，可以根據(jù)實際擺放。鼠標中軸也可以控制放大和縮小。
操控示例-獲得沒有示例的堆疊柱狀圖
官方示例有堆疊條形圖，但是沒有堆疊柱狀圖，這里教大家怎么調整
其實非常簡單，只需要把兩個坐標軸名稱互換，xAxis和yAxis換個位置，馬上就倒過來了！
其他
配色調整
根據(jù)官方文檔，顏色調整可以用調色盤，預先給定一系列顏色，讓系統(tǒng)選用，系統(tǒng)會按照顏色出現(xiàn)的順序選用。
還有就是直接在數(shù)據(jù)中擬合顏色參數(shù)
比如在單個柱子顏色的示例中
https://echarts.apache.org/examples/zh/editor.html?c=bar-data-color
單個柱子的顏色直接在data數(shù)據(jù)里用itemStyle調整，我們可以在django后臺預先定義一組顏色，然后用random.choice 函數(shù)隨機選擇一個。
數(shù)據(jù)擬合注意點
在擬合數(shù)據(jù)時，js的字典對象名稱是不帶引號的，在我們后端傳入數(shù)據(jù)時，Python字典鍵是可以帶引號的，這個并不會影響解析。比如第一個示例中餅圖和他的數(shù)據(jù)。
更多的圖形大家就參照著示例擬合數(shù)據(jù)，傳給前端就可以了！
總結
到此這篇關于Python中Django與Echarts結合用法的文章就介紹到這了,更多相關Python中Django與Echarts結合用法內容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關文章希望大家以后多多支持腳本之家！
相關文章
這篇文章主要介紹了Python爬蟲實現(xiàn)搭建代理ip池，文章圍繞主題展開詳細的內容介紹，具有一定的參考價值，需要的小伙伴可以參考一下，希望對你的工作有所幫助2022-06-06
這篇文章主要介紹了使用python獲取豆瓣電影簡介的方法，大家參考使用吧2014-01-01
本篇文章給大家分享了用python腳本寫出作為Windows服務啟動功能，對此有需求的朋友跟著小編一起學習下。2018-02-02
這篇文章主要介紹了淺談Python的正則表達式,正則表達式本身是獨立于編程語言的知識，但是它又依附于編程語言,需要的朋友可以參考下2023-04-04
這篇文章主要介紹了Python中的Matplotlib模塊入門教程,本文來自于IBM官方網(wǎng)站技術文檔,需要的朋友可以參考下2015-04-04
這篇文章主要介紹了Python rindex()方法案例詳解,本篇文章通過簡要的案例,講解了該項技術的了解與使用,以下就是詳細內容,需要的朋友可以參考下2021-09-09
python使用梯度下降和牛頓法尋找Rosenbrock函數(shù)最小值實例
這篇文章主要介紹了python使用梯度下降和牛頓法尋找Rosenbrock函數(shù)最小值實例，具有很好的參考價值，希望對大家有所幫助。一起跟隨小編過來看看吧2020-04-04
這篇文章主要介紹了pandas?如何將字符串映射為數(shù)字，具有很好的參考價值，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教2022-07-07
這篇文章主要介紹了Python itertools模塊詳解,本文基本是基于文檔的翻譯和補充,相當于翻譯了,需要的朋友可以參考下2015-05-05
下面小編就為大家分享一篇Python中多個數(shù)組行合并及列合并的方法總結，具有很好的參考價值，希望對大家有所幫助。一起跟隨小編過來看看吧2018-04-04