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

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

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怎么循环遍历显示数据的更多相关文章

  1. JavaScript 中的12种循环遍历方法

    原文:JavaScript 中的12种循环遍历方法 题目:请介绍 JavaScript 中有哪些循环和遍历的方法,说说它们的应用场景和优缺点? 1.for 循环 let arr = [1,2,3];f ...

  2. 高效遍历匹配Json数据与双层for循环遍历Json数据

    工作中往往遇到这种情况,保留用户操作痕迹,比如用户选择过得东西,用户进入其它页面再返回来用户选择的的数据还在. 比如:1.购物车列表中勾选某些,点击任意一项,前往详情页,再返回购物车依旧需要呈现勾选状 ...

  3. Vue之循环遍历Json数据，填充Table表格

    简单记一次Vue循环遍历Json数据,然后填充到Table表格中,展示到前端的代码: async getData(id) { const res = await this.$store.api.new ...

  4. JS 循环遍历JSON数据 分类： JS技术 JS JQuery 2010-12-01 13:56 43646人阅读 评论(5) 收藏 举报 jsonc JSON数据如：{&quot;options&quot;:&quot;[{

    JS 循环遍历JSON数据 分类: JS技术 JS JQuery2010-12-01 13:56 43646人阅读 评论(5) 收藏 举报 jsonc JSON数据如:{"options&q ...

  5. 如何让django模型中的字段和model名显示为中文

    如何让django模型中的字段和model名显示为中文:在模型中加入class Meta即可 class People(models.Model): name = models.CharField(n ...

  6. 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中最常用 ...

  7. aspnet中通过多条件筛选来显示数据的实现

    UI图: 功能实现: 1.勾选住哪个选项之后,就加入了筛选.支持姓名的模糊查询. 2.对筛选出来的数据可以直接修改,并更新回数据库. 说明:显示的数据来自T_User表.数据显示控件使用的是 List ...

  8. Struts1.x 中处理乱码及通过标签显示数据

    1.通过filter解决乱码问题 网页的请求到达之前,先要经过filter的处理: 提取数据出现乱码:request.setCharacterEncoding("UTF-8"); ...

  9. javascript中的12种循环遍历方法

    1.for (自定义条件) 循环 let arr = [1,2,3]; for(let i =0;i<arr.length;i++){ console.log(i,arr[i]) } 2.for ...

随机推荐

  1. 【转】Jmeter项目测试

    Jmeter的录制回放功能是现将你对要测试的项目进行访问的历史记录进行录制,然后虚拟出多个用户对历史记录进行回放,从而达到压力测试的目的. 录制是通过代理服务器进行录制. 一.下载地址 http:// ...

  2. 【转】JMeter中对于Json数据的处理方法

    Json 作为一种数据交换格式在网络开发,特别是 Ajax 与 Restful 架构中应用的越来越广泛.而 Apache 的 JMeter 也是较受欢迎的压力测试工具之一,但是它本身没有提供对于 Js ...

  3. Annotation之二：@Inherited注解继承情况

    @Inherited annotation类型是被标注过的class的子类所继承.类并不从它所实现的接口继承annotation,方法并不从它所重载的方法继承annotation. 子类中能否继承注解 ...

  4. PHP实现四种基本排序算法 得多消化消化

    1.冒泡排序 // 冒泡排序 思路分析:在要排序的一组数中,对当前还未排好的序列,从前往后对相邻的两个数依次进行比较和调整,让较大的数往下沉,较小的往上冒.即,每当两相邻的数比较后发现它们的排序与排序 ...

  5. a标签的四个伪类是什么？如何排序？为什么？

    爱恨分明原则: l v h a 注释:为了产生预期的效果,在 CSS 定义中,a:hover 必须位于 a:link 和 a:visited 之后 ! 注释:为了产生预期的效果,在 CSS 定义中,a ...

  6. python's twenty ninthday for me 模块和包

    模块 和 脚本的 区别:   如果一个py文件被导入了,就是一个模块. 如果这个py文件被直接执行,这个被直接执行的文件就是一个脚本. 模块:1,没有具体的调用过程.2,能对外提供功能. pyc文件: ...

  7. 10.solr学习速成之高亮显示

    Solr高亮显示的三种实现 高亮显示在搜索中使用的比较多,比较常用的有三种使用方式,如果要对某field做高亮显示,必须对该field设置stored=true .          第一种是普通的高 ...

  8. Git 常用命令速查手册

    来源:https://www.jianshu.com/p/5ee9897b6b65 1.初始化仓库 git init 2.将文件添加到仓库 git add 文件名 # 将工作区的某个文件添加到暂存区 ...

  9. windows Server 2008各版本有何区别？

    windows Server 2008有几个版本,先一一列出来把: Windows Server 2008 Standard Edition     (标准版) Windows Server 2008 ...

  10. Java微信公众平台开发(二)--微信服务器post消息体的接收

    转自: http://www.cuiyongzhi.com/post/39.html 在上一篇的文章中我们详细讲述了如何将我们的应用服务器和微信腾讯服务器之间的对接操作,最后接入成功,不知道你有没有发 ...