Django工程中使用echarts怎么循环遍历显示数据
前言: 后面要开发测试管理平台,需要用到数据可视化,所以研究了一下
先看下最后的图吧,单击最上方的按钮可以控制柱状图显隐
views.py
# -*- coding: utf-8 -*-
from __future__ import unicode_literals
import json
from django.shortcuts import render
import pymysql def showcase(request):
"""
从数据库中读取作者的用例信息,并用于前台可视化展示
:param request:
:return:
"""
db = pymysql.connect("localhost", "root", "guchen", "guchen_test", charset='utf8')
cursor = db.cursor()
sql = "select * from userCaseInfo"
cursor.execute(sql)
results = cursor.fetchall()
print results
# 向js中传递数据必须json.dumps()处理
return render(request, "showcase.html", {'caseInfo': json.dumps(list(results))})
showcase.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>showcase</title>
{# 引入jQuery#}
<script src="http://code.jquery.com/jquery-latest.js"></script>
<!-- 引入本地的 echarts.js -->
<script src="../static/js/echarts.js"></script>
</head>
<body>
<div id="main" style="width: 1000px;height: 500px">
{% block content %}
<!--echarts图表-->
<script type="text/javascript">
// 基于准备好的dom,初始化echarts实例
var myChart = echarts.init(document.getElementById('main')); // 显示标题,图例和空的坐标轴
myChart.setOption({
legend: {},
tooltip: {},
dataset: {
source: [
[],
[], //这里一定要把最内层的数据清除掉
[]
]
},
xAxis: {type: 'category'},
yAxis: {},
// Declare several bar series, each will be mapped
// to a column of dataset.source by default.
series: [
{type: 'bar'},
{type: 'bar'},
{type: 'bar'}
]
}); var caseInfo={}; //请求前先不要获取后端返回的数据,先定义空的字典(去掉也没事)
// 注意这里的参数值,showcase表示视图函数,caseInfo是后台传过来的数据
$.get('/showcase/').done(function (caseInfo) {
caseInfo = {{ caseInfo|safe}}; // 获取后台传来的数据需要加上safe过滤
uname = caseInfo[0][1]
// 将source中不变的第一个列表元素初始化进来
var source = [['product', '总数', '成功', '失败']];
// 使用for循环将caseInfo中的数据循环遍历push进source列表中
for(var i=0; i< caseInfo.length;i++)
{
source.push([caseInfo[i][1], caseInfo[i][2], caseInfo[i][3], caseInfo[i][4]])
myChart.setOption({
dataset: {
// 引用添加了数据的变量source
source: source
}
});
}
});
</script>
{% endblock %}
</div> </body>
</html>
使用的Echarts模板是:
option = {
legend: {},
tooltip: {},
dataset: {
source: [
['product', '总数', '成功', '失败'],
['Matcha Latte', 43.3, 85.8, 93.7],
['Milk Tea', 83.1, 73.4, 55.1],
['Cheese Cocoa', 86.4, 65.2, 82.5],
['Walnut Brownie', 72.4, 53.9, 39.1]
]
},
xAxis: {type: 'category'},
yAxis: {},
// Declare several bar series, each will be mapped
// to a column of dataset.source by default.
series: [
{type: 'bar'},
{type: 'bar'},
{type: 'bar'}
]
};
Django工程中使用echarts怎么循环遍历显示数据的更多相关文章
- JavaScript 中的12种循环遍历方法
原文:JavaScript 中的12种循环遍历方法 题目:请介绍 JavaScript 中有哪些循环和遍历的方法,说说它们的应用场景和优缺点? 1.for 循环 let arr = [1,2,3];f ...
- 高效遍历匹配Json数据与双层for循环遍历Json数据
工作中往往遇到这种情况,保留用户操作痕迹,比如用户选择过得东西,用户进入其它页面再返回来用户选择的的数据还在. 比如:1.购物车列表中勾选某些,点击任意一项,前往详情页,再返回购物车依旧需要呈现勾选状 ...
- Vue之循环遍历Json数据,填充Table表格
简单记一次Vue循环遍历Json数据,然后填充到Table表格中,展示到前端的代码: async getData(id) { const res = await this.$store.api.new ...
- JS 循环遍历JSON数据 分类: JS技术 JS JQuery 2010-12-01 13:56 43646人阅读 评论(5) 收藏 举报 jsonc JSON数据如:{"options":"[{
JS 循环遍历JSON数据 分类: JS技术 JS JQuery2010-12-01 13:56 43646人阅读 评论(5) 收藏 举报 jsonc JSON数据如:{"options&q ...
- 如何让django模型中的字段和model名显示为中文
如何让django模型中的字段和model名显示为中文:在模型中加入class Meta即可 class People(models.Model): name = models.CharField(n ...
- javascript中的12种循环遍历方法1
1:for循环 let arr = [1,2,3]; for(let i =0;i<arr.length;i++){ console.log(i,arr[i]) } //for循环是js中最常用 ...
- aspnet中通过多条件筛选来显示数据的实现
UI图: 功能实现: 1.勾选住哪个选项之后,就加入了筛选.支持姓名的模糊查询. 2.对筛选出来的数据可以直接修改,并更新回数据库. 说明:显示的数据来自T_User表.数据显示控件使用的是 List ...
- Struts1.x 中处理乱码及通过标签显示数据
1.通过filter解决乱码问题 网页的请求到达之前,先要经过filter的处理: 提取数据出现乱码:request.setCharacterEncoding("UTF-8"); ...
- javascript中的12种循环遍历方法
1.for (自定义条件) 循环 let arr = [1,2,3]; for(let i =0;i<arr.length;i++){ console.log(i,arr[i]) } 2.for ...
随机推荐
- SCSI, (P)ATA, SAS, NL-SAS and SATA, what’s the difference?
Everybody needs storage space nowadays. Whether it is used for high performance computing or simply ...
- java代码----求最大值,平均值。。。
总结:方法的返回值----返回的对象到底是什么? package com.a; import java.util.Scanner; //从键盘输入10个数,并输出最大值,最小值,平均值 public ...
- mysql实战优化之五: 更新/插入优化 sql优化
通常情况下,当访问某张表的时候,读取者首先必须获取该表的锁,如果有写入操作到达,那么写入者一直等待读取者完成操作(查询开始之后就不能中断,因此允许读取者完成操作).当读取者完成对表的操作的时候,锁就会 ...
- PL/SQL 训练04--事务
--pl/sql通过SQL和ORACLE数据库紧密的整合在一起--在pl/sql中可以执行任何操作语句(DML语句),包括INSERT,UPDATE,DELETE,MERGE,也包括查询语句--可否执 ...
- C# 面向切面编程--监控日志记录方案
背景:现在公司整体在做监控平台,要求把各个部分的细节都记录下来,在前台页面上有所显示,所以现在需要做的就是一个监控日志的记录工作,今天讲的就是渲染监控日志的例子. 现状:当前的渲染程序没有为监控日志记 ...
- java事件监听机制2
今天早上的两点收获: 1.addActionListener(其中的setActionCommand函数就是要对对象进行唯一性的标记,便于消息传来后进行处理.理论上actionlistener可以全部 ...
- flask系列八之请求方法、g对象和钩子函数
一.get方法 ,post方法 post请求在模板中要注意几点: (1)input标签中,要写name来标识这个value的key,方便后台获取. (2)在写form表单的时候,要指定method=' ...
- 如何搭建自己的SPRING INITIALIZR server
这两天在慕课学Spring boot ,用idea通过spring initializr新建项目 即使用代理连不上.无奈. 参考了 GitHub - spring-io/initializr: A w ...
- ms project设置行高
1.取消某列的自动换行右击“任务名称”——自动换行 2.全选所有任务点击左上角单元格 3.设置所有行的行高点击任意行最左边单元格的下边框,向上拖放 4.ok
- vim 的移动
越来也喜欢用linux的vim 来编程了,简单.高效.专业,最近拿着一本<vim的中文使用手册>在慢慢的看,看到现在就没有勇气继续看下去,我想先放一下,运用前面自己学的东西实际的去操作一下 ...