diff --git a/src/views/pictureOnMap/page/DrainageSystem/YSIndex.vue b/src/views/pictureOnMap/page/DrainageSystem/YSIndex.vue index ca12460..11b5504 100644 --- a/src/views/pictureOnMap/page/DrainageSystem/YSIndex.vue +++ b/src/views/pictureOnMap/page/DrainageSystem/YSIndex.vue @@ -787,7 +787,7 @@ AllData.refresh1++; AllData.TjData1 = res.data.pipelinePointCount .reduce((accu, curren) => Number(accu) + Number(curren)) - .toFixed(2); + .toFixed(0); AllData.TjData1Unit = "个"; } if (AllData.regionGrade == "four") { @@ -926,25 +926,25 @@ res.data.forEach((element) => { XData.push(element.lakeName); data1.push(element.nowWaterlevel); - data2.push(element.fortifyWaterlevel); + data2.push(element.bestPromitWaterlevel); data3.push(element.volume); }); AllData.chartData1.xAxis = XData; //X轴数据 - AllData.chartData1.y1_Unit = "m"; //Y轴单位 - AllData.chartData1.y2_Unit = "万方"; //2号Y轴单位 + AllData.chartData1.y1_Unit = "万方"; //Y轴单位 + AllData.chartData1.y2_Unit = "m"; //2号Y轴单位 AllData.chartData1.y2_show = true; //是否展示右侧的2号轴 AllData.chartData1.yAxis1_bar = data3; //数据1 AllData.chartData1.yAxis1_bar_Name = "库容量"; //数据1的名称 - AllData.chartData1.yAxis1_bar_index = 1; + AllData.chartData1.yAxis1_bar_index = 0; AllData.chartData1.yAxis2_bar = null; //数据2 AllData.chartData1.yAxis2_bar_Name = ""; //数据1的名称 AllData.chartData1.yAxis2_bar_index = 0; AllData.chartData1.yAxis2_line = data2; AllData.chartData1.yAxis2_line_Name = "控制水位"; - AllData.chartData1.yAxis2_line_Index = 0; + AllData.chartData1.yAxis2_line_Index = 1; AllData.chartData1.yAxis3_line = data1; AllData.chartData1.yAxis3_line_Name = "当前水位"; - AllData.chartData1.yAxis3_line_Index = 0; + AllData.chartData1.yAxis3_line_Index = 1; AllData.refresh1++; AllData.TjData1 = null; AllData.TjData1Unit = null; @@ -1080,6 +1080,8 @@ yAxis3_line_Index: 0, }; AllData.refresh1++; + AllData.TjData1 = null; + AllData.TjData1Unit = null; AllData.chartData3 = { xAxis: [], //X轴数据 y1_Unit: "", //Y轴单位 @@ -1099,6 +1101,8 @@ yAxis3_line_Index: 0, }; AllData.refresh3++; + AllData.TjData3 = null; + AllData.TjData3Unit = null; AllData.chartData2 = { xAxis: [], yAxis: [], @@ -1108,6 +1112,8 @@ y1_Unit: "km", }; AllData.refresh2++; + AllData.TjData2 = null; + AllData.TjData2Unit = null; }; onMounted(() => { let initeGLTimer = setInterval(() => { diff --git a/src/views/pictureOnMap/page/DrainageSystem/YSIndex.vue b/src/views/pictureOnMap/page/DrainageSystem/YSIndex.vue index ca12460..11b5504 100644 --- a/src/views/pictureOnMap/page/DrainageSystem/YSIndex.vue +++ b/src/views/pictureOnMap/page/DrainageSystem/YSIndex.vue @@ -787,7 +787,7 @@ AllData.refresh1++; AllData.TjData1 = res.data.pipelinePointCount .reduce((accu, curren) => Number(accu) + Number(curren)) - .toFixed(2); + .toFixed(0); AllData.TjData1Unit = "个"; } if (AllData.regionGrade == "four") { @@ -926,25 +926,25 @@ res.data.forEach((element) => { XData.push(element.lakeName); data1.push(element.nowWaterlevel); - data2.push(element.fortifyWaterlevel); + data2.push(element.bestPromitWaterlevel); data3.push(element.volume); }); AllData.chartData1.xAxis = XData; //X轴数据 - AllData.chartData1.y1_Unit = "m"; //Y轴单位 - AllData.chartData1.y2_Unit = "万方"; //2号Y轴单位 + AllData.chartData1.y1_Unit = "万方"; //Y轴单位 + AllData.chartData1.y2_Unit = "m"; //2号Y轴单位 AllData.chartData1.y2_show = true; //是否展示右侧的2号轴 AllData.chartData1.yAxis1_bar = data3; //数据1 AllData.chartData1.yAxis1_bar_Name = "库容量"; //数据1的名称 - AllData.chartData1.yAxis1_bar_index = 1; + AllData.chartData1.yAxis1_bar_index = 0; AllData.chartData1.yAxis2_bar = null; //数据2 AllData.chartData1.yAxis2_bar_Name = ""; //数据1的名称 AllData.chartData1.yAxis2_bar_index = 0; AllData.chartData1.yAxis2_line = data2; AllData.chartData1.yAxis2_line_Name = "控制水位"; - AllData.chartData1.yAxis2_line_Index = 0; + AllData.chartData1.yAxis2_line_Index = 1; AllData.chartData1.yAxis3_line = data1; AllData.chartData1.yAxis3_line_Name = "当前水位"; - AllData.chartData1.yAxis3_line_Index = 0; + AllData.chartData1.yAxis3_line_Index = 1; AllData.refresh1++; AllData.TjData1 = null; AllData.TjData1Unit = null; @@ -1080,6 +1080,8 @@ yAxis3_line_Index: 0, }; AllData.refresh1++; + AllData.TjData1 = null; + AllData.TjData1Unit = null; AllData.chartData3 = { xAxis: [], //X轴数据 y1_Unit: "", //Y轴单位 @@ -1099,6 +1101,8 @@ yAxis3_line_Index: 0, }; AllData.refresh3++; + AllData.TjData3 = null; + AllData.TjData3Unit = null; AllData.chartData2 = { xAxis: [], yAxis: [], @@ -1108,6 +1112,8 @@ y1_Unit: "km", }; AllData.refresh2++; + AllData.TjData2 = null; + AllData.TjData2Unit = null; }; onMounted(() => { let initeGLTimer = setInterval(() => { diff --git a/src/views/pictureOnMap/page/DrainageSystem/components/DraBarCharts2Y.vue b/src/views/pictureOnMap/page/DrainageSystem/components/DraBarCharts2Y.vue index e421b34..bf8b7b4 100644 --- a/src/views/pictureOnMap/page/DrainageSystem/components/DraBarCharts2Y.vue +++ b/src/views/pictureOnMap/page/DrainageSystem/components/DraBarCharts2Y.vue @@ -128,6 +128,7 @@ // return value.toFixed(2); // 保留两位小数 // }, }, + max: Math.ceil(Math.max.apply(null, props.data.yAxis1_bar) * 1.2), nameTextStyle: { color: "#AAC1CF", }, @@ -197,7 +198,7 @@ color: "#2161a8", }, }, - // alignTicks: true, + alignTicks: true, position: "right", offset: 0, }); @@ -226,6 +227,17 @@ return value + unit; }, }, + + label: { + show: true, + position: "top", + valueAnimation: true, + color: "inherit", + fontSize: 12, + formatter: (params) => { + return params.value; + }, + }, }, { name: props.data.yAxis1_bar_Name, diff --git a/src/views/pictureOnMap/page/DrainageSystem/YSIndex.vue b/src/views/pictureOnMap/page/DrainageSystem/YSIndex.vue index ca12460..11b5504 100644 --- a/src/views/pictureOnMap/page/DrainageSystem/YSIndex.vue +++ b/src/views/pictureOnMap/page/DrainageSystem/YSIndex.vue @@ -787,7 +787,7 @@ AllData.refresh1++; AllData.TjData1 = res.data.pipelinePointCount .reduce((accu, curren) => Number(accu) + Number(curren)) - .toFixed(2); + .toFixed(0); AllData.TjData1Unit = "个"; } if (AllData.regionGrade == "four") { @@ -926,25 +926,25 @@ res.data.forEach((element) => { XData.push(element.lakeName); data1.push(element.nowWaterlevel); - data2.push(element.fortifyWaterlevel); + data2.push(element.bestPromitWaterlevel); data3.push(element.volume); }); AllData.chartData1.xAxis = XData; //X轴数据 - AllData.chartData1.y1_Unit = "m"; //Y轴单位 - AllData.chartData1.y2_Unit = "万方"; //2号Y轴单位 + AllData.chartData1.y1_Unit = "万方"; //Y轴单位 + AllData.chartData1.y2_Unit = "m"; //2号Y轴单位 AllData.chartData1.y2_show = true; //是否展示右侧的2号轴 AllData.chartData1.yAxis1_bar = data3; //数据1 AllData.chartData1.yAxis1_bar_Name = "库容量"; //数据1的名称 - AllData.chartData1.yAxis1_bar_index = 1; + AllData.chartData1.yAxis1_bar_index = 0; AllData.chartData1.yAxis2_bar = null; //数据2 AllData.chartData1.yAxis2_bar_Name = ""; //数据1的名称 AllData.chartData1.yAxis2_bar_index = 0; AllData.chartData1.yAxis2_line = data2; AllData.chartData1.yAxis2_line_Name = "控制水位"; - AllData.chartData1.yAxis2_line_Index = 0; + AllData.chartData1.yAxis2_line_Index = 1; AllData.chartData1.yAxis3_line = data1; AllData.chartData1.yAxis3_line_Name = "当前水位"; - AllData.chartData1.yAxis3_line_Index = 0; + AllData.chartData1.yAxis3_line_Index = 1; AllData.refresh1++; AllData.TjData1 = null; AllData.TjData1Unit = null; @@ -1080,6 +1080,8 @@ yAxis3_line_Index: 0, }; AllData.refresh1++; + AllData.TjData1 = null; + AllData.TjData1Unit = null; AllData.chartData3 = { xAxis: [], //X轴数据 y1_Unit: "", //Y轴单位 @@ -1099,6 +1101,8 @@ yAxis3_line_Index: 0, }; AllData.refresh3++; + AllData.TjData3 = null; + AllData.TjData3Unit = null; AllData.chartData2 = { xAxis: [], yAxis: [], @@ -1108,6 +1112,8 @@ y1_Unit: "km", }; AllData.refresh2++; + AllData.TjData2 = null; + AllData.TjData2Unit = null; }; onMounted(() => { let initeGLTimer = setInterval(() => { diff --git a/src/views/pictureOnMap/page/DrainageSystem/components/DraBarCharts2Y.vue b/src/views/pictureOnMap/page/DrainageSystem/components/DraBarCharts2Y.vue index e421b34..bf8b7b4 100644 --- a/src/views/pictureOnMap/page/DrainageSystem/components/DraBarCharts2Y.vue +++ b/src/views/pictureOnMap/page/DrainageSystem/components/DraBarCharts2Y.vue @@ -128,6 +128,7 @@ // return value.toFixed(2); // 保留两位小数 // }, }, + max: Math.ceil(Math.max.apply(null, props.data.yAxis1_bar) * 1.2), nameTextStyle: { color: "#AAC1CF", }, @@ -197,7 +198,7 @@ color: "#2161a8", }, }, - // alignTicks: true, + alignTicks: true, position: "right", offset: 0, }); @@ -226,6 +227,17 @@ return value + unit; }, }, + + label: { + show: true, + position: "top", + valueAnimation: true, + color: "inherit", + fontSize: 12, + formatter: (params) => { + return params.value; + }, + }, }, { name: props.data.yAxis1_bar_Name, diff --git a/src/views/pictureOnMap/page/DrainageSystem/components/DraBarChartsLeft.vue b/src/views/pictureOnMap/page/DrainageSystem/components/DraBarChartsLeft.vue index 727f6a8..b12fa14 100644 --- a/src/views/pictureOnMap/page/DrainageSystem/components/DraBarChartsLeft.vue +++ b/src/views/pictureOnMap/page/DrainageSystem/components/DraBarChartsLeft.vue @@ -70,7 +70,7 @@ }, legend: { textStyle: { - color: "#FFFFFF", // 这里设置为红色 + color: "#FFFFFF", }, }, grid: { @@ -87,7 +87,7 @@ align: "right", fontSize: 10, }, - max: Math.ceil(Math.max.apply(null, props.data.yAxis2) * 1.1), + max: Math.ceil(Math.max.apply(null, props.data.yAxis2) * 1.2), nameLocation: "start", type: "value", minInterval: 1, @@ -109,7 +109,7 @@ axisLabel: { color: "#EBFEFF", show: true, - fontSize: 12, + fontSize: props.data.xAxis.length > 8 ? 8 : 12, }, nameTextStyle: { color: "#FFFFFF", @@ -119,31 +119,48 @@ { name: props.data.yAxis2_Name, type: "bar", - barWidth: 10, + // barWidth: 10, // label: { // show: true, // }, data: props.data.yAxis2, barGap: "-100%", itemStyle: { - borderRadius: [20, 20, 20, 20], + borderRadius: [0, 20, 20, 0], color: "#31FEDF", }, + label: { + show: true, + position: "right", + valueAnimation: true, + color: "inherit", + fontSize: 12, + formatter: (params) => { + return params.value + props.data.y1_Unit; + }, + }, }, { name: props.data.yAxis_Name, type: "bar", - barWidth: 10, + // barWidth: 10, // label: { // show: true, // }, data: props.data.yAxis, itemStyle: { borderRadius: [20, 20, 20, 20], - color: new echarts.graphic.LinearGradient(0, 0, 1, 0, [ - { offset: 0, color: "#FF6464" }, - { offset: 1, color: "#FF9A9A" }, - ]), + color: "#FF6464", + }, + label: { + show: false, + position: "right", + valueAnimation: true, + color: "inherit", + fontSize: 12, + formatter: (params) => { + return params.value + props.data.y1_Unit; + }, }, }, ], diff --git a/src/views/pictureOnMap/page/DrainageSystem/YSIndex.vue b/src/views/pictureOnMap/page/DrainageSystem/YSIndex.vue index ca12460..11b5504 100644 --- a/src/views/pictureOnMap/page/DrainageSystem/YSIndex.vue +++ b/src/views/pictureOnMap/page/DrainageSystem/YSIndex.vue @@ -787,7 +787,7 @@ AllData.refresh1++; AllData.TjData1 = res.data.pipelinePointCount .reduce((accu, curren) => Number(accu) + Number(curren)) - .toFixed(2); + .toFixed(0); AllData.TjData1Unit = "个"; } if (AllData.regionGrade == "four") { @@ -926,25 +926,25 @@ res.data.forEach((element) => { XData.push(element.lakeName); data1.push(element.nowWaterlevel); - data2.push(element.fortifyWaterlevel); + data2.push(element.bestPromitWaterlevel); data3.push(element.volume); }); AllData.chartData1.xAxis = XData; //X轴数据 - AllData.chartData1.y1_Unit = "m"; //Y轴单位 - AllData.chartData1.y2_Unit = "万方"; //2号Y轴单位 + AllData.chartData1.y1_Unit = "万方"; //Y轴单位 + AllData.chartData1.y2_Unit = "m"; //2号Y轴单位 AllData.chartData1.y2_show = true; //是否展示右侧的2号轴 AllData.chartData1.yAxis1_bar = data3; //数据1 AllData.chartData1.yAxis1_bar_Name = "库容量"; //数据1的名称 - AllData.chartData1.yAxis1_bar_index = 1; + AllData.chartData1.yAxis1_bar_index = 0; AllData.chartData1.yAxis2_bar = null; //数据2 AllData.chartData1.yAxis2_bar_Name = ""; //数据1的名称 AllData.chartData1.yAxis2_bar_index = 0; AllData.chartData1.yAxis2_line = data2; AllData.chartData1.yAxis2_line_Name = "控制水位"; - AllData.chartData1.yAxis2_line_Index = 0; + AllData.chartData1.yAxis2_line_Index = 1; AllData.chartData1.yAxis3_line = data1; AllData.chartData1.yAxis3_line_Name = "当前水位"; - AllData.chartData1.yAxis3_line_Index = 0; + AllData.chartData1.yAxis3_line_Index = 1; AllData.refresh1++; AllData.TjData1 = null; AllData.TjData1Unit = null; @@ -1080,6 +1080,8 @@ yAxis3_line_Index: 0, }; AllData.refresh1++; + AllData.TjData1 = null; + AllData.TjData1Unit = null; AllData.chartData3 = { xAxis: [], //X轴数据 y1_Unit: "", //Y轴单位 @@ -1099,6 +1101,8 @@ yAxis3_line_Index: 0, }; AllData.refresh3++; + AllData.TjData3 = null; + AllData.TjData3Unit = null; AllData.chartData2 = { xAxis: [], yAxis: [], @@ -1108,6 +1112,8 @@ y1_Unit: "km", }; AllData.refresh2++; + AllData.TjData2 = null; + AllData.TjData2Unit = null; }; onMounted(() => { let initeGLTimer = setInterval(() => { diff --git a/src/views/pictureOnMap/page/DrainageSystem/components/DraBarCharts2Y.vue b/src/views/pictureOnMap/page/DrainageSystem/components/DraBarCharts2Y.vue index e421b34..bf8b7b4 100644 --- a/src/views/pictureOnMap/page/DrainageSystem/components/DraBarCharts2Y.vue +++ b/src/views/pictureOnMap/page/DrainageSystem/components/DraBarCharts2Y.vue @@ -128,6 +128,7 @@ // return value.toFixed(2); // 保留两位小数 // }, }, + max: Math.ceil(Math.max.apply(null, props.data.yAxis1_bar) * 1.2), nameTextStyle: { color: "#AAC1CF", }, @@ -197,7 +198,7 @@ color: "#2161a8", }, }, - // alignTicks: true, + alignTicks: true, position: "right", offset: 0, }); @@ -226,6 +227,17 @@ return value + unit; }, }, + + label: { + show: true, + position: "top", + valueAnimation: true, + color: "inherit", + fontSize: 12, + formatter: (params) => { + return params.value; + }, + }, }, { name: props.data.yAxis1_bar_Name, diff --git a/src/views/pictureOnMap/page/DrainageSystem/components/DraBarChartsLeft.vue b/src/views/pictureOnMap/page/DrainageSystem/components/DraBarChartsLeft.vue index 727f6a8..b12fa14 100644 --- a/src/views/pictureOnMap/page/DrainageSystem/components/DraBarChartsLeft.vue +++ b/src/views/pictureOnMap/page/DrainageSystem/components/DraBarChartsLeft.vue @@ -70,7 +70,7 @@ }, legend: { textStyle: { - color: "#FFFFFF", // 这里设置为红色 + color: "#FFFFFF", }, }, grid: { @@ -87,7 +87,7 @@ align: "right", fontSize: 10, }, - max: Math.ceil(Math.max.apply(null, props.data.yAxis2) * 1.1), + max: Math.ceil(Math.max.apply(null, props.data.yAxis2) * 1.2), nameLocation: "start", type: "value", minInterval: 1, @@ -109,7 +109,7 @@ axisLabel: { color: "#EBFEFF", show: true, - fontSize: 12, + fontSize: props.data.xAxis.length > 8 ? 8 : 12, }, nameTextStyle: { color: "#FFFFFF", @@ -119,31 +119,48 @@ { name: props.data.yAxis2_Name, type: "bar", - barWidth: 10, + // barWidth: 10, // label: { // show: true, // }, data: props.data.yAxis2, barGap: "-100%", itemStyle: { - borderRadius: [20, 20, 20, 20], + borderRadius: [0, 20, 20, 0], color: "#31FEDF", }, + label: { + show: true, + position: "right", + valueAnimation: true, + color: "inherit", + fontSize: 12, + formatter: (params) => { + return params.value + props.data.y1_Unit; + }, + }, }, { name: props.data.yAxis_Name, type: "bar", - barWidth: 10, + // barWidth: 10, // label: { // show: true, // }, data: props.data.yAxis, itemStyle: { borderRadius: [20, 20, 20, 20], - color: new echarts.graphic.LinearGradient(0, 0, 1, 0, [ - { offset: 0, color: "#FF6464" }, - { offset: 1, color: "#FF9A9A" }, - ]), + color: "#FF6464", + }, + label: { + show: false, + position: "right", + valueAnimation: true, + color: "inherit", + fontSize: 12, + formatter: (params) => { + return params.value + props.data.y1_Unit; + }, }, }, ], diff --git a/src/views/pictureOnMap/page/DrainageSystem/components/DraLineChartsLeft.vue b/src/views/pictureOnMap/page/DrainageSystem/components/DraLineChartsLeft.vue index 263ec56..1542859 100644 --- a/src/views/pictureOnMap/page/DrainageSystem/components/DraLineChartsLeft.vue +++ b/src/views/pictureOnMap/page/DrainageSystem/components/DraLineChartsLeft.vue @@ -152,9 +152,6 @@ color: "aqua", // 数据点颜色 }, }, - - - { name: props.data.yAxis3_line_Name, type: "line",