django中怎么動(dòng)態(tài)加載echarts餅圖數(shù)據(jù)

發(fā)布時(shí)間：2021-07-20 16:13:25 來源：億速云閱讀：383 作者：Leah 欄目：開發(fā)技術(shù)

本篇文章為大家展示了django中怎么動(dòng)態(tài)加載echarts餅圖數(shù)據(jù)，內(nèi)容簡(jiǎn)明扼要并且容易理解，絕對(duì)能使你眼前一亮，通過這篇文章的詳細(xì)介紹希望你能有所收獲。

如下所示：

后臺(tái)關(guān)鍵代碼：

data = {}
#keys與values分別為該數(shù)據(jù)的鍵數(shù)組，值的數(shù)組。這里循環(huán)為字典添加對(duì)應(yīng)鍵值
for k, v in zip(keys, values):
  data.update({k: v, },)
#最后將數(shù)據(jù)打包成json格式以字典的方式傳送到前端
return render(request, 'index.html', {'data': json.dumps(data)})

網(wǎng)頁(yè)（js中）取值關(guān)鍵代碼：

1.取值：

var kv = new Array();//聲明一個(gè)新的字典
kv = {{ data|safe }};//取出后臺(tái)傳遞的數(shù)據(jù)，此處添加safe過濾避免警告
var test = new Array();//聲明一個(gè)新的字典用于存放數(shù)據(jù)
for (var logKey in kv) {
//將對(duì)應(yīng)鍵值對(duì)取出存入test，logKey 為該字典的鍵
  test.push({value: kv[logKey], name: logKey});
}

2.餅圖賦值：

var option = {
  title: {
  show:true,
  fontSize : 15,
  text: '數(shù)據(jù)測(cè)試'
    },
  series: [{
    type: 'pie',
    radius: '55%',
    data:test,//賦值方式為字典傳值
  }]
 }

效果圖：

django中怎么動(dòng)態(tài)加載echarts餅圖數(shù)據(jù)

上述內(nèi)容就是django中怎么動(dòng)態(tài)加載echarts餅圖數(shù)據(jù)，你們學(xué)到知識(shí)或技能了嗎？如果還想學(xué)到更多技能或者豐富自己的知識(shí)儲(chǔ)備，歡迎關(guān)注億速云行業(yè)資訊頻道。

向AI問一下細(xì)節(jié)

django中怎么動(dòng)態(tài)加載echarts餅圖數(shù)據(jù)

猜你喜歡

最新資訊

相關(guān)推薦

相關(guān)標(biāo)簽