紧接着上面内容
下面来优化下视觉效果。废话不多说，先上效果图(名字没想好，先忽略这个)
效果图.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()
网友评论