diff --git a/src/pages/DataAnalysisPrediction/ParkingOverview/loadable.jsx b/src/pages/DataAnalysisPrediction/ParkingOverview/loadable.jsx
index 52b7d2f..e408dc6 100644
--- a/src/pages/DataAnalysisPrediction/ParkingOverview/loadable.jsx
+++ b/src/pages/DataAnalysisPrediction/ParkingOverview/loadable.jsx
@@ -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}
` +
+ // `` +
+ // `${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}
` +
- `` +
- `${bfb}%`
- );
+ if (bfb == "NaN") {
+ bfb = 0;
+ }
+ if (params.seriesName !== "mouseoutSeries") {
+ return `${params.seriesName}
+
${params.marker} ${
+ bool ? "0" : option.series[params.seriesIndex].pieData.value
+ }元 ${bfb}%
+
`;
+ }
}
},
+ 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",