前面已经搭建了基于docker的Django+MySQL环境
下面用ECharts+AngularJS简单在HTML页面上展示MySQL数据库里的数据。
效果图.png
<!DOCTYPE html>
{% load static %}
<html lang="en">
<head>
<meta charset="utf-8">
<title name="数据可视化"></title>
<script src="{% static 'js/incubator-echarts-5.0.0/dist/echarts.min.js' %}"></script>
<script src="{% static 'js/angular-1.8.2/angular.min.js' %}"></script>
<script src="{% static 'js/own/demo.js' %}"></script>
</head>
<body>
<h1>第一个数据可视化程序！</h1>
<div id="main" style="width: 1500px;height:450px; ng-app="myApp" ng-controller="siteCtrl"></div>
</body>
</html>
demo.js
var app = angular.module('myApp', []);
var pcData =[];
app.controller('siteCtrl', function($scope, $http) {
$http({
method: 'POST',
url: 'http://localhost:8000/test'
}).then(function successCallback(response) {
pcData = response.data.data;
//console.log(pcData);
var dates = pcData.map(function (item) {
return item[1];
});
//console.log(dates)
var data = pcData.map(function (item) {
return item[5];
});
//console.log(data)
var myChart = echarts.init(document.getElementById('main'));
var optionPC = {
tooltip: {
trigger: 'axis',
axisPointer: {
animation: false,
type: 'cross',
lineStyle: {
color: '#376df4',
width: 2,
opacity: 1
}
}
},
xAxis: {
type: 'category',
data: dates,
axisLabel: { //坐标轴刻度标签的相关设置
interval: 99,
rotate:'90',//旋转度数
}
},
yAxis: {
scale: true,
type: 'value'
},
dataZoom: [{
textStyle: {
color: '#8392A5'
},
start:90,
end:100,
bottom: -12,
handleIcon: 'path://M10.7,11.9v-1.3H9.3v1.3c-4.9,0.3-8.8,4.4-8.8,9.4c0,5,3.9,9.1,8.8,9.4v1.3h1.3v-1.3c4.9-0.3,8.8-4.4,8.8-9.4C19.5,16.3,15.6,12.2,10.7,11.9z M13.3,24.4H6.7V23h6.6V24.4z M13.3,19.6H6.7v-1.4h6.6V19.6z',
dataBackground: {
areaStyle: {
color: '#8392A5'
},
lineStyle: {
opacity: 0.8,
color: '#8392A5'
}
},
brushSelect: true
}, {
type: 'inside'
}],
series: [{
data: data,
type: 'line'
}]
};
myChart.setOption(optionPC);
//console.log($scope.datas[0],$scope.datas[0][1],$scope.datas[0][5])
}, function errorCallback(response) {
// 请求失败执行代码
});
});
urls.py配置
from django.contrib import admin
from django.urls import path
from django_app.views import index,test
urlpatterns = [
path('admin/', admin.site.urls),
path('index', index),
path('test', test)
]
views.py 连接名为test的数据库，从demo表中取出数据
# coding:utf-8
from django.shortcuts import render
from django.http import HttpResponse
import json
def index(request):
return render(request, "index.html")
def test(request):
import pymysql
db = pymysql.connect("172.17.0.1","root","123456","test" )
cursor = db.cursor()
sql="select * from always_use where is_sin_cos=1"
sql="select * from demo"
cursor.execute(sql)
data = cursor.fetchall()
db.close()
return HttpResponse(json.dumps({"code":0,
"message":"success",
"data":data}),
content_type="application/json")
打开谷歌浏览器，输入url http://localhost:8000/index就可以查看效果图了。
然后就可以通过修改各种配置来学习ECharts和AngularJS了。
网友评论