腳本之家服務(wù)器常用軟件

快捷導(dǎo)航

Python中Django與Echarts的結(jié)合用法圖文詳解

更新時(shí)間：2022年10月26日 10:27:26 作者：Amoor123

ECharts是一個(gè)第三方控件,下面這篇文章主要給大家介紹了關(guān)于Python中Django與Echarts的結(jié)合用法,文中通過(guò)圖文介紹的非常詳細(xì),需要的朋友可以參考下

前言

今天為大家分享Echarts在Python 的Django框架中的使用

項(xiàng)目倉(cāng)庫(kù)為https://gitcode.net/sabian2/myechartdemo.git

公開倉(cāng)庫(kù)，大家可以通過(guò)如下命令獲取項(xiàng)目文件

git clone https://gitcode.net/sabian2/myechartdemo.git

什么是Echarts

Echarts是一款基于JavaScript的數(shù)據(jù)可視化圖表庫(kù)，提供直觀，生動(dòng)，可交互，可個(gè)性化定制的數(shù)據(jù)可視化圖表。官網(wǎng)地址為https://echarts.apache.org/zh/index.html。在官網(wǎng)的示例欄目可以找到很多有用的示例，總有一款適合你。今天的分享也主要以示例為主。

選一個(gè)示例-簡(jiǎn)單的餅圖

這里選擇一個(gè)簡(jiǎn)單餅圖作為我們此次分享的第一個(gè)簡(jiǎn)單示例

https://echarts.apache.org/examples/zh/editor.html?c=pie-simple

圖形分析

圖形是一個(gè)餅圖，左側(cè)有圖例，上方有圖表標(biāo)題和副標(biāo)題，鼠標(biāo)挪動(dòng)到圖表上還會(huì)顯示當(dāng)前項(xiàng)目的數(shù)據(jù)

前端核心代碼分析

這個(gè)echarts主要的部分就是寫option，這是圖形的配置參數(shù)。

其中title配置標(biāo)題部分，tooltip配置鼠標(biāo)移上去的操作，legend配置圖例，series配置數(shù)據(jù)

作為初學(xué)者，主要是仿照各種示例，將數(shù)據(jù)構(gòu)造出來(lái)。

圖形的生成基本步驟

將示例文件下載后在pycharm或者其他工具中打開源代碼

上半部分向我們展示了文件的結(jié)構(gòu)，我們的圖形主要是依托于一個(gè)id為container的div進(jìn)行的。后續(xù)就全是腳本，先是導(dǎo)入cdn上的echarts.min.js.

后面就是核心配置的js代碼，先取得容器元素，再初始化，填寫配置，最后是加載配置

使用myChart.setOption(option)加載配置。

綜合下來(lái)最主要的就是做option的配置，即便是加上函數(shù)用ajax定時(shí)刷新數(shù)據(jù)，也是在不斷修改option的值，并執(zhí)行setOption函數(shù)，以刷新頁(yè)面的數(shù)據(jù)。

那么在django中，我的思路就是只需要構(gòu)造series或者構(gòu)造series中的data，這樣在后臺(tái)直接渲染給頁(yè)面即可。

django的操作

數(shù)據(jù)構(gòu)造

這個(gè)餅圖的數(shù)據(jù)較為簡(jiǎn)單，我直接在django的視圖函數(shù)中按照示例的格式構(gòu)造數(shù)據(jù)

渲染關(guān)鍵點(diǎn)

此時(shí)渲染到模板中的data是需要加safe修飾的，不然會(huì)解析成如下的網(wǎng)頁(yè)格式，導(dǎo)致渲染圖表失敗。

最終效果

給頁(yè)面加好路由后訪問(wèn)

稍復(fù)雜示例-河流圖

河流圖示例地址為
https://echarts.apache.org/examples/zh/editor.html?c=themeRiver-basic

圖形分析

每一類數(shù)據(jù)就是一條河流，寬度代表了那個(gè)時(shí)刻的流量

前端核心代碼分析

前端主要是配置數(shù)據(jù)，對(duì)于仿照者而言，我們主要是修改legend和series中的data部分?jǐn)?shù)據(jù)，對(duì)照同樣的格式來(lái)傳數(shù)據(jù)。

django操作

數(shù)據(jù)構(gòu)造

原有數(shù)據(jù)很清晰，只需要在視圖函數(shù)中構(gòu)造一樣格式的數(shù)據(jù)即可，然后在legend和series的兩個(gè)data出分別傳入names和data。

最終效果

添加示例沒(méi)有的標(biāo)題

從上一個(gè)示例中把title復(fù)制過(guò)來(lái)，調(diào)整下left的位置，避免和圖例沖突

即可取得標(biāo)題

添加時(shí)間軸的縮放

這個(gè)在另外一個(gè)示例中遇到的，感覺(jué)很好用，可以修改后放到這里

參考示例地址：https://echarts.apache.org/examples/zh/editor.html?c=custom-profile給河流圖的配置加上這樣的參數(shù)，就可以縮放了

縮放欄的位置由dataZoom中的位置參數(shù)調(diào)整，可以根據(jù)實(shí)際擺放。鼠標(biāo)中軸也可以控制放大和縮小。

操控示例-獲得沒(méi)有示例的堆疊柱狀圖

官方示例有堆疊條形圖，但是沒(méi)有堆疊柱狀圖，這里教大家怎么調(diào)整

其實(shí)非常簡(jiǎn)單，只需要把兩個(gè)坐標(biāo)軸名稱互換，xAxis和yAxis換個(gè)位置，馬上就倒過(guò)來(lái)了！

其他

配色調(diào)整

根據(jù)官方文檔，顏色調(diào)整可以用調(diào)色盤，預(yù)先給定一系列顏色，讓系統(tǒng)選用，系統(tǒng)會(huì)按照顏色出現(xiàn)的順序選用。

還有就是直接在數(shù)據(jù)中擬合顏色參數(shù)

比如在單個(gè)柱子顏色的示例中

https://echarts.apache.org/examples/zh/editor.html?c=bar-data-color

單個(gè)柱子的顏色直接在data數(shù)據(jù)里用itemStyle調(diào)整，我們可以在django后臺(tái)預(yù)先定義一組顏色，然后用random.choice 函數(shù)隨機(jī)選擇一個(gè)。

數(shù)據(jù)擬合注意點(diǎn)

在擬合數(shù)據(jù)時(shí)，js的字典對(duì)象名稱是不帶引號(hào)的，在我們后端傳入數(shù)據(jù)時(shí)，Python字典鍵是可以帶引號(hào)的，這個(gè)并不會(huì)影響解析。比如第一個(gè)示例中餅圖和他的數(shù)據(jù)。

更多的圖形大家就參照著示例擬合數(shù)據(jù)，傳給前端就可以了！

總結(jié)

到此這篇關(guān)于Python中Django與Echarts結(jié)合用法的文章就介紹到這了,更多相關(guān)Python中Django與Echarts結(jié)合用法內(nèi)容請(qǐng)搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！