diff --git a/src/views/map/components/right_content.vue b/src/views/map/components/right_content.vue index 6de9cd7..e51b9b9 100644 --- a/src/views/map/components/right_content.vue +++ b/src/views/map/components/right_content.vue @@ -89,8 +89,8 @@ const fnGetMountainFloodVillageStatistics = async () => { }; fnGetMountainFloodVillageStatistics(); const fnGetTailingsPondStatisticsStatistics = async () => { - const { data } = await getTailingsPondStatistics(); - fnInitEcharts2(data); + const { data, runningStateList } = await getTailingsPondStatistics(); + fnInitEcharts2(data, runningStateList); }; fnGetTailingsPondStatisticsStatistics(); const fnGetEmergencyReserveWarehouseStatistics = async () => { @@ -127,17 +127,29 @@ const fnInitEcharts1 = (data) => { }; myChart2.setOption(option); }; -const fnInitEcharts2 = (data) => { +const fnInitEcharts2 = (data, runningStateList) => { const xAxisData = []; - const seriesData1 = []; - const seriesData2 = []; - for (let i = 0; i < data.length; i++) { - xAxisData.push(data[i].designGrade); - seriesData1.push(data[i].count["停用"] || 0); - seriesData2.push(data[i].count["运行"] || 0); + const seriesDataMap = {}; + for (let i = 0; i < runningStateList.length; i++) { + seriesDataMap[runningStateList[i].name] = []; } + for (let i = 0; i < data.length; i++) { + const item = data[i]; + xAxisData.push(item.designGrade); + Object.keys(seriesDataMap).forEach((status) => { + seriesDataMap[status].push(item.count[status] || 0); + }); + } + const series = Object.keys(seriesDataMap).map((status) => ({ + name: status, + type: "bar", + stack: "total", + barWidth: 24, + data: seriesDataMap[status], + })); myChart3 = echarts.init(document.getElementById("main3")); const option = { + color: ["#3d8bff", "#ff5252", "#54f313", "#f30404", "#a1a1a1", "#880909"], legend: { orient: "horizontal", right: 0, @@ -164,24 +176,7 @@ const fnInitEcharts2 = (data) => { axisPointer: { type: "shadow" }, textStyle: { color: "#424242" }, }, - series: [ - { - name: "停产停运", - type: "bar", - stack: "total", - barWidth: 24, - color: "#FFC53D", - data: seriesData1, - }, - { - name: "正常", - type: "bar", - stack: "total", - barWidth: 24, - color: "#52A8FF", - data: seriesData2, - }, - ], + series, }; myChart3.setOption(option);