feat(visual): 优化GIS页面UI并整合实时数据加载
This commit is contained in:
Rue Ji
@ -8,83 +8,7 @@
|
||||
* @param valueId
|
||||
* @param textId
|
||||
*/
|
||||
function getValue(unitId, mpointCode, valueId, textId) {
|
||||
// var data = {
|
||||
// "confirmalarm": "0",
|
||||
// "parmname": "进水瞬时流量",
|
||||
// "signaltag": "",
|
||||
// "soundalarm": "0",
|
||||
// "remoteup": "0",
|
||||
// "triggercycle": "0",
|
||||
// "triggermutation": "0",
|
||||
// "ledcolor": "1",
|
||||
// "id": "C_Jsssll",
|
||||
// "numtail": "0",
|
||||
// "signaltype": "AI",
|
||||
// "active": "启用",
|
||||
// "flowset": 0,
|
||||
// "unit": "m³/h",
|
||||
// "sourceType": "auto",
|
||||
// "mpointcode": "C_Jsssll",
|
||||
// "triggerequoff": "0",
|
||||
// "disname": "",
|
||||
// "valuetype": "sql",
|
||||
// "directtype": "1",
|
||||
// "freq": 1,
|
||||
// "morder": 999,
|
||||
// "showname": "1",
|
||||
// "rate": 1,
|
||||
// "subscriptionStatus": 0,
|
||||
// "mpointid": "C_Jsssll",
|
||||
// "valuemeaning": "",
|
||||
// "mathop": "*",
|
||||
// "triggeralarm": "1",
|
||||
// "equipmentid": "",
|
||||
// "biztype": "",
|
||||
// "parmvalue": 3551,
|
||||
// "ledtype": "1",
|
||||
// "measuredt": "2026-03-11T17:05:43Z",
|
||||
// "bizid": "0533JS"
|
||||
// }
|
||||
//
|
||||
// $('#' + valueId).html(data.parmvalue);//赋值
|
||||
// if (data.unit == undefined) {
|
||||
// $('#' + textId).html(data.parmname);//赋值名称
|
||||
// } else {
|
||||
// $('#' + textId).html(data.parmname + ' (' + data.unit + ')');//赋值名称+单位
|
||||
// }
|
||||
// $.ajax({
|
||||
// type: 'GET',
|
||||
// url: ext.contextPath + '/work/mpoint/getValue4Es.do?unitId=' + unitId + '&mpointCode=' + mpointCode,
|
||||
// async: true,
|
||||
// globle: false,
|
||||
// error: function () {
|
||||
// return false;
|
||||
// },
|
||||
// success: function (data) {
|
||||
// if (data != null && data != '') {
|
||||
// var data = eval('(' + data + ')');
|
||||
// //只限制上限为0.8 下限根据设定值自己设
|
||||
// // var maxvalue = data.alarmmax/0.8;
|
||||
// // var minvalue = data.alarmmin/maxvalue;
|
||||
// // var acvalue = data.parmvalue/maxvalue*100;
|
||||
// $('#' + valueId).html(data.parmvalue);//赋值
|
||||
// if (data.unit == undefined) {
|
||||
// $('#' + textId).html(data.parmname);//赋值名称
|
||||
// } else {
|
||||
// $('#' + textId).html(data.parmname + ' (' + data.unit + ')');//赋值名称+单位
|
||||
// }
|
||||
// }
|
||||
// }
|
||||
// });
|
||||
|
||||
}
|
||||
|
||||
/**
|
||||
* echart饼图--通用
|
||||
*/
|
||||
function echartPie2(unitId, mpointCode, echartId, textId) {
|
||||
var myChart = echarts.init(document.getElementById(echartId));
|
||||
function getValue4Es(unitId, mpointCode, valueId, textId) {
|
||||
$.ajax({
|
||||
type: 'GET',
|
||||
url: ext.contextPath + '/work/mpoint/getValue4Es.do?unitId=' + unitId + '&mpointCode=' + mpointCode,
|
||||
@ -95,113 +19,168 @@ function echartPie2(unitId, mpointCode, echartId, textId) {
|
||||
},
|
||||
success: function (data) {
|
||||
if (data != null && data != '') {
|
||||
var echart_minvalue = 0.2;
|
||||
var echart_maxvalue = 0.8;
|
||||
|
||||
// var data = eval('(' + data + ')');
|
||||
//180度的上限
|
||||
var maxvalue_20 = data.alarmmax * 1.2;
|
||||
//0度的下限
|
||||
var minvalue_20 = data.alarmmin - data.alarmmin * 0.2;
|
||||
|
||||
var maxvalue = data.alarmmax;
|
||||
var minvalue = data.alarmmin;
|
||||
|
||||
//判断是否需要下限
|
||||
if (data.alarmmin == null || data.alarmmin == '') {
|
||||
minvalue_20 = 0;
|
||||
minvalue = 0;
|
||||
echart_minvalue = 0;
|
||||
}
|
||||
|
||||
var parmvalue = data.parmvalue;
|
||||
var rate = 0;
|
||||
var unit = '';
|
||||
|
||||
$('#' + textId).html(data.parmname);
|
||||
|
||||
if (data.unit != undefined && data.unit != null && data.unit != '') {
|
||||
unit = '(' + data.unit + ')';
|
||||
}
|
||||
|
||||
//计算实际值比例
|
||||
if (maxvalue_20 <= 1) {
|
||||
minvalue_20 = minvalue_20 * 100;
|
||||
maxvalue_20 = maxvalue_20 * 100;
|
||||
parmvalue = parmvalue * 100;
|
||||
minvalue = minvalue * 100;
|
||||
maxvalue = maxvalue * 100;
|
||||
if (maxvalue != undefined && minvalue != undefined) {
|
||||
rate = parmvalue / (maxvalue_20 - minvalue_20) * 100;
|
||||
} else {
|
||||
rate = parmvalue;
|
||||
}
|
||||
|
||||
rate += 20;
|
||||
var data = eval('(' + data + ')');
|
||||
//只限制上限为0.8 下限根据设定值自己设
|
||||
// var maxvalue = data.alarmmax/0.8;
|
||||
// var minvalue = data.alarmmin/maxvalue;
|
||||
// var acvalue = data.parmvalue/maxvalue*100;
|
||||
$('#' + valueId).html(data.parmvalue);//赋值
|
||||
if (data.unit == undefined) {
|
||||
$('#' + textId).html(data.parmname);//赋值名称
|
||||
} else {
|
||||
if (maxvalue != undefined && minvalue != undefined) {
|
||||
// rate = parmvalue / maxvalue_20 * 100;
|
||||
rate = (parmvalue / maxvalue) * 0.8 * 100;
|
||||
} else {
|
||||
rate = parmvalue;
|
||||
}
|
||||
$('#' + textId).html(data.parmname + ' (' + data.unit + ')');//赋值名称+单位
|
||||
}
|
||||
|
||||
//计算颜色
|
||||
var colorStr = '#6C6C6C';
|
||||
if (parmvalue < minvalue) {
|
||||
colorStr = '#67e0e3';
|
||||
} else if (parmvalue > maxvalue) {
|
||||
colorStr = '#fd666d';
|
||||
} else {
|
||||
colorStr = '#37a2da';
|
||||
// 37a2da
|
||||
}
|
||||
|
||||
console.log(data.parmname + '扩大下限：' + minvalue_20 + '------扩大上限：' + maxvalue_20 + '------实际比率：' + rate + '------实际值：' + parmvalue + '------实际下限：' + minvalue + '------实际上限：' + maxvalue);
|
||||
|
||||
var option = {
|
||||
toolbox: { //可视化的工具箱
|
||||
show: false, feature: {
|
||||
restore: { //重置
|
||||
show: true
|
||||
}, saveAsImage: {//保存图片
|
||||
show: true
|
||||
}
|
||||
}
|
||||
}, series: [{
|
||||
name: '业务指标', type: 'gauge', startAngle: 180, endAngle: 0, radius: 70, center: ['50%', '80%'],//设置饼图位置
|
||||
axisLine: {
|
||||
show: true, // 属性lineStyle控制线条样式
|
||||
lineStyle: {
|
||||
width: 15, // color: [[0.2, '#e2e2e2'], [0.8, '#66d99f'], [maxvalue, '#f35a4a']]
|
||||
color: [[echart_minvalue, '#67e0e3'], [echart_maxvalue, '#37a2da'], [maxvalue_20, '#fd666d']]
|
||||
}
|
||||
}, splitLine: {
|
||||
show: false,
|
||||
}, axisTick: {
|
||||
show: false,
|
||||
}, axisLabel: {
|
||||
show: false,
|
||||
}, pointer: {
|
||||
length: '40px', width: '3px',
|
||||
}, detail: {
|
||||
offsetCenter: [0, '20%'], fontSize: 14, color: colorStr, //formatter: data.parmname,
|
||||
formatter: data.parmvalue + unit//data.parmvalue为实际值 acvalue为计算后的比例
|
||||
}, data: [{value: rate}]
|
||||
}]
|
||||
};
|
||||
myChart.setOption(option);
|
||||
myChart.resize();
|
||||
}
|
||||
}
|
||||
}
|
||||
});
|
||||
}
|
||||
|
||||
function getValue(unitId, mpointCode, valueId, textId) {
|
||||
$.ajax({
|
||||
type: 'GET',
|
||||
url: ext.contextPath + '/work/mpoint/getValue.do?unitId=' + unitId + '&mpointCode=' + mpointCode,
|
||||
async: true,
|
||||
globle: false,
|
||||
error: function () {
|
||||
return false;
|
||||
},
|
||||
success: function (data) {
|
||||
if (data != null && data != '') {
|
||||
var data = eval('(' + data + ')');
|
||||
console.log(data);
|
||||
$('#' + valueId).html(data.parmvalue);//赋值
|
||||
if (data.unit == undefined) {
|
||||
$('#' + textId).html(data.parmname);//赋值名称
|
||||
} else {
|
||||
$('#' + textId).html(data.parmname + ' (' + data.unit + ')');//赋值名称+单位
|
||||
}
|
||||
}
|
||||
}
|
||||
});
|
||||
}
|
||||
|
||||
// /**
|
||||
// * echart饼图--通用 -- 新
|
||||
// */
|
||||
// function echartPie2(unitId, mpointCode, echartId, textId) {
|
||||
// var myChart = echarts.init(document.getElementById(echartId));
|
||||
// $.ajax({
|
||||
// type: 'GET',
|
||||
// url: ext.contextPath + '/work/mpoint/getValue4Es.do?unitId=' + unitId + '&mpointCode=' + mpointCode,
|
||||
// async: true,
|
||||
// globle: false,
|
||||
// error: function () {
|
||||
// return false;
|
||||
// },
|
||||
// success: function (data) {
|
||||
// if (data != null && data != '') {
|
||||
// var echart_minvalue = 0.2;
|
||||
// var echart_maxvalue = 0.8;
|
||||
|
||||
// // var data = eval('(' + data + ')');
|
||||
// //180度的上限
|
||||
// var maxvalue_20 = data.alarmmax * 1.2;
|
||||
// //0度的下限
|
||||
// var minvalue_20 = data.alarmmin - data.alarmmin * 0.2;
|
||||
|
||||
// var maxvalue = data.alarmmax;
|
||||
// var minvalue = data.alarmmin;
|
||||
|
||||
// //判断是否需要下限
|
||||
// if (data.alarmmin == null || data.alarmmin == '') {
|
||||
// minvalue_20 = 0;
|
||||
// minvalue = 0;
|
||||
// echart_minvalue = 0;
|
||||
// }
|
||||
|
||||
// var parmvalue = data.parmvalue;
|
||||
// var rate = 0;
|
||||
// var unit = '';
|
||||
|
||||
// $('#' + textId).html(data.parmname);
|
||||
|
||||
// if (data.unit != undefined && data.unit != null && data.unit != '') {
|
||||
// unit = '(' + data.unit + ')';
|
||||
// }
|
||||
|
||||
// //计算实际值比例
|
||||
// if (maxvalue_20 <= 1) {
|
||||
// minvalue_20 = minvalue_20 * 100;
|
||||
// maxvalue_20 = maxvalue_20 * 100;
|
||||
// parmvalue = parmvalue * 100;
|
||||
// minvalue = minvalue * 100;
|
||||
// maxvalue = maxvalue * 100;
|
||||
// if (maxvalue != undefined && minvalue != undefined) {
|
||||
// rate = parmvalue / (maxvalue_20 - minvalue_20) * 100;
|
||||
// } else {
|
||||
// rate = parmvalue;
|
||||
// }
|
||||
|
||||
// rate += 20;
|
||||
// } else {
|
||||
// if (maxvalue != undefined && minvalue != undefined) {
|
||||
// // rate = parmvalue / maxvalue_20 * 100;
|
||||
// rate = (parmvalue / maxvalue) * 0.8 * 100;
|
||||
// } else {
|
||||
// rate = parmvalue;
|
||||
// }
|
||||
// }
|
||||
|
||||
// //计算颜色
|
||||
// var colorStr = '#6C6C6C';
|
||||
// if (parmvalue < minvalue) {
|
||||
// colorStr = '#67e0e3';
|
||||
// } else if (parmvalue > maxvalue) {
|
||||
// colorStr = '#fd666d';
|
||||
// } else {
|
||||
// colorStr = '#37a2da';
|
||||
// // 37a2da
|
||||
// }
|
||||
|
||||
// console.log(data.parmname + '扩大下限：' + minvalue_20 + '------扩大上限：' + maxvalue_20 + '------实际比率：' + rate + '------实际值：' + parmvalue + '------实际下限：' + minvalue + '------实际上限：' + maxvalue);
|
||||
|
||||
// var option = {
|
||||
// toolbox: { //可视化的工具箱
|
||||
// show: false, feature: {
|
||||
// restore: { //重置
|
||||
// show: true
|
||||
// }, saveAsImage: {//保存图片
|
||||
// show: true
|
||||
// }
|
||||
// }
|
||||
// }, series: [{
|
||||
// name: '业务指标', type: 'gauge', startAngle: 180, endAngle: 0, radius: 70, center: ['50%', '80%'],//设置饼图位置
|
||||
// axisLine: {
|
||||
// show: true, // 属性lineStyle控制线条样式
|
||||
// lineStyle: {
|
||||
// width: 15, // color: [[0.2, '#e2e2e2'], [0.8, '#66d99f'], [maxvalue, '#f35a4a']]
|
||||
// color: [[echart_minvalue, '#67e0e3'], [echart_maxvalue, '#37a2da'], [maxvalue_20, '#fd666d']]
|
||||
// }
|
||||
// }, splitLine: {
|
||||
// show: false,
|
||||
// }, axisTick: {
|
||||
// show: false,
|
||||
// }, axisLabel: {
|
||||
// show: false,
|
||||
// }, pointer: {
|
||||
// length: '40px', width: '3px',
|
||||
// }, detail: {
|
||||
// offsetCenter: [0, '20%'], fontSize: 14, color: colorStr, //formatter: data.parmname,
|
||||
// formatter: data.parmvalue + unit//data.parmvalue为实际值 acvalue为计算后的比例
|
||||
// }, data: [{value: rate}]
|
||||
// }]
|
||||
// };
|
||||
// myChart.setOption(option);
|
||||
// myChart.resize();
|
||||
// }
|
||||
// }
|
||||
// });
|
||||
// }
|
||||
|
||||
/**
|
||||
* echart饼图--通用
|
||||
*/
|
||||
function echartPie1(unitId, mpointCode, echartId, textId) {
|
||||
function echartPie(unitId, mpointCode, echartId, textId) {
|
||||
var myChart = echarts.init(document.getElementById(echartId));
|
||||
$.ajax({
|
||||
type: 'GET',
|
||||
@ -316,153 +295,153 @@ function echartPie1(unitId, mpointCode, echartId, textId) {
|
||||
}
|
||||
|
||||
|
||||
/**
|
||||
* echart饼图--通用
|
||||
*/
|
||||
function echartPie(unitId, mpointCode, echartId, textId) {
|
||||
var myChart = echarts.init(document.getElementById(echartId));
|
||||
var data = {
|
||||
"confirmalarm": "0",
|
||||
"parmname": "进水PH",
|
||||
"signaltag": "",
|
||||
"soundalarm": "0",
|
||||
"remoteup": "0",
|
||||
"triggercycle": "0",
|
||||
"triggermutation": "0",
|
||||
"ledcolor": "1",
|
||||
"id": "D_JinSPH",
|
||||
"numtail": "0",
|
||||
"signaltype": "AI",
|
||||
"active": "启用",
|
||||
"flowset": 0,
|
||||
"unit": "mg/l",
|
||||
"sourceType": "auto",
|
||||
"mpointcode": "D_JinSPH",
|
||||
"triggerequoff": "0",
|
||||
"disname": "",
|
||||
"valuetype": "sql",
|
||||
"directtype": "1",
|
||||
"freq": 1,
|
||||
"morder": 999,
|
||||
"showname": "1",
|
||||
"rate": 1,
|
||||
"subscriptionStatus": 0,
|
||||
"mpointid": "D_JinSPH",
|
||||
"valuemeaning": "",
|
||||
"mathop": "*",
|
||||
"triggeralarm": "1",
|
||||
"equipmentid": "",
|
||||
"biztype": "",
|
||||
"parmvalue": 20,
|
||||
"alarmmax": 14,
|
||||
"alarmmin": 6,
|
||||
"ledtype": "1",
|
||||
"measuredt": "2026-03-11T18:20:27Z",
|
||||
"bizid": "0533JS"
|
||||
};
|
||||
// /**
|
||||
// * echart饼图--通用--新
|
||||
// */
|
||||
// function echartPie(unitId, mpointCode, echartId, textId) {
|
||||
// var myChart = echarts.init(document.getElementById(echartId));
|
||||
// var data = {
|
||||
// "confirmalarm": "0",
|
||||
// "parmname": "进水PH",
|
||||
// "signaltag": "",
|
||||
// "soundalarm": "0",
|
||||
// "remoteup": "0",
|
||||
// "triggercycle": "0",
|
||||
// "triggermutation": "0",
|
||||
// "ledcolor": "1",
|
||||
// "id": "D_JinSPH",
|
||||
// "numtail": "0",
|
||||
// "signaltype": "AI",
|
||||
// "active": "启用",
|
||||
// "flowset": 0,
|
||||
// "unit": "mg/l",
|
||||
// "sourceType": "auto",
|
||||
// "mpointcode": "D_JinSPH",
|
||||
// "triggerequoff": "0",
|
||||
// "disname": "",
|
||||
// "valuetype": "sql",
|
||||
// "directtype": "1",
|
||||
// "freq": 1,
|
||||
// "morder": 999,
|
||||
// "showname": "1",
|
||||
// "rate": 1,
|
||||
// "subscriptionStatus": 0,
|
||||
// "mpointid": "D_JinSPH",
|
||||
// "valuemeaning": "",
|
||||
// "mathop": "*",
|
||||
// "triggeralarm": "1",
|
||||
// "equipmentid": "",
|
||||
// "biztype": "",
|
||||
// "parmvalue": 20,
|
||||
// "alarmmax": 14,
|
||||
// "alarmmin": 6,
|
||||
// "ledtype": "1",
|
||||
// "measuredt": "2026-03-11T18:20:27Z",
|
||||
// "bizid": "0533JS"
|
||||
// };
|
||||
|
||||
|
||||
if (data != null && data != '') {
|
||||
var echart_minvalue = 0.2;
|
||||
var echart_maxvalue = 0.8;
|
||||
// if (data != null && data != '') {
|
||||
// var echart_minvalue = 0.2;
|
||||
// var echart_maxvalue = 0.8;
|
||||
|
||||
// var data = eval('(' + data + ')');
|
||||
//180度的上限
|
||||
var maxvalue_20 = data.alarmmax * 1.2;
|
||||
//0度的下限
|
||||
var minvalue_20 = data.alarmmin - data.alarmmin * 0.2;
|
||||
// // var data = eval('(' + data + ')');
|
||||
// //180度的上限
|
||||
// var maxvalue_20 = data.alarmmax * 1.2;
|
||||
// //0度的下限
|
||||
// var minvalue_20 = data.alarmmin - data.alarmmin * 0.2;
|
||||
|
||||
var maxvalue = data.alarmmax;
|
||||
var minvalue = data.alarmmin;
|
||||
// var maxvalue = data.alarmmax;
|
||||
// var minvalue = data.alarmmin;
|
||||
|
||||
//判断是否需要下限
|
||||
if (data.alarmmin == null || data.alarmmin == '') {
|
||||
minvalue_20 = 0;
|
||||
minvalue = 0;
|
||||
echart_minvalue = 0;
|
||||
}
|
||||
// //判断是否需要下限
|
||||
// if (data.alarmmin == null || data.alarmmin == '') {
|
||||
// minvalue_20 = 0;
|
||||
// minvalue = 0;
|
||||
// echart_minvalue = 0;
|
||||
// }
|
||||
|
||||
var parmvalue = data.parmvalue;
|
||||
var rate = 0;
|
||||
var unit = '';
|
||||
// var parmvalue = data.parmvalue;
|
||||
// var rate = 0;
|
||||
// var unit = '';
|
||||
|
||||
$('#' + textId).html(data.parmname);
|
||||
// $('#' + textId).html(data.parmname);
|
||||
|
||||
if (data.unit != undefined && data.unit != null && data.unit != '') {
|
||||
unit = '(' + data.unit + ')';
|
||||
}
|
||||
// if (data.unit != undefined && data.unit != null && data.unit != '') {
|
||||
// unit = '(' + data.unit + ')';
|
||||
// }
|
||||
|
||||
//计算实际值比例
|
||||
if (maxvalue_20 <= 1) {
|
||||
minvalue_20 = minvalue_20 * 100;
|
||||
maxvalue_20 = maxvalue_20 * 100;
|
||||
parmvalue = parmvalue * 100;
|
||||
minvalue = minvalue * 100;
|
||||
maxvalue = maxvalue * 100;
|
||||
if (maxvalue != undefined && minvalue != undefined) {
|
||||
rate = parmvalue / (maxvalue_20 - minvalue_20) * 100;
|
||||
} else {
|
||||
rate = parmvalue;
|
||||
}
|
||||
// //计算实际值比例
|
||||
// if (maxvalue_20 <= 1) {
|
||||
// minvalue_20 = minvalue_20 * 100;
|
||||
// maxvalue_20 = maxvalue_20 * 100;
|
||||
// parmvalue = parmvalue * 100;
|
||||
// minvalue = minvalue * 100;
|
||||
// maxvalue = maxvalue * 100;
|
||||
// if (maxvalue != undefined && minvalue != undefined) {
|
||||
// rate = parmvalue / (maxvalue_20 - minvalue_20) * 100;
|
||||
// } else {
|
||||
// rate = parmvalue;
|
||||
// }
|
||||
|
||||
rate += 20;
|
||||
} else {
|
||||
if (maxvalue != undefined && minvalue != undefined) {
|
||||
// rate = parmvalue / maxvalue_20 * 100;
|
||||
rate = (parmvalue / maxvalue) * 0.8 * 100;
|
||||
} else {
|
||||
rate = parmvalue;
|
||||
}
|
||||
}
|
||||
// rate += 20;
|
||||
// } else {
|
||||
// if (maxvalue != undefined && minvalue != undefined) {
|
||||
// // rate = parmvalue / maxvalue_20 * 100;
|
||||
// rate = (parmvalue / maxvalue) * 0.8 * 100;
|
||||
// } else {
|
||||
// rate = parmvalue;
|
||||
// }
|
||||
// }
|
||||
|
||||
//计算颜色
|
||||
var colorStr = '#6C6C6C';
|
||||
if (parmvalue < minvalue) {
|
||||
colorStr = '#67e0e3';
|
||||
} else if (parmvalue > maxvalue) {
|
||||
colorStr = '#fd666d';
|
||||
} else {
|
||||
colorStr = '#37a2da';
|
||||
// 37a2da
|
||||
}
|
||||
// //计算颜色
|
||||
// var colorStr = '#6C6C6C';
|
||||
// if (parmvalue < minvalue) {
|
||||
// colorStr = '#67e0e3';
|
||||
// } else if (parmvalue > maxvalue) {
|
||||
// colorStr = '#fd666d';
|
||||
// } else {
|
||||
// colorStr = '#37a2da';
|
||||
// // 37a2da
|
||||
// }
|
||||
|
||||
console.log(data.parmname + '扩大下限：' + minvalue_20 + '------扩大上限：' + maxvalue_20 + '------实际比率：' + rate + '------实际值：' + parmvalue + '------实际下限：' + minvalue + '------实际上限：' + maxvalue);
|
||||
// console.log(data.parmname + '扩大下限：' + minvalue_20 + '------扩大上限：' + maxvalue_20 + '------实际比率：' + rate + '------实际值：' + parmvalue + '------实际下限：' + minvalue + '------实际上限：' + maxvalue);
|
||||
|
||||
var option = {
|
||||
toolbox: { //可视化的工具箱
|
||||
show: false, feature: {
|
||||
restore: { //重置
|
||||
show: true
|
||||
}, saveAsImage: {//保存图片
|
||||
show: true
|
||||
}
|
||||
}
|
||||
}, series: [{
|
||||
name: '业务指标', type: 'gauge', startAngle: 180, endAngle: 0, radius: 70, center: ['50%', '80%'],//设置饼图位置
|
||||
axisLine: {
|
||||
show: true, // 属性lineStyle控制线条样式
|
||||
lineStyle: {
|
||||
width: 15, // color: [[0.2, '#e2e2e2'], [0.8, '#66d99f'], [maxvalue, '#f35a4a']]
|
||||
color: [[echart_minvalue, '#67e0e3'], [echart_maxvalue, '#37a2da'], [maxvalue_20, '#fd666d']]
|
||||
}
|
||||
}, splitLine: {
|
||||
show: false,
|
||||
}, axisTick: {
|
||||
show: false,
|
||||
}, axisLabel: {
|
||||
show: false,
|
||||
}, pointer: {
|
||||
length: '40px', width: '3px',
|
||||
}, detail: {
|
||||
offsetCenter: [0, '20%'], fontSize: 14, color: colorStr, //formatter: data.parmname,
|
||||
formatter: data.parmvalue + unit//data.parmvalue为实际值 acvalue为计算后的比例
|
||||
}, data: [{value: rate}]
|
||||
}]
|
||||
};
|
||||
myChart.setOption(option);
|
||||
myChart.resize();
|
||||
}
|
||||
}
|
||||
// var option = {
|
||||
// toolbox: { //可视化的工具箱
|
||||
// show: false, feature: {
|
||||
// restore: { //重置
|
||||
// show: true
|
||||
// }, saveAsImage: {//保存图片
|
||||
// show: true
|
||||
// }
|
||||
// }
|
||||
// }, series: [{
|
||||
// name: '业务指标', type: 'gauge', startAngle: 180, endAngle: 0, radius: 70, center: ['50%', '80%'],//设置饼图位置
|
||||
// axisLine: {
|
||||
// show: true, // 属性lineStyle控制线条样式
|
||||
// lineStyle: {
|
||||
// width: 15, // color: [[0.2, '#e2e2e2'], [0.8, '#66d99f'], [maxvalue, '#f35a4a']]
|
||||
// color: [[echart_minvalue, '#67e0e3'], [echart_maxvalue, '#37a2da'], [maxvalue_20, '#fd666d']]
|
||||
// }
|
||||
// }, splitLine: {
|
||||
// show: false,
|
||||
// }, axisTick: {
|
||||
// show: false,
|
||||
// }, axisLabel: {
|
||||
// show: false,
|
||||
// }, pointer: {
|
||||
// length: '40px', width: '3px',
|
||||
// }, detail: {
|
||||
// offsetCenter: [0, '20%'], fontSize: 14, color: colorStr, //formatter: data.parmname,
|
||||
// formatter: data.parmvalue + unit//data.parmvalue为实际值 acvalue为计算后的比例
|
||||
// }, data: [{value: rate}]
|
||||
// }]
|
||||
// };
|
||||
// myChart.setOption(option);
|
||||
// myChart.resize();
|
||||
// }
|
||||
// }
|
||||
|
||||
/**
|
||||
* echart折线图--单点
|
||||
|
||||
Reference in New Issue
Block a user