python dashboard django_django 12.dashboard仪表盘 - 刘江的django教程

12.dashboard仪表盘

阅读: 48001

评论：38

对于运维管理平台，一个总览的dashboard仪表盘界面是必须有的，不但提升整体格调，也有利于向老板‘邀功请赏’。

dashboard页面必须酷炫吊炸天，所以界面元素应当美观、丰富、富有冲击力。

完整的dashboard.html文件代码如下：

{% extends 'base.html' %}

{% load static %}

{% block title %}仪表盘{% endblock %}

{% block css %}{% endblock %}

{% block breadcrumb %}

仪表盘

dashboard

1. 主页
2. 仪表盘

{% endblock %}

{% block content %}

设备状态(%)

在线

下线

故障

备用

未知

各状态资产数量统计：

{# 百度Echarts实现柱状图#}

各类型资产数量统计：

{# 百度Echarts实现饼状图#}

{% endblock %}

{% block script %}

// 顶部服务器状态百分率圆图

$(function () {

/* jQueryKnob */

$(".knob").knob({

/*change : function (value) {

//console.log("change : " + value);

},

release : function (value) {

console.log("release : " + value);

},

cancel : function () {

console.log("cancel : " + this.value);

},*/

draw: function () {

// "tron" case

if (this.$.data('skin') == 'tron'

) {

var a = this.angle(this.

cv) // Angle

, sa = this.

startAngle // Previous start angle

, sat = this.startAngle // Start angle

, ea // Previous end angle

, eat = sat + a // End angle

, r = true;

this.g.lineWidth = this.lineWidth;

this.o.cursor

&& (sat = eat - 0.3)

&& (eat = eat + 0.3);

if (this.o.displayPrevious) {

ea = this.startAngle + this.angle(this.value);

this.o.cursor

&& (sa = ea - 0.3)

&& (ea = ea + 0.3);

this.g.beginPath();

this.g.strokeStyle = this.previousColor;

this.g.arc(this.xy, this.xy, this.radius - this.lineWidth, sa, ea, false);

this.g.stroke();

}

this.g.beginPath();

this.g.strokeStyle = r ? this.o.fgColor : this.fgColor;

this.g.arc(this.xy, this.xy, this.radius - this.lineWidth, sat, eat, false);

this.g.stroke();

this.g.lineWidth = 2;

this.g.beginPath();

this.g.strokeStyle = this.o.fgColor;

this.g.arc(this.xy, this.xy, this.radius - this.lineWidth + 1 + this.lineWidth * 2 / 3, 0, 2 * Math.PI, false);

this.g.stroke();

return false;

}

}

});

/* END JQUERY KNOB */

});

//不同状态资产数量统计 柱状图

$(function () {

// 基于准备好的dom，初始化echarts实例

var myChart = echarts.init(document.getElementById('barChart'));

// 指定图表的配置项和数据

var option = {

color: ['#3398DB'],

title: {

text: '数量'

},

tooltip: {},

legend: { data:['']

},

xAxis: {

data: ["在线", "下线","故障","备用","未知"] },

yAxis: {

},

series:

[{

name: '数量',