数字资源 监测分析年统计

src/views/bigdata/chart-injectionYear.vue

@@ -1,26 +1,26 @@
 <!-- **************************************NO.18 消防*************************************** -->
 <template>
-	<div class="chart-container">
-		<div id="injectionYear" style="width: 100%; height:25vh; ">
-		</div>
-	</div>
+  <div class="chart-container">
+    <div id="injectionYear" style="width: 100%; height:25vh; ">
+    </div>
+  </div>
 </template>
 
 <script>
   import { getEventTypeYearStatistics } from '@/api/bigdata'
-	import * as echarts from 'echarts';
-	export default {
-		name: 'chart-injectionYear',
-		data() {
-			return {
-				count: 0
-			}
-		},
-		mounted() {
-			this.getInjectionYear();
-		},
+  import * as echarts from 'echarts';
+  export default {
+    name: 'chart-injectionYear',
+    data() {
+      return {
+        count: 0
+      }
+    },
+    mounted() {
+      this.getInjectionYear();
+    },
 
-		methods: {
+    methods: {
       getInjectionYear() {
         let year = new Date().getFullYear();
         let param = {year: year};
@@ -34,193 +34,275 @@
         // })
         let res = {};
         let data = [[]];
-        data[0] = [{"jdName": "a", "year": "2021"}, {"jdName": "2021"}, {"jdName": "2021"}, {"jdName": "2021"}]
-        data[1] = [{"jdName": "a", "year": "2022"}, {"jdName": "2022"}, {"jdName": "2022"}, {"jdName": "2022"}]
-        data[2] = [{"jdName": "a", "year": "2023"}, {"jdName": "2023"}, {"jdName": "2023"}, {"jdName": "2023"}]
-        data[3] = [{"jdName": "a", "year": "2024"}, {"jdName": "2024"}, {"jdName": "2024"}, {"jdName": "2024"}]
-        data[4] = [{"jdName": "a", "year": "2025"}, {"jdName": "2025"}, {"jdName": "2025"}, {"jdName": "2025"}]
+        data[0] = [{"jdName":"a", "year":"2021"},{"jdName":"b", "year":"2021"},{"jdName":"c", "year":"2021"},{"jdName":"d", "year":"2021"}]
+        data[1] = [{"jdName":"a", "year":"2022"},{"jdName":"b", "year":"2022"},{"jdName":"c", "year":"2022"},{"jdName":"d", "year":"2022"}]
+        data[2] = [{"jdName":"a", "year":"2023"},{"jdName":"b", "year":"2023"},{"jdName":"c", "year":"2023"},{"jdName":"d", "year":"2023"}]
+        data[3] = [{"jdName":"a", "year":"2024"},{"jdName":"b", "year":"2024"},{"jdName":"c", "year":"2024"},{"jdName":"d", "year":"2024"}]
+        data[4] = [{"jdName":"a", "year":"2025"},{"jdName":"b", "year":"2025"},{"jdName":"c", "year":"2025"},{"jdName":"d", "year":"2025"}]
         res.data = data;
-        this.myEcharts(res);
+        this.myEcharts(res, currentIndex, yearArr, currentYear);
       },
-      myEcharts(res) {
-        var myChart = echarts.init(document.getElementById('injectionYear'));
-        var Xdata = ["01","02","03","04","05","06","07","08","09","10",'11','12','13'];
-        var one = {
-          2019: [589, 259, 262, 324, 232, 176, 196, 214, 133, 370,309,293, 143],
-          2020: [511, 315, 139, 375, 204, 352, 163, 258, 385, 209,309,293, 143],
-          2021: [527, 210, 328, 292, 241, 110, 130, 185, 392, 392,309,293, 143],
-          2022: [500, 350, 300, 250, 200, 150, 100, 150, 200, 250,309,293, 143],
-          2023: [580, 128, 255, 254, 313, 143, 360, 343, 338, 163,309,293, 143]
-        };
-        var two = {
-          2019: [76, 29, 22, 34, 22, 176, 196, 214, 133, 370,309,293, 143],
-          2020: [51, 35, 19, 35, 24, 352, 163, 258, 385, 209,309,293, 143],
-          2021: [57, 20, 38, 22, 21, 110, 130, 185, 392, 392,309,293, 143],
-          2022: [50, 30, 30, 20, 20, 150, 100, 150, 200, 250,309,293, 143],
-          2023: [50, 18, 25, 24, 33, 143, 360, 343, 338, 163,309,293, 143]
-        };
-        var three = {
-          2019: [589, 259, 262, 324, 22, 17, 196, 24, 13, 370,309,293, 143],
-          2020: [511, 315, 139, 375, 24, 35, 163, 28, 35, 209,39,293, 143],
-          2021: [527, 210, 328, 292, 21, 11, 130, 15, 32, 392,39,293, 143],
-          2022: [500, 350, 300, 250, 20, 15, 100, 10, 20, 250,39,293, 143],
-          2023: [580, 128, 255, 254, 33, 14, 360, 33, 338, 163,39,293, 143]
-        };
-        //图表月份
-        var timeLineData = [2019, 2020, 2021, 2022, 2023];
-        var option = {
+      myEcharts(res, currentIndex, yearArr, currentYear) {
+        const seriesValue = [];
+        const result = res.data;
+        const jdNames = new Array();
+        for (let i = 0; i < result[0].length; i++) {
+          jdNames.push(result[0][i].jdName);
+        }
+        const years = new Array();
+        for (let i = 0; i < result.length; i++) {
+          years.push(result[i][0].year);
+        }
+
+        const jieDao_yearData_2D = [];
+        for (let i = 0; i < jdNames.length; i++) {
+          const jdYearData = [];
+          for (let j = 0; j < years.length; j++) {
+            const monthData = [];
+            // monthData.push(result[j][i].month1);
+            // monthData.push(result[j][i].month2);
+            // monthData.push(result[j][i].month3);
+            // monthData.push(result[j][i].month4);
+            // monthData.push(result[j][i].month5);
+            // monthData.push(result[j][i].month6);
+            // monthData.push(result[j][i].month7);
+            // monthData.push(result[j][i].month8);
+            // monthData.push(result[j][i].month9);
+            // monthData.push(result[j][i].month10);
+            // monthData.push(result[j][i].month11);
+            // monthData.push(result[j][i].month12);
+            //
+            monthData.push(Math.floor(Math.random()*10));
+            monthData.push(Math.floor(Math.random()*10));
+            monthData.push(Math.floor(Math.random()*10));
+            monthData.push(Math.floor(Math.random()*10));
+            monthData.push(Math.floor(Math.random()*10));
+            monthData.push(Math.floor(Math.random()*10));
+            monthData.push(Math.floor(Math.random()*10));
+            monthData.push(Math.floor(Math.random()*10));
+            monthData.push(Math.floor(Math.random()*10));
+            monthData.push(Math.floor(Math.random()*10));
+            monthData.push(Math.floor(Math.random()*10));
+            monthData.push(Math.floor(Math.random()*10));
+            jdYearData.push(monthData);
+          }
+          jieDao_yearData_2D.push(jdYearData);
+          const value = {
+            name: jdNames[i],
+            type: 'line',
+            areaStyle: {
+              opacity: 0.8,
+              color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
+                {
+                  offset: 0,
+                  color: 'rgb(148, 99, 66)'
+                },
+                {
+                  offset: 1,
+                  color: 'rgb(242, 200, 34)'
+                }
+              ])
+            },
+          }
+          seriesValue.push(value);
+        }
+        const data = ['1月', '2月', '3月', '4月', '5月', '6月', '7月', '8月', '9月', '10月', '11月', '12月'];
+
+        const myChart = echarts.init(document.getElementById("injectionYear"));
+        // 点击方法
+        myChart.on("click", function (e) {
+          if (e.componentType == "timeline") {//点击了时间轴
+            currentYear = e.name;
+          } else {
+            // let currentMonth = e.dataIndex + 1;
+            // _this.openDialog_jqzjzqktj(currentYear, currentMonth);
+          }
+        });
+        //timechange方法
+        myChart.on('timelinechanged', (timeLineObj) => {
+          currentYear = yearArr[timeLineObj.currentIndex];
+        });
+
+        const dataMap = {};
+        const series = [];
+        for (let k = 0; k < jieDao_yearData_2D.length; k++) {
+          dataMap.dataJd = dataFormatter({
+            //max : 60000,
+            2025: jieDao_yearData_2D[k][years.length - 1],
+            2024: jieDao_yearData_2D[k][years.length - 2],
+            2023: jieDao_yearData_2D[k][years.length - 3],
+            2022: jieDao_yearData_2D[k][years.length - 4],
+            2021: jieDao_yearData_2D[k][years.length - 5],
+          }, years);
+          series.push(dataMap.dataJd)
+        }
+
+        const options = new Array();
+
+        for (let i = 0; i < years.length; i++) {
+          const zhengti = {};
+          zhengti.title = {text: years[i] + '年监测分析统计'};
+          const optionSeries = [];
+          for (let j = 0; j < series.length; j++) {
+            optionSeries.push({data: series[j][years[i]]})
+          }
+          zhengti.series = optionSeries;
+          options.push(zhengti);
+        }
+
+        const option = {
           baseOption: {
-            backgroundColor: "#061740",
             timeline: {
-              show: true,
               axisType: 'category',
-              tooltip: {
-                show: true,
-                formatter: function(params) {
-                  return params.name + '月份数据统计';
-                }
-              },
-              autoPlay: true,
-              currentIndex: 0,
-              playInterval: 5000,
-              label: {
-                normal: {
-                  show: true,
-                  color: '#20dbfd',
-                  interval: 'auto',
-                  formatter: function(params) {
-                    return params
-                  }
-                },
-              },
               lineStyle: {
                 show: true,
-                color: '#20dbfd'
+                color: '#00cdef',
+                width: 2,
+                padding: 0
               },
-              itemStyle: {
-                show: true,
-                color: '#20dbfd'
+              left: 20,
+              right: 20,
+              checkpointStyle: {
+                color: '#ffff00',
+                borderStyle: '#ff9900',
               },
               controlStyle: {
-                show: true,
-                color: '#20dbfd',
-                borderColor: '#20dbfd'
+                color: '#00cdef',
+                borderColor: '#00cdef',
+              },
+              autoPlay: false,
+              currentIndex: currentIndex,
+              playInterval: 1000,
+              data: [
+                years[0],
+                years[1],
+                years[2],
+                years[3],
+                years[4]
+              ],
+              emphasis: {
+                controlStyle: {
+                  color: '#ff9900',
+                  borderColor: '#ff9900',
+                },
               },
-              left: "0",
-              right: "0",
-              bottom: '0',
-              padding: [15, 0],
-              data: timeLineData,
+              label: {
+                color: '#00cdef',
+                emphasis: {
+                  color: '#ff9900'
+                },
+                formatter: function (s) {
+                  return new Date(s).getFullYear();
+                }
+              }
             },
             title: {
+              top: 10,
+              left: 20,
               textStyle: {
-                color: '#fff',
-                fontSize: 16,
-              },
-            },
-            tooltip: {
-              show: true,
-              trigger: 'axis',
-              axisPointer: {
-                type: 'shadow',
+                color: '#00cdef'
               }
             },
+            tooltip: {},
+            calculable: true,
             grid: {
-              top: "10%",
-              left: "3%",
-              right: "7%",
-              bottom: "10%",
-              containLabel: true
+              top: 80,
+              bottom: 100,
+              tooltip: {
+                trigger: 'axis',
+                axisPointer: {
+                  type: 'shadow',
+                  label: {
+                    show: true,
+                    formatter: function (params) {
+                      return params.value.replace('\n', '');
+                    }
+                  }
+                }
+              }
             },
-            xAxis: [{
-              type: 'category',
-              axisLine: {
-                show: false,
-              },
-              axisTick: {
-                show: false,
-              },
-              axisLabel: {
-                show: true,
-                formatter: function(val) {
-                  var strs = val.split(''); //字符串数组
-                  var str = ''
-                  for (var i = 0, s; s = strs[i++];) { //遍历字符串数组
-                    str += s;
-                    if (!(i % 2)) str += '\n'; //按需要求余
+            xAxis: [
+              {
+                type: 'category',
+                axisLabel: {interval: 0},
+                data: data,
+                axisLabel: {
+                  color: '#00cdef'
+                },
+                axisLine: {
+                  show: true,
+                  lineStyle: {
+                    color: '#00cdef'
                   }
-                  return str
                 },
-                textStyle: {
-                  color: '#B2B2B2',
-                  fontSize: 12,
+                splitLine: {
+                  show: false
                 },
               },
-              splitLine: {
-                show: false,
-                lineStyle: {
-                  color: '#fff',
-                  width: 1,
+            ],
+            yAxis: [
+              {
+                type: 'value',
+                name: '接种针数',
+                axisLabel: {
+                  show: true,
+                  color: '#00cdef'
                 },
-              },
-              data: Xdata,
-            }],
-            yAxis: [{
-              type: 'value',
-              name: "(万)",
-              nameTextStyle: {
-                color: "#fff",
-              },
-              axisLine: {
-                show: false
-              },
-              axisTick: {
-                show: false
-              },
-              axisLabel: {
-                show: true,
-                textStyle: {
-                  color: '#fff',
-                  fontSize: 12,
+                axisLine: {
+                  show: true,
+                  lineStyle: {
+                    color: '#00cdef'
+                  }
+                },
+                splitLine: {
+                  show: true,
+                  lineStyle: {
+                    color: '#0b3747'
+                  }
                 },
               }
-            }]
+            ],
+            series: seriesValue
           },
-          options: []
+          options: options
         };
-        for (var i = 0; i < timeLineData.length; i++) {
-          option.options.push({
-            series: [{
-              type: 'line',
-              barWidth: '20%',
-              data: one[timeLineData[i]],
-            },{
-              type: 'line',
-              barWidth: '20%',
-              data: two[timeLineData[i]],
-            },{
-              type: 'line',
-              barWidth: '20%',
-              data: three[timeLineData[i]],
-            }]
-          });
-        }
-
-        if(option){
+        console.log(option);
+        if (option && typeof option === 'object') {
           myChart.setOption(option);
         }
       }
+    },
+  }
+  function dataFormatter(obj, years) {
+    // prettier-ignore
+    const pList = ['1月', '2月', '3月', '4月', '5月', '6月', '7月', '8月', '9月', '10月', '11月', '12月'];
+    let temp;
+    for (let year = years[0]; year <= years[years.length - 1]; year++) {
+      let max = 0;
+      let sum = 0;
+      temp = obj[year];
+      for (let i = 0, l = temp.length; i < l; i++) {
+        max = Math.max(max, temp[i]);
+        sum += temp[i];
+        obj[year][i] = {
+          name: pList[i],
+          value: temp[i]
+        };
+      }
+      obj[year + 'max'] = Math.floor(max / 100) * 100;
+      obj[year + 'sum'] = sum;
     }
+    return obj;
   }
 </script>
 
 <style rel="stylesheet/scss" lang="scss" scoped>
-	.chart-container {
-		width: 100%;
-		height: auto;
-		position: relative;
-		padding-bottom: 10px;
-		display: flex;
-		flex-direction: column;
-	}
+  .chart-container {
+    width: 100%;
+    height: auto;
+    position: relative;
+    padding-bottom: 10px;
+    display: flex;
+    flex-direction: column;
+  }
 </style>