django echarts饼图数据动态加载的实例

yipeiwu_com6年前Python基础

如下所示:

后台关键代码:

data = {}
#keys与values分别为该数据的键数组,值的数组。这里循环为字典添加对应键值
for k, v in zip(keys, values):
  data.update({k: v, },)
#最后将数据打包成json格式以字典的方式传送到前端
return render(request, 'index.html', {'data': json.dumps(data)})

网页(js中)取值关键代码:

1.取值:

var kv = new Array();//声明一个新的字典
kv = {{ data|safe }};//取出后台传递的数据,此处添加safe过滤避免警告
var test = new Array();//声明一个新的字典用于存放数据
for (var logKey in kv) {
//将对应键值对取出存入test,logKey 为该字典的键
  test.push({value: kv[logKey], name: logKey});
}

2.饼图赋值:

var option = {
  title: {
  show:true,
  fontSize : 15,
  text: '数据测试'
    },
  series: [{
    type: 'pie',
    radius: '55%',
    data:test,//赋值方式为字典传值
  }]
 }

效果图:

以上这篇django echarts饼图数据动态加载的实例就是小编分享给大家的全部内容了,希望能给大家一个参考,也希望大家多多支持【听图阁-专注于Python设计】。

相关文章

Python科学计算包numpy用法实例详解

本文实例讲述了Python科学计算包numpy用法。分享给大家供大家参考,具体如下: 1 数据结构 numpy使用一种称为ndarray的类似Matlab的矩阵式数据结构管理数据,比py...

决策树的python实现方法

本文实例讲述了决策树的python实现方法。分享给大家供大家参考。具体实现方法如下: 决策树算法优缺点: 优点:计算复杂度不高,输出结果易于理解,对中间值缺失不敏感,可以处理不相关的特征...

使用NumPy读取MNIST数据的实现代码示例

使用NumPy读取MNIST数据的实现代码示例

NumPy 什么是NumPy NumPy是 Python 语言的一个扩展程序库,支持大量的维度数组与矩阵运算,此外也针对数组运算提供大量的数学函数库。主页为https://numpy.o...

Pandas透视表(pivot_table)详解

Pandas透视表(pivot_table)详解

介绍 也许大多数人都有在Excel中使用数据透视表的经历,其实Pandas也提供了一个类似的功能,名为pivot_table。虽然pivot_table非常有用,但是我发现为了格式化输出...

python基础教程之自定义函数介绍

函数最重要的目的是方便我们重复使用相同的一段程序。 将一些操作隶属于一个函数,以后你想实现相同的操作的时候,只用调用函数名就可以,而不需要重复敲所有的语句。 函数的定义 首先,我们要定义...