前言： 后面要开发测试管理平台，需要用到数据可视化，所以研究了一下
先看下最后的图吧,单击最上方的按钮可以控制柱状图显隐
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'}
]
};
