// 数据请求传参
getListData(getSearchParamObj());
function getListData(queryParam = {}) {
ajaxRequest(WATER_DATA, "POST", queryParam, function(result) {
if (result.RESULT) {
//数据统计
var data_statistics = result.RESULT[0].data_statistics;
$('.total').html(data_statistics.alarm_number);
$('.solved').html(data_statistics.processing_number);
$('.unsolve').html(data_statistics.unprocessed_number);
// 环状饼图定制 (数据统计计算)
(function() {
// 实例化对象
var myChart = echarts.init(document.querySelector(".bar-3d .chart"));
// 生成扇形的曲面参数方程,用于 series-surface.parametricEquation
function getParametricEquation(startRatio, endRatio, isSelected, isHovered, k, height) {
// 计算
let midRatio = (startRatio + endRatio) / 2;
let startRadian = startRatio * Math.PI * 2;
let endRadian = endRatio * Math.PI * 2;
let midRadian = midRatio * Math.PI * 2;
// 如果只有一个扇形,则不实现选中效果。
if (startRatio === 0 && endRatio === 1) {
isSelected = false;
}
// 通过扇形内径/外径的值,换算出辅助参数 k(默认值 1/3)
k = typeof k !== 'undefined' ? k : 1 / 3;
// 计算选中效果分别在 x 轴、y 轴方向上的位移(未选中,则位移均为 0)
let offsetX = isSelected ? Math.cos(midRadian) * 0.1 : 0;
let offsetY = isSelected ? Math.sin(midRadian) * 0.1 : 0;
// 计算高亮效果的放大比例(未高亮,则比例为 1)
let hoverRate = isHovered ? 1.05 : 1;
// 返回曲面参数方程
return {
u: {
min: -Math.PI,
max: Math.PI * 3,
step: Math.PI / 32
},
v: {
min: 0,
max: Math.PI * 2,
step: Math.PI / 20
},
x: function(u, v) {
if (u < startRadian) {
return offsetX + Math.cos(startRadian) * (1 + Math.cos(v) * k) * hoverRate;
}
if (u > endRadian) {
return offsetX + Math.cos(endRadian) * (1 + Math.cos(v) * k) * hoverRate;
}
return offsetX + Math.cos(u) * (1 + Math.cos(v) * k) * hoverRate;
},
y: function(u, v) {
if (u < startRadian) {
return offsetY + Math.sin(startRadian) * (1 + Math.cos(v) * k) * hoverRate;
}
if (u > endRadian) {
return offsetY + Math.sin(endRadian) * (1 + Math.cos(v) * k) * hoverRate;
}
return offsetY + Math.sin(u) * (1 + Math.cos(v) * k) * hoverRate;
},
z: function(u, v) {
if (u < -Math.PI * 0.5) {
return Math.sin(u);
}
if (u > Math.PI * 2.5) {
return Math.sin(u);
}
return Math.sin(v) > 0 ? 1 : -1;
}
};
}
// 生成模拟 3D 饼图的配置项
function getPie3D(pieData, internalDiameterRatio) {
let series = [];
let sumValue = 0;
let startValue = 0;
let endValue = 0;
let legendData = [];
let k = typeof internalDiameterRatio !== 'undefined' ? (1 - internalDiameterRatio) / (1 + internalDiameterRatio) : 1 / 3;
// 为每一个饼图数据,生成一个 series-surface 配置
for (let i = 0; i < pieData.length; i++) {
sumValue += pieData[i].value;
let seriesItem = {
name: typeof pieData[i].name === 'undefined' ? `series${i}` : pieData[i].name,
type: 'surface',
parametric: true,
wireframe: {
show: false
},
pieData: pieData[i],
pieStatus: {
selected: false,
hovered: false,
k: k
}
};
if (typeof pieData[i].itemStyle != 'undefined') {
let itemStyle = {};
typeof pieData[i].itemStyle.color != 'undefined' ? itemStyle.color = pieData[i].itemStyle.color : null;
typeof pieData[i].itemStyle.opacity != 'undefined' ? itemStyle.opacity = pieData[i].itemStyle.opacity : null;
seriesItem.itemStyle = itemStyle;
}
series.push(seriesItem);
}
// 使用上一次遍历时,计算出的数据和 sumValue,调用 getParametricEquation 函数,
// 向每个 series-surface 传入不同的参数方程 series-surface.parametricEquation,也就是实现每一个扇形。
for (let i = 0; i < series.length; i++) {
endValue = startValue + series[i].pieData.value;
// console.log(series[i]);
series[i].pieData.startRatio = startValue / sumValue;
series[i].pieData.endRatio = endValue / sumValue;
series[i].parametricEquation = getParametricEquation(series[i].pieData.startRatio, series[i].pieData.endRatio, false, false, k, series[i].pieData.value);
startValue = endValue;
legendData.push(series[i].name);
}
// 准备待返回的配置项,把准备好的 legendData、series 传入。
let option = {
tooltip: {
backgroundColor: '#12DFE0',
formatter: params => {
if (params.seriesName !== 'mouseoutSeries') {
// return `${params.seriesName}
${option.series[params.seriesIndex].pieData.value}%`;
return `${params.seriesName}: ${option.series[params.seriesIndex].pieData.value}%`;
}
}
},
xAxis3D: {
min: -1,
max: 1
},
yAxis3D: {
min: -1,
max: 1
},
zAxis3D: {
min: -1,
max: 1
},
grid3D: {
show: false,
boxHeight: 40,
top: '-10%',
// bottom: '80%',
// environment: '../images/3d-bg.png', //aa背景色
viewControl: {
distance: 170, //aa距离
alpha: 21, //aa角度
beta: 60, //aa角度
zoomSensitivity: false //是否开启缩放和平移
},
},
series: series
};
return option;
}
// 传入数据生成 option
var option = getPie3D([{
name: '已处理率',
value: data_statistics.treatment_rate,
itemStyle: {
opacity: 0.5,
color: 'rgba(0,127,244,.8)',
}
}, {
name: '未处理率',
value: data_statistics.untreated_rate,
itemStyle: {
opacity: 0.5,
color: 'rgba(209,126,23,.8)',
}
}], 2);
// 把配置给实例对象
myChart.setOption(option);
window.addEventListener("resize", function() {
myChart.resize();
});
})();
// 折线图定制 (数据离散率挖掘)
(function() {
let dispersion_rate = result.RESULT[0].dispersion_rate;
// 结论数据渲染
var items = '';
var conclusion = dispersion_rate.conclusion
for (x in conclusion) {
xIndex = x.substr(x.length - 1, 1);
items += `
${xIndex}、${conclusion[x]}
` } $('.divergence .summaryDetail').html(items); let a = []; let b = []; let c = []; let hydraulic_pressure = dispersion_rate.hydraulic_pressure; hydraulic_pressure.forEach(function(item, index) { a.push(item.variance) b.push(item.standard_deviation) c.push(item.average_value) }); var sortData = [{ data: [a, b, c] }]; var xData = function() { var data = []; for (var i = 1; i < hydraulic_pressure.length + 1; i++) { data.push(i); } return data; }(); // 1. 实例化对象 var myChart = echarts.init(document.querySelector(".divergence .chart")); // 2.指定配置 var option = { color: [{ colorStops: [{ offset: 0, color: '#F9860C' // 0% 处的颜色 }, { offset: 1, color: '#fff' // 100% 处的颜色 }], }, { colorStops: [{ offset: 0, color: '#07E1F1' // 0% 处的颜色 }, { offset: 1, color: '#0456CB' // 100% 处的颜色 }], }, { colorStops: [{ offset: 0, color: '#11F90C' // 0% 处的颜色 }, { offset: 1, color: '#3FC713' // 100% 处的颜色 }], } ], tooltip: { trigger: "axis", textStyle: { align: 'left' //图例左对齐 }, backgroundColor: '#12DFE0', formatter: '{a0}: {c0}${xIndex}、${conclusion[x]}
` } $('.hiddenCheck .summaryDetail').html(items); let abnormal_pressure = []; let location_description = []; let start_pressure = []; let end_pressure = []; let leakage_data = leakage_investigation.leakage_data; leakage_data.forEach(function(item, index) { //异常值 abnormal_pressure.push(item.abnormal_pressure) //楼层 location_description.push(item.location_description) //开始值 start_pressure.push(item.start_pressure) //结束值 end_pressure.push(item.end_pressure) }); var xData = location_description; // 基于准备好的dom,初始化echarts实例 var myChart = echarts.init(document.querySelector(".bar.hiddenCheck .chart")); var option = { backgroundColor: 'transparent', color: ['rgba(0,150,255,.5)', 'rgba(255,156,0,.5)'], tooltip: { backgroundColor: '#12DFE0', //提示框组件 trigger: 'axis', formatter: function(params) { // console.log(params) var res = '位置:' + params[0].axisValue + '${xIndex}、${conclusion[x]}
` } $('.device_association .summaryDetail').html(items); // 喷淋末端、消火栓与水泵启停关联 let spray_end = []; let fire_hydrant = []; let pump_status = [] let pump_associated_data = device_association.pump_associated_data; pump_associated_data.forEach(function(item, index) { spray_end.push(item.spray_end) fire_hydrant.push(item.fire_hydrant) pump_status.push(item.pump_status) }); // 喷淋末端、消火栓屋顶水箱液位关联 let spray_end2 = []; let fire_hydrant2 = []; let water_tank_level = [] let water_associated_data = device_association.water_associated_data; water_associated_data.forEach(function(item, index) { spray_end2.push(item.spray_end) fire_hydrant2.push(item.fire_hydrant) water_tank_level.push(item.water_tank_level) }); var sortData = [{ sortName: "喷淋末端、消火栓与水泵启停关联", data: [ spray_end, fire_hydrant ] }, { sortName: "喷淋末端、消火栓屋顶水箱液位关联", data: [ spray_end2, fire_hydrant2 ] } ]; var xData = function() { var data = []; for (var i = 1; i < water_associated_data.length + 1; i++) { data.push(i); } return data; }(); // 1. 实例化对象 var myChart = echarts.init(document.querySelector(".device_association .chart")); // 2.指定配置 var option = { color: ["#FF9C00", "#0096FF"], // 通过这个color修改两条线的颜色 tooltip: { trigger: "axis", textStyle: { align: 'left' //图例左对齐 }, backgroundColor: '#12DFE0', formatter: function(params) { if ($('#active').hasClass('active')) { var res = params[0].seriesName + ':' + params[0].value + '${xIndex}、${conclusion[x]}
` } $('.data_fluctuation .summaryDetail').html(items); let position = []; let before_fluctuation = []; let after_fluctuation = []; let volatility_data = data_fluctuation.volatility_data; volatility_data.forEach(function(item, index) { //楼层 position.push(item.position) //开始值 before_fluctuation.push(item.before_fluctuation) //结束值 after_fluctuation.push(item.after_fluctuation) }); // 1. 实例化对象 var myChart = echarts.init(document.querySelector(".data_fluctuation .chart")); var xData = position; // 2.指定配置 var option = { backgroundColor: 'transparent', color: ['rgba(0,150,255,.5)', 'rgba(255,156,0,.5)'], tooltip: { backgroundColor: '#12DFE0', //提示框组件 trigger: 'axis', formatter: '{a0}: {c0}