chenglb
/
PMS_Frontend_v1.0.0
1
0
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity
Browse Source

fix(): 解决实时收入数据缺失时的问题

tags/PMS_V1.0.0_Alpha5
chenqiang 1 year ago
parent
7fe7cb1eb4
commit
4ff665e1ef
1 changed files with 109 additions and 22 deletions
Whitespace
Show all changes Ignore whitespace when comparing lines Ignore changes in amount of whitespace Ignore changes in whitespace at EOL
Split View
Diff Options
Show Stats Download Patch File Download Diff File
  1. 131
      src/pages/DataAnalysisPrediction/ParkingOverview/loadable.jsx

131
src/pages/DataAnalysisPrediction/ParkingOverview/loadable.jsx
View File

@ -60,6 +60,11 @@ const ParkingOverview = connect(function mapStateToProps(state) {
};
})((props) => {
const navigate = useNavigate();
let isSelected;
let isHovered;
let startRatio;
let endRatio;
let k;
let hoveredIndex = "";
//地图数据展示is
const MapS = [
@ -628,7 +633,7 @@ const ParkingOverview = connect(function mapStateToProps(state) {
return 0;
}
}
const getPie3D = (pieData, internalDiameterRatio) => {
const getPie3D = (pieData, bool) => {
//internalDiameterRatio:透明的空心占比
let series = [];
let sumValue = 0;
@ -710,9 +715,43 @@ const ParkingOverview = connect(function mapStateToProps(state) {
legendData.push(series[i].name);
}
// 补充一个透明的圆环，用于支撑高亮功能的近似实现。
let boxHeight = getHeight3D(series, 25); //通过传参设定3d饼/环的高度，26代表26px
// 准备待返回的配置项，把准备好的 legendData、series 传入。
// series.push({
// name: "mouseoutSeries",
// type: "surface",
// parametric: true,
// wireframe: {
// show: false,
// },
// itemStyle: {
// opacity: 0,
// },
// parametricEquation: {
// u: {
// min: 0,
// max: Math.PI * 2,
// step: Math.PI / 20,
// },
// v: {
// min: 0,
// max: Math.PI,
// step: Math.PI / 20,
// },
// x: function (u, v) {
// return Math.sin(v) * Math.sin(u) + Math.sin(u);
// },
// y: function (u, v) {
// return Math.sin(v) * Math.cos(u) + Math.cos(u);
// },
// z: function (u, v) {
// return Math.cos(v) > 0 ? 0.1 : -0.1;
// },
// },
// });
let option = {
// backgroundColor: "#203598",
// labelLine: {
@ -751,6 +790,26 @@ const ParkingOverview = connect(function mapStateToProps(state) {
},
tooltip: {
backgroundColor: "#fff",
// formatter: (params) => {
// if (
// params.seriesName !== "mouseoutSeries" &&
// params.seriesName !== "pie2d"
// ) {
// let bfb = (
// (option.series[params.seriesIndex].pieData.endRatio -
// option.series[params.seriesIndex].pieData.startRatio) *
// 100
// ).toFixed(2);
// if (bfb == "NaN") {
// bfb = 0;
// }
// return (
// `${params.seriesName}<br/>` +
// `<span style="display:inline-block;margin-right:5px;border-radius:10px;width:10px;height:10px;background-color:${params.color};"></span>` +
// `${bfb}%`
// );
// }
// },
formatter: (params) => {
if (
params.seriesName !== "mouseoutSeries" &&
@ -761,13 +820,23 @@ const ParkingOverview = connect(function mapStateToProps(state) {
option.series[params.seriesIndex].pieData.startRatio) *
100
).toFixed(2);
return (
`${params.seriesName}<br/>` +
`<span style="display:inline-block;margin-right:5px;border-radius:10px;width:10px;height:10px;background-color:${params.color};"></span>` +
`${bfb}%`
);
if (bfb == "NaN") {
bfb = 0;
}
if (params.seriesName !== "mouseoutSeries") {
return `<div class="pojj">${params.seriesName}
<br/>${params.marker} ${
bool ? "0" : option.series[params.seriesIndex].pieData.value
}元 ${bfb}%
</div>`;
}
}
},
rich: {
a: {
color: "#FFF",
},
},
},
xAxis3D: {
min: -1,
@ -806,6 +875,12 @@ const ParkingOverview = connect(function mapStateToProps(state) {
series.sort((a, b) => {
return b.pieData.value - a.pieData.value;
});
if ((height * 25) / series[0].pieData.value > 30) {
return 30;
}
// if (!(height * 25) / series[0].pieData.value > 30) {
// return 20;
// }
return (height * 25) / series[0].pieData.value;
};
@ -888,17 +963,10 @@ const ParkingOverview = connect(function mapStateToProps(state) {
// 从 option.series 中读取重新渲染扇形所需的参数，将是否选中取反。
// 准备重新渲染扇形所需的参数
let option = RightTwo;
console.log(option);
let isSelected;
let isHovered;
let startRatio;
let endRatio;
let k;
// 如果触发 mouseover 的扇形当前已高亮，则不做操作
if (hoveredIndex === params.seriesIndex) {
return;
// 否则进行高亮及必要的取消高亮操作
} else {
// 如果当前有高亮的扇形，取消其高亮状态（对 option 更新）
@ -922,7 +990,7 @@ const ParkingOverview = connect(function mapStateToProps(state) {
);
option.series[hoveredIndex].pieStatus.hovered = isHovered;
// 将此前记录的上次选中的扇形对应的系列号 seriesIndex 重置
// 将此前记录的上次选中的扇形对应的系列号 seriesIndex 清空
hoveredIndex = "";
}
@ -952,8 +1020,8 @@ const ParkingOverview = connect(function mapStateToProps(state) {
}
// 使用更新后的 option，渲染图表
setRightTwo(option);
}
setRightTwo(option);
},
globalout: (params) => {
// 从 option.series 中读取重新渲染扇形所需的参数，将是否选中取反。
@ -961,11 +1029,11 @@ const ParkingOverview = connect(function mapStateToProps(state) {
let option = RightTwo;
if (hoveredIndex !== "") {
// 从 option.series 中读取重新渲染扇形所需的参数，将是否高亮设置为 true。
let isSelected = option.series[hoveredIndex].pieStatus.selected;
let isHovered = false;
let k = option.series[hoveredIndex].pieStatus.k;
let startRatio = option.series[hoveredIndex].pieData.startRatio;
let endRatio = option.series[hoveredIndex].pieData.endRatio;
isSelected = option.series[hoveredIndex].pieStatus.selected;
isHovered = false;
k = option.series[hoveredIndex].pieStatus.k;
startRatio = option.series[hoveredIndex].pieData.startRatio;
endRatio = option.series[hoveredIndex].pieData.endRatio;
// 对当前点击的扇形，执行取消高亮操作（对 option 更新）
option.series[hoveredIndex].parametricEquation = getParametricEquation(
@ -978,7 +1046,7 @@ const ParkingOverview = connect(function mapStateToProps(state) {
);
option.series[hoveredIndex].pieStatus.hovered = isHovered;
// 将此前记录的上次选中的扇形对应的系列号 seriesIndex 重置
// 将此前记录的上次选中的扇形对应的系列号 seriesIndex 清空
hoveredIndex = "";
}
// 使用更新后的 option，渲染图表
@ -995,8 +1063,12 @@ const ParkingOverview = connect(function mapStateToProps(state) {
]
) => {
// 获取所有地区名称
let bfg = true;
const data =
datas.map((ele) => {
if (ele.value != 0) {
bfg = false;
}
return {
name: ele.key,
value: ele.value,
@ -1004,8 +1076,23 @@ const ParkingOverview = connect(function mapStateToProps(state) {
endRatio: 1,
};
}) || [];
let option;
if (bfg) {
//全为0
option = getPie3D(
data.map((ele) => {
return {
...ele,
value: 1,
};
}),
true
);
} else {
//全不为0
option = getPie3D(data, false);
}
let option = getPie3D(data, 0.8);
// 是否需要label指引线，如果要就添加一个透明的2d饼状图并调整角度使得labelLine和3d的饼状图对齐，并再次setOption
option.series.push({
// name: "pie2d",

Write Preview
Loading…
Cancel
Save