django chart mysql,docker Django+mysql+ECharts+AngularJS简单搭建数据可视化

前面已经搭建了基于docker的Django+MySQL环境

下面用ECharts+AngularJS简单在HTML页面上展示MySQL数据库里的数据。

效果图.png

{% load static %}

第一个数据可视化程序！

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了。