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


Posted in Python onAugust 12, 2019

如下所示:

后台关键代码:

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饼图数据动态加载的实例

以上这篇django echarts饼图数据动态加载的实例就是小编分享给大家的全部内容了,希望能给大家一个参考,也希望大家多多支持三水点靠木。

Python 相关文章推荐
Python标准库之循环器(itertools)介绍
Nov 25 Python
使用Selenium破解新浪微博的四宫格验证码
Oct 19 Python
Django网络框架之HelloDjango项目创建教程
Jun 06 Python
python中使用paramiko模块并实现远程连接服务器执行上传下载功能
Feb 29 Python
python实现微信打飞机游戏
Mar 24 Python
Django import export实现数据库导入导出方式
Apr 03 Python
Python虚拟环境库virtualenvwrapper安装及使用
Jun 17 Python
keras model.fit 解决validation_spilt=num 的问题
Jun 19 Python
Idea安装python显示无SDK问题解决方案
Aug 12 Python
在 Python 中使用 MQTT的方法
Aug 18 Python
Django实现随机图形验证码的示例
Oct 15 Python
用pushplus+python监控亚马逊到货动态推送微信
Jan 29 Python
python scrapy爬虫代码及填坑
Aug 12 #Python
Python 中的 global 标识对变量作用域的影响
Aug 12 #Python
Python中pymysql 模块的使用详解
Aug 12 #Python
python中类的输出或类的实例输出为这种形式的原因
Aug 12 #Python
对Django 中request.get和request.post的区别详解
Aug 12 #Python
python文字和unicode/ascll相互转换函数及简单加密解密实现代码
Aug 12 #Python
Python简易版停车管理系统
Aug 12 #Python
You might like
解析file_get_contents模仿浏览器头(user_agent)获取数据
2013/06/27 PHP
浅谈Eclipse PDT调试PHP程序
2014/06/09 PHP
Laravel框架运行出错提示RuntimeException No application encryption key has been specified.解决方法
2019/04/02 PHP
Javascript中Eval函数的使用说明
2008/10/11 Javascript
javascript 仿QQ滑动菜单效果代码
2010/09/03 Javascript
jquery库或JS文件在eclipse下报错问题解决方法
2014/04/17 Javascript
IE8下Jquery获取select选中的值post到后台报错问题
2014/07/02 Javascript
jQuery仿Flash上下翻动的中英文导航菜单实例
2015/03/10 Javascript
jQuery获得包含margin的outerWidth和outerHeight的方法
2015/03/25 Javascript
jQuery实现灰蓝风格标准二级下拉菜单效果代码
2015/08/31 Javascript
全屏滚动插件fullPage.js使用实例解析
2016/10/21 Javascript
详解AngularJS通过ocLazyLoad实现动态(懒)加载模块和依赖
2017/03/01 Javascript
js下载文件并修改文件名
2017/05/08 Javascript
JavaScript实现随机数生成器(去重)
2017/10/13 Javascript
微信小程序基于本地缓存实现点赞功能的方法
2017/12/18 Javascript
Vue-cli@3.0 插件系统简析
2018/09/05 Javascript
微信小程序MUI侧滑导航菜单示例(Popup弹出式,左侧不动,右侧滑动)
2019/01/23 Javascript
深入学习js函数的隐式参数 arguments 和 this
2019/06/24 Javascript
js 将多个对象合并成一个对象 assign方法的实现
2020/09/24 Javascript
基于elementUI竖向表格、和并列的案例
2020/10/26 Javascript
python魔法方法-自定义序列详解
2016/07/21 Python
Tensorflow实现神经网络拟合线性回归
2019/07/19 Python
Numpy数组array和矩阵matrix转换方法
2019/08/05 Python
Django自定义模板过滤器和标签的实现方法
2019/08/21 Python
Python自动化操作实现图例绘制
2020/07/09 Python
使用CSS3实现多列布局与多背景的技巧
2016/02/29 HTML / CSS
Space NK英国站:英国热门美妆网站
2017/12/11 全球购物
如果NULL和0作为空指针常数是等价的,那我到底该用哪一个
2014/09/16 面试题
幼儿园中秋节活动方案2013
2014/01/29 职场文书
优秀企业获奖感言
2014/02/01 职场文书
2014年幼儿园安全工作总结
2014/11/10 职场文书
撤诉状格式范本
2015/05/19 职场文书
小学生读书笔记范文
2015/06/30 职场文书
2016年领导干部廉政承诺书
2016/03/24 职场文书
如何让vue长列表快速加载
2021/03/29 Vue.js
python ConfigParser库的使用及遇到的坑
2022/02/12 Python