Skip to content

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

'chart

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