angularjs2 mysql_docker Django+mysql+ECharts+AngularJS简单搭建数据可视化(二)

紧接着上面内容

下面来优化下视觉效果。废话不多说，先上效果图(名字没想好，先忽略这个)

效果图.png

js代码

title可以对图的标题进行样式规划；

dataZoom是缩放部分样式

series里面的markLine是对需要标注的线样式设计，我这里只标记了最大最小值，也可以指定坐标标注

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[0];

});

//console.log(dates)

var data_a = pcData.map(function (item) {

return item[1];

});

var data_b = pcData.map(function (item) {

return item[2];

});

var data_c = pcData.map(function (item) {

return item[3];

});

//console.log(data)

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

var optionPC = {

title: {

text: '数值',

textStyle: {

fontSize: 12,

fontWeight: 400,

color: '#000000'

},

left: 5,

top: -5,

},

tooltip: {

trigger: 'axis',

axisPointer: {

animation: false,

type: 'cross',

lineStyle: {

color: '#376df4',

width: 2,

opacity: 1

}

}

},

legend: {

data: ['0反', '1反', '2反']

},

xAxis: {

type: 'category',

data: dates,

axisLabel: { //坐标轴刻度标签的相关设置

interval: 99,

rotate:'70',//旋转度数

}

},

yAxis: {

scale: true,

type: 'value',

min: function(value){return value.min;},

max: function(value){return value.max;}

},

dataZoom: [{

textStyle: {

color: '#8392A5'

},

start:99,

end:100,

bottom: -8,

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: [{

name: '0反',

data: data_a,

type: 'line',

smooth: true,

markLine: {

symbol: 'none',

itemStyle: {

normal: {

lineStyle: {

type: 'dashed'

},

label: {

show: true,

position: 'left'

}

}

},

data: [

{

name: '峰线',

type: 'max'

},

{

name: '谷线',

type: 'min'

}

]

}

},{

name: '1反',

data: data_b,

type: 'line',

smooth: true,

markLine: {

symbol: 'none',

itemStyle: {

normal: {

lineStyle: {

type: 'dashed'

},

label: {

show: true,

position: 'left'

}

}

},

data: [

{

name: '峰线',

type: 'max'

},

{

name: '谷线',

type: 'min'

}

]

}

},{

name: '2反',

data: data_c,

type: 'line',

smooth: true,

markLine: {

symbol: 'none',

itemStyle: {

normal: {

lineStyle: {

type: 'dashed'

},

label: {

show: true,

position: 'left'

}

}

},

data: [

{

name: '峰线',

type: 'max'

},

{

name: '谷线',

type: 'min'

}

]

}

}

]

};

myChart.setOption(optionPC);

//console.log($scope.datas[0],$scope.datas[0][1],$scope.datas[0][5])

}, function errorCallback(response) {

// 请求失败执行代码

});

});

views.py

def test(request):

import pymysql

db = pymysql.connect("172.17.0.1","root","123456","test" )

cursor = db.cursor()

sql="SELECT zero,one,two from three WHERE id=37161865" #37161865 30522698

cursor.execute(sql)

a = cursor.fetchone()

sql="select * from demo"

cursor.execute(sql)

data = cursor.fetchall()

db.close()

# print(type(a))

print(a[0],a[1],a[2])

if len(a) == 3:

# print(a[0])

# print(a[0].find('['),a[0].find(']'))

zero = []

for i in a[0][a[0].find('[') + 1:a[0].find(']')].split(','):

zero.append(int(i.strip()))

# print(zero)

one = []

for i in a[1][a[1].find('[') + 1:a[1].find(']')].split(','):

one.append(int(i.strip()))

# print(one)

two = []

for i in a[2][a[2].find('[') + 1:a[2].find(']')].split(','):

two.append(int(i.strip()))

data_a = np.array(data)[:,[1,5]]

print(data_a[0])

data = method.graph_reminder_zero_to_two(data_a, zero, one, two)

else:

print("False")

print(data[0])

return HttpResponse(json.dumps({"code":0,

"message":"success",

"data":data}),

content_type="application/json")

method.py

# coding:utf-8

import numpy as np

def graph_reminder_zero_to_two(data, zero, one, two):

print("in method.py")

print(zero, one, two)

graph_data = list()

for i in data[:, 1]:

i = int(i)

if i in zero:

graph_data.append(0)

elif i in one:

graph_data.append(1)

elif i in two:

graph_data.append(2)

else:

print(type(i))

print("数据初始化失败！" +str(i))

return

# graph_data=data[:,1]%3

ids=data[:,0].tolist()

graph_start_fund = 0.0

graph_fund_zero = graph_start_fund

graph_fund_one = graph_start_fund

graph_fund_two = graph_start_fund

graph_zero = list()

graph_one = list()

graph_two = list()

for i in range(len(graph_data)):

if graph_data[i] == 0:

graph_fund_zero -= 1

graph_fund_one += 0.5

graph_fund_two += 0.5

graph_zero.append(graph_fund_zero)

graph_one.append(graph_fund_one)

graph_two.append(graph_fund_two)

elif graph_data[i] == 1:

graph_fund_zero += 0.5

graph_fund_one -= 1

graph_fund_two += 0.5

graph_zero.append(graph_fund_zero)

graph_one.append(graph_fund_one)

graph_two.append(graph_fund_two)

elif graph_data[i] == 2:

graph_fund_zero += 0.5

graph_fund_one += 0.5

graph_fund_two -= 1

graph_zero.append(graph_fund_zero)

graph_one.append(graph_fund_one)

graph_two.append(graph_fund_two)

else:

print("数据错误！")

return

print(ids[0],graph_zero[0])

return np.c_[ids,graph_zero,graph_one,graph_two].tolist()