Django工程中使用echarts怎麼迴圈遍歷顯示資料
阿新 • • 發佈：2018-12-08
前言： 後面要開發測試管理平臺，需要用到資料視覺化，所以研究了一下
先看下最後的圖吧,單擊最上方的按鈕可以控制柱狀圖顯隱
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'} ] };