Skip to content

V
V3-TailingPond-xiadian
Commit 4024190e authored by forevertyler's avatar forevertyler
Browse files
Options

'chart

parent b79531eb
Show whitespace changes
Inline Side-by-side
Showing with 210 additions and 204 deletions
src/assets/js/chartTemplates.js
View file @ 4024190e
......@@ -7,7 +7,7 @@ import Highcharts3D from 'highcharts/highcharts-3d.js';
HTreemap(Highcharts); // treemap 类型
Highcharts3D(Highcharts); // 3D 类型
var Highchart = function(){
var Highchart = function () {
/**
* 图表数据格式化
......@@ -19,21 +19,21 @@ var Highchart = function(){
* @updatetime: 2021/12/25
* @createtime: 2021/12/25
*/
var formatChartData = function(list, opts){
var formatChartData = function (list, opts) {
var sdata = [], sum = 0, maxVal = 0, mark = 0;
var len = list.length;
for(var i=0; i<len; i++){
for (var i = 0; i < len; i++) {
var item = list[i];
var value = item[opts.value] * 1;
value > maxVal && (maxVal = value, mark = i);
sdata.push({name:item[opts.name], y:value, 'color':item.color || void 0});
sdata.push({ name: item[opts.name], y: value, 'color': item.color || void 0 });
sum += value;
};
if(opts.standOut){
if (opts.standOut) {
sdata[mark].sliced = true;
sdata[mark].selected = true;
};
return {seriesData:sdata, sum:sum};
return { seriesData: sdata, sum: sum };
};
......@@ -47,35 +47,35 @@ var Highchart = function(){
* @updatetime: 2022/12/28
* @createtime: 2022/12/28
*/
var seriesDataFormat = function(data, opts){
var seriesDataFormat = function (data, opts) {
var names = data.names || [], list = data.list || data.lists, series = [], categories = [],
maxVal = 0;
if(names[0] && list){
if (names[0] && list) {
var colors = ['#8085E9', '#90ED7D', '#F7A35C', '#F15C80', '#E4D354', '#2B908F', '#F45B5B', '#91E8E1', '#0769CB', '#00ABBD', '#ffd886', "#9F2E61", "#4D670C"];
var len = names.length;
for(var i=0; i<len; i++){
for (var i = 0; i < len; i++) {
var item = names[i];
var serie = {name:item.name, data:[], key:item.key, type:data.chartType, color:colors[i]};
var serie = { name: item.name, data: [], key: item.key, type: data.chartType, color: colors[i] };
opts && serie.type && (serie.type = opts.type);
series.push(serie);
};
for(var item of list){
for (var item of list) {
var values = item.values;
//var datetime = item[opts.datekey || 'dateUnit'];
//var time = datetime.indexOf(' ') > 0 ? datetime.split(' ')[1] : datetime;
var timestamp = item['date'];
//categories.push(timestamp);
for(var serie of series){
for (var serie of series) {
var value = values[serie.key] * 1;
Math.abs(value) > maxVal && (maxVal = Math.abs(value));
serie.data.push([timestamp, value]);
};
};
};
return {series:series, categories:categories, maxVal:maxVal}
return { series: series, categories: categories, maxVal: maxVal }
};
......@@ -90,15 +90,15 @@ var Highchart = function(){
* @updatetime: 2022/1/12
* @createtime: 2022/1/12
*/
var reversExtends = function(inherit, give, fn){
return (function run(main, assist){
var reversExtends = function (inherit, give, fn) {
return (function run(main, assist) {
var keys = Object.keys(assist), i = 0;
return (function loop(){
return (function loop() {
var key = keys[i]; i++;
if(key){
if (key) {
fn && fn(key, main, assist);
return typeof main[key] === 'object' ? run(main[key], assist[key]) : (main[key] = assist[key]), loop();
}else{
} else {
return inherit;
};
})();
......@@ -115,56 +115,57 @@ var Highchart = function(){
* @updatetime: 2022/4/18(周一)
* @createtime: 2022/4/18(周一)
*/
var discernValidAlarmValue = function(alarms, list, series, direction, opts){
var discernValidAlarmValue = function (alarms, list, series, direction, opts) {
var xLength = (list || []).length, maxAlarm = 0, opts = opts || {};
if(alarms && xLength){
if (alarms && xLength) {
var value = alarms.value;
// discern
var levelDist = [
{color:'red', name:'红色报警线'},
{color:'orange', name:'橙色报警线'},
{color:'yellow', name:'黄色报警线'},
{color:'blue', name:'蓝色报警线'}],
alarmLine = {}, setAlarmSerie = function(value, name, color){
{ color: 'red', name: '红色报警线' },
{ color: 'orange', name: '橙色报警线' },
{ color: 'yellow', name: '黄色报警线' },
{ color: 'blue', name: '蓝色报警线' }],
alarmLine = {}, setAlarmSerie = function (value, name, color) {
// 修改蓝色色值
(color === 'blue') && (color = '#3BAFFB');
var sx = list[0].date, ex = list[xLength-1].date;
var serie = {name:name, type:'spline', data:[{x:sx, y:value}, {x:ex, y:value}],
color:color,
enableMouseTracking:false,
legend:false,
showInLegend:false,
dashStyle:'ShortDot',
lineWidth:opts.lineWidth || 1,
states:{
inactive:{
opacity:opts.opacity
},
},
dataLabels:{
enabled:opts.valEnabled || false, // 数据值, 2022/11/11(周五) 因多条报警线暂时关闭
var sx = list[0].date, ex = list[xLength - 1].date;
var serie = {
name: name, type: 'spline', data: [{ x: sx, y: value }, { x: ex, y: value }],
color: color,
enableMouseTracking: false,
legend: false,
showInLegend: false,
dashStyle: 'ShortDot',
lineWidth: opts.lineWidth || 1,
states: {
inactive: {
opacity: opts.opacity
},
},
dataLabels: {
enabled: opts.valEnabled || false, // 数据值, 2022/11/11(周五) 因多条报警线暂时关闭
//backgroundColor:'red',
verticalAlign:'middle',
padding:0,
defer:false,
allowOverlap:true,
color:color,
style:{
fontSize:'17',
textOutline:'none',
verticalAlign: 'middle',
padding: 0,
defer: false,
allowOverlap: true,
color: color,
style: {
fontSize: '17',
textOutline: 'none',
},
},
tooltip:{
tooltip: {
//footerFormat:'',
//pointFormat:'',
headerFormat:'',
headerFormat: '',
//nullFormat:'',
},
marker:{
enabled:false
marker: {
enabled: false
},
zIndex:-10,
zIndex: -10,
};
series.push(serie);
};
......@@ -182,52 +183,53 @@ var Highchart = function(){
}; */
// 多条报警线
for(var item of levelDist){
for (var item of levelDist) {
item.value = value[item.color];
alarmLine[item.color] = item;
};
// add
for(var key in alarmLine){
for (var key in alarmLine) {
var line = alarmLine[key];
line.value > maxAlarm && (maxAlarm = line.value);
setAlarmSerie(line.value, line.name, line.color);
direction && setAlarmSerie(0-line.value, line.name, line.color);
direction && setAlarmSerie(0 - line.value, line.name, line.color);
};
};
return {series, maxAlarm};
return { series, maxAlarm };
};
var addAlarmLine = function(alarms, list, series, direction){
var addAlarmLine = function (alarms, list, series, direction) {
var xLength = (list || []).length;
if(alarms && xLength){
if (alarms && xLength) {
var value = alarms.value;
// discern
var levelDist = [
{color:'red', name:'红色报警线'},
{color:'orange', name:'橙色报警线'},
{color:'yellow', name:'黄色报警线'},
{color:'blue', name:'蓝色报警线'}],
alarmLine = {}, setAlarmSerie = function(value, name, color){
var serie = {name:name, type:'spline', data:[{x:0, y:value}, {x:xLength, y:value}], color:color,
{ color: 'red', name: '红色报警线' },
{ color: 'orange', name: '橙色报警线' },
{ color: 'yellow', name: '黄色报警线' },
{ color: 'blue', name: '蓝色报警线' }],
alarmLine = {}, setAlarmSerie = function (value, name, color) {
var serie = {
name: name, type: 'spline', data: [{ x: 0, y: value }, { x: xLength, y: value }], color: color,
//enableMouseTracking:false,
legend:false,
showInLegend:false,
dashStyle:'ShortDot',
states:{
inactive:{
opacity:1
legend: false,
showInLegend: false,
dashStyle: 'ShortDot',
states: {
inactive: {
opacity: 1
},
},
};
series.push(serie);
};
for(var item of levelDist){
for (var item of levelDist) {
var value = alarms[item.color] * 1;
if(value){
if (value) {
setAlarmSerie(value, item.name, item.color);
direction && setAlarmSerie(0-value, item.name, item.color);
direction && setAlarmSerie(0 - value, item.name, item.color);
};
};
};
......@@ -235,22 +237,22 @@ var Highchart = function(){
};
var template = {
pie: function(el, data, opts){
pie: function (el, data, opts) {
var chartData = formatChartData(data, opts);
var seriesData = chartData.seriesData;
return new Highcharts.chart(el, {
chart: {
backgroundColor:'transparent',
backgroundColor: 'transparent',
//spacing:[0, 0 , 0, 0]
},
title: {
floating:true,
text: '总数<br/>'+chartData.sum,
floating: true,
text: '总数<br/>' + chartData.sum,
verticalAlign: 'middle',
y:22,
y: 22,
floating: true,
style:{
color:'#00f6ff',
style: {
color: '#00f6ff',
}
},
tooltip: {
......@@ -260,12 +262,12 @@ var Highchart = function(){
pie: {
allowPointSelect: true,
borderWidth: 0,
minSize:130,
minSize: 130,
//size:200,
cursor: 'pointer',
dataLabels: {
enabled: true,
distance:10,
distance: 10,
format: '<b>{point.name}</b>: {point.percentage:.1f} %',
style: {
color: (Highcharts.theme && Highcharts.theme.contrastTextColor) || 'black'
......@@ -282,7 +284,7 @@ var Highchart = function(){
name: '设备数量',
data: seriesData
}]
}, function(c) { // 图表初始化完毕后的会掉函数
}, function (c) { // 图表初始化完毕后的会掉函数
/* // 环形图圆心
var centerY = c.series[0].center[1],
titleHeight = parseInt(c.title.styles.fontSize);
......@@ -305,15 +307,15 @@ var Highchart = function(){
* @updatetime: 2022/1/11
* @createtime: 2022/1/11
*/
high: function(el, data, opts){
high: function (el, data, opts) {
var list = data.list;
data.chartType = data.range === 'month' ? 'line' : 'column';
var chartConfig = opts.chartConfig || {};
var chartData, categories = [], series = [], maxVal = null;
if(opts.isSeriesData){
if (opts.isSeriesData) {
}else{
} else {
chartData = seriesDataFormat(data, {});
categories = chartData.categories;
series = chartData.series;
......@@ -328,10 +330,10 @@ var Highchart = function(){
var option = {
chart: {
type: data.chartType,
backgroundColor:'transparent',
backgroundColor: 'transparent',
//marginTop:30,
marginBottom:22,
marginLeft:30,
marginBottom: 22,
marginLeft: 30,
},
title: {
text: ''
......@@ -342,17 +344,17 @@ var Highchart = function(){
xAxis: {
type: 'datetime' || 'category',
labels: {
rotation:0, // 设置轴标签旋转角度
style:{
color:'#fff'
rotation: 0, // 设置轴标签旋转角度
style: {
color: '#fff'
},
y:15,
y: 15,
},
categories: categories[0] && categories,
lineWidth:0,
lineWidth: 0,
//lineColor:'#ff0000',
gridLineColor:'#aaa',
tickLength:0, // 刻度线
gridLineColor: '#aaa',
tickLength: 0, // 刻度线
dateTimeLabelFormats: {
millisecond: '%H:%M:%S.%L',
......@@ -369,16 +371,16 @@ var Highchart = function(){
title: {
text: ''
},
labels:{
style:{
color:'#fff'
labels: {
style: {
color: '#fff'
},
x:-6,
x: -6,
},
gridLineColor:'#0F5680',
gridLineColor: '#0F5680',
//minorGridLineWidth: 5,
//gridLineWidth: 5,
max:opts.maxValDev ? maxVal + maxVal * opts.maxValDev : null,
max: opts.maxValDev ? maxVal + maxVal * opts.maxValDev : null,
},
plotOptions: {
column: {
......@@ -386,7 +388,7 @@ var Highchart = function(){
//y:50,
//itemMarginTop:50,
},
bar:{
bar: {
borderWidth: 0,
},
},
......@@ -399,19 +401,19 @@ var Highchart = function(){
// 图例容器
//width:'100%', // number || String
padding:2, // 内边距
margin:2,
borderRadius:5,
padding: 2, // 内边距
margin: 2,
borderRadius: 5,
//borderWidth:1,
verticalAlign: 'top',
// 图例项
//itemWidth:120, // 宽度
itemDistance:10, // 间距 20
y:-10,
itemMarginTop:2,
itemStyle:{color:'#fff',},
itemHoverStyle:{color:'#fff',},
itemDistance: 10, // 间距 20
y: -10,
itemMarginTop: 2,
itemStyle: { color: '#fff', },
itemHoverStyle: { color: '#fff', },
},
credits: {
enabled: false
......@@ -442,28 +444,28 @@ var Highchart = function(){
});
var options;
if(opts.isSeriesData){
if (opts.isSeriesData) {
options = reversExtends(option, chartConfig, opts.callback);
if(opts.type === "t_10"){
if (opts.type === "t_10") {
delete options.legend;
delete options.xAxis;
delete options.yAxis;
};
}else{
} else {
options = reversExtends(option, chartConfig, opts.callback);
};
return new Highcharts.chart(el, options);
},
rich: function(el, data, opts){
rich: function (el, data, opts) {
var list = data.list;
var chartConfig = opts.chartConfig || {};
var chartData, categories = [], series = [], maxVal = null, unit = data.danwei;
if(opts.isSeriesData){
if (opts.isSeriesData) {
}else{
chartData = seriesDataFormat(data, {datekey:'date'});
} else {
chartData = seriesDataFormat(data, { datekey: 'date' });
categories = chartData.categories;
series = chartData.series;
};
......@@ -473,16 +475,21 @@ var Highchart = function(){
// add alarm line
var option = {
valEnabled: true,
opacity:1,
lineWidth:3,
opacity: 1,
lineWidth: 3,
};
data.alarm.value.red = parseFloat(data.alarm.value.red);
data.alarm.value.orange = parseFloat(data.alarm.value.orange);
data.alarm.value.blue = parseFloat(data.alarm.value.blue);
data.alarm.value.yellow = parseFloat(data.alarm.value.yellow);
var alarmData = discernValidAlarmValue(data.alarm, data.lists, series, warningLine, option);
console.log(alarmData,"ala")
console.log(alarmData, "ala")
var option = {
chart: {
//type: '',
backgroundColor:'transparent',
backgroundColor: 'transparent',
//marginTop:30,
//marginBottom:30,
//marginLeft:30,
......@@ -494,16 +501,16 @@ var Highchart = function(){
subtitle: {
text: ''
},
tooltip:{
enabled:false,
borderWidth:10,
tooltip: {
enabled: false,
borderWidth: 10,
},
xAxis: {
type: 'datetime',
categories: categories[0] && categories,
lineWidth:0,
lineWidth: 0,
//lineColor:'#ff0000',
gridLineColor:'#aaa',
gridLineColor: '#aaa',
dateTimeLabelFormats: {
millisecond: '%H:%M:%S.%L',
......@@ -520,11 +527,11 @@ var Highchart = function(){
title: {
text: ''
},
labels:{
x:-6,
labels: {
x: -6,
},
gridLineColor:'#aaa',
max:null,
gridLineColor: '#aaa',
max: null,
},
plotOptions: {
column: {
......@@ -532,7 +539,7 @@ var Highchart = function(){
//y:50,
//itemMarginTop:50,
},
bar:{
bar: {
borderWidth: 0,
},
},
......@@ -540,7 +547,7 @@ var Highchart = function(){
// {point.y:.4f} // 保留4位小数
//headerFormat: '<span style="font-size:10px">{point.key}</span><table>',
pointFormat: '<tr><td style="color:{series.color};padding:0">{series.name}:</td>' +
'<td style="padding:0"><b>{point.y}'+unit+'</b> </td></tr>',
'<td style="padding:0"><b>{point.y}' + unit + '</b> </td></tr>',
footerFormat: '</table>',
shared: true,
useHTML: true,
......@@ -564,19 +571,19 @@ var Highchart = function(){
// 图例容器
//width:'100%', // number || String
padding:2, // 内边距
margin:2,
borderRadius:5,
padding: 2, // 内边距
margin: 2,
borderRadius: 5,
//borderWidth:1,
verticalAlign: 'top',
// 图例项
//itemWidth:120, // 宽度
itemDistance:10, // 间距 20
y:-10,
itemMarginTop:2,
itemStyle:{},
itemHoverStyle:{},
itemDistance: 10, // 间距 20
y: -10,
itemMarginTop: 2,
itemStyle: {},
itemHoverStyle: {},
},
credits: {
enabled: false
......@@ -588,41 +595,41 @@ var Highchart = function(){
global: {
useUTC: false
},
lang:{
resetZoom:'重置缩放比例',
lang: {
resetZoom: '重置缩放比例',
},
});
var options;
if(opts.isSeriesData){
if (opts.isSeriesData) {
options = reversExtends(option, chartConfig, opts.callback);
if(opts.type === "t_10"){
if (opts.type === "t_10") {
delete options.legend;
delete options.xAxis;
delete options.yAxis;
};
}else{
} else {
options = reversExtends(option, chartConfig, opts.callback);
};
return new Highcharts.chart(el, options);
},
};
var getRandomColor = function(random){
if(random === true){
var getRandomColor = function (random) {
if (random === true) {
return 'rgb(' + [Math.round(Math.random() * 160), Math.round(Math.random() * 160), Math.round(Math.random() * 160)].join(',') + ')';
}else{
} else {
var colors = ['#7CB5EC', '#434348', '#90ED7D', '#F7A35C', '#8085E9', '#F15C80', '#E4D354', '#2B908F', '#F45B5B', '#91E8E1', '#0769CB', '#00ABBD', '#ffd886', "#9F2E61", "#4D670C"];
if(typeof random === 'number'){
if (typeof random === 'number') {
return colors[~~random];
}else{
return colors[~~(Math.random()*colors.length)];
} else {
return colors[~~(Math.random() * colors.length)];
};
};
};
return {
template:template, getRandomColor:getRandomColor
template: template, getRandomColor: getRandomColor
}
};
......
src/assets/js/httpApi.js
View file @ 4024190e
......@@ -1057,7 +1057,7 @@ var reqApis = function () {
var that = this;
qf.UI.popupLayer({
//title:'<div>标题</div>',
html: '<div style="width:13.4rem;"></div>',
html: '<div style="width:13.5rem;"></div>',
onload: function (el) {
var box = el.firstElementChild;
var btngroub = '<div style="margin:0 2px 0 25px;color:#E6A23C;">当前：</div><div class="el-button-group"><button data-id="1" class="el-button el-button--primary el-button--small cu-btn cu-btn-null">1小时</button><button data-id="3" class="el-button el-button--primary el-button--small cu-btn cu-btn-null">3小时</button><button data-id="6" class="el-button el-button--primary el-button--small cu-btn cu-btn-null">6小时</button><button data-id="12" class="el-button el-button--primary el-button--small cu-btn cu-btn-null">12小时</button><button data-id="24" class="el-button el-button--primary el-button--small cu-btn cu-btn-null">24小时</button></div>';
......@@ -1120,7 +1120,6 @@ var reqApis = function () {
tag.classList.remove('cu-btn-null');
box.tagBtn = tag;
query.hours = ~~tag.dataset.id;
console.log(query.hours, 'hhhhh')
that.pageApi.reqchart(query).then((res) => {
var body = res.body || [];
if (query.hours == 1) {
......@@ -1128,16 +1127,16 @@ var reqApis = function () {
let valList = rainData.map(item => {
return Number(item.values.rainfall)
})
console.log(valList, 'valList')
let num = valList.reduce(function (total, value) {
return total + value;
}, 0);
num = num.toFixed(2)
console.log(num)
divID.innerHTML = "降雨总量:" + num + body.danwei
} else {
divID.innerHTML = ''
}
chartOpts.cache = Highchart.template.rich.call(that, chartEl, body, chartOpts);
})
} else if (tag.classList.contains('switch')) {
chartOpts.cache.update({ chart: { type: tag.dataset.type } })
......
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment