Django工程中使用echarts怎么循环遍历显示数据

前言：后面要开发测试管理平台，需要用到数据可视化，所以研究了一下

先看下最后的图吧,单击最上方的按钮可以控制柱状图显隐

views.py

# -*- coding: utf-8 -*-
from __future__ import unicode_literals
import json
from django.shortcuts import render
import pymysqldef 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'}]
};

转载于:https://www.cnblogs.com/gcgc/p/10087405.html

Django工程中使用echarts怎么循环遍历显示数据相关推荐

java 遍历对象_java中some()，every()循环遍历，Object.getOwnPropertyNames()遍历对象的属性...
由于java知识的应用具有一定的广泛性,所以它经常会应用到我们的日常使用当中.那么今天就为大家介绍一下java中some(),every()循环遍历,Object.getOwnPropertyName ...
python list遍历删除_Python中list循环遍历删除数据的正确方法
前言初学Python,遇到过这样的问题,在遍历list的时候,删除符合条件的数据,可是总是报异常,代码如下: num_list = [1, 2, 3, 4, 5] print(num_list) f ...
Java中六种List集合循环遍历取值
今天在做项目的时候,需要比较前一条与后一条数据的时间差.用list获取到数据,需要循环遍历取数据.接下来看代码: //int i = trans.size() - 1; i >= 0; i-- ...
vue 工程中加入 echarts 图表不显示的问题
vue 工程中加入 echarts 图表不显示的问题一.问题原因 vue 引用 echarts 方式错误,高版本采用了低版本的引用方式二.vue工程使用echarts vue官方教程 1. 安装 ...
循环遍历表格数据（可编辑可跨行）
循环遍历表格数据(可编辑可跨行) 实现一个可编辑功能的表格,具体功能如下: 正常情况下房间号位置只显示房间号,当鼠标移上显示编辑及删除图标,点击编辑显示可编辑输入框,点击输入框里的确认(√),房间号修 ...
html js 循环取json数据,JS循环遍历JSON数据的方法
JS循环遍历JSON数据本文提供了 JS 循环 JSON 数据列,以及 JS 循环遍历 JSON 数据的例子,供大家学习参考. 1. json数据的列循环 var len = json.length ...
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中最常用 ...
在JS中利用for...in循环遍历对象
for...in循环可以在js中遍历对象或者数组,比如当我们想要输出内容中的所有对象,就可以使用for...in循环 <script> //使用方法 for(键 in 对象)var obj ...
JS中的12种循环遍历的方法
1.for循环 JS常见的循环,常用于循环数组.字符串之类 let arr = [1, 2, 3]; for (let i = 0; i < arr.length; i++) {console. ...

Django工程中使用echarts怎么循环遍历显示数据

Django工程中使用echarts怎么循环遍历显示数据相关推荐

最新文章

热门文章