数字资源

src/views/bigdata/chart-injectionYear.vue

@@ -34,265 +34,183 @@
         // })
         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": "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"}]
         res.data = data;
         this.myEcharts(res);
       },
       myEcharts(res) {
-        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(1);
-            monthData.push(3);
-            monthData.push(5);
-            monthData.push(7);
-            monthData.push(9);
-            monthData.push(12);
-            monthData.push(6);
-            monthData.push(6);
-            monthData.push(6);
-            monthData.push(3);
-            monthData.push(2);
-            monthData.push(1);
-            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],
-          });
-          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 = {
+        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 = {
           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: '#00cdef',
-                width: 2,
-                padding: 0
+                color: '#20dbfd'
               },
-              left: 20,
-              right: 20,
-              checkpointStyle: {
-                color: '#ffff00',
-                borderStyle: '#ff9900',
+              itemStyle: {
+                show: true,
+                color: '#20dbfd'
               },
               controlStyle: {
-                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',
-                },
+                show: true,
+                color: '#20dbfd',
+                borderColor: '#20dbfd'
               },
-              label: {
-                color: '#00cdef',
-                emphasis: {
-                  color: '#ff9900'
-                },
-                formatter: function (s) {
-                  return new Date(s).getFullYear();
-                }
-              }
+              left: "0",
+              right: "0",
+              bottom: '0',
+              padding: [15, 0],
+              data: timeLineData,
             },
             title: {
-              top: 10,
-              left: 20,
               textStyle: {
-                color: '#00cdef'
+                color: '#fff',
+                fontSize: 16,
+              },
+            },
+            tooltip: {
+              show: true,
+              trigger: 'axis',
+              axisPointer: {
+                type: 'shadow',
               }
             },
-            tooltip: {},
-            calculable: true,
             grid: {
-              top: 80,
-              bottom: 100,
-              tooltip: {
-                trigger: 'axis',
-                axisPointer: {
-                  type: 'shadow',
-                  label: {
-                    show: true,
-                    formatter: function (params) {
-                      return params.value.replace('\n', '');
-                    }
-                  }
-                }
-              }
+              top: "10%",
+              left: "3%",
+              right: "7%",
+              bottom: "10%",
+              containLabel: true
             },
-            xAxis: [
-              {
-                type: 'category',
-                axisLabel: {interval: 0},
-                data: data,
-                axisLabel: {
-                  color: '#00cdef'
-                },
-                axisLine: {
-                  show: true,
-                  lineStyle: {
-                    color: '#00cdef'
+            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'; //按需要求余
                   }
+                  return str
                 },
-                splitLine: {
-                  show: false
+                textStyle: {
+                  color: '#B2B2B2',
+                  fontSize: 12,
                 },
               },
-            ],
-            yAxis: [
-              {
-                type: 'value',
-                name: '接种针数',
-                axisLabel: {
-                  show: true,
-                  color: '#00cdef'
+              splitLine: {
+                show: false,
+                lineStyle: {
+                  color: '#fff',
+                  width: 1,
                 },
-                axisLine: {
-                  show: true,
-                  lineStyle: {
-                    color: '#00cdef'
-                  }
-                },
-                splitLine: {
-                  show: true,
-                  lineStyle: {
-                    color: '#0b3747'
-                  }
+              },
+              data: Xdata,
+            }],
+            yAxis: [{
+              type: 'value',
+              name: "(万)",
+              nameTextStyle: {
+                color: "#fff",
+              },
+              axisLine: {
+                show: false
+              },
+              axisTick: {
+                show: false
+              },
+              axisLabel: {
+                show: true,
+                textStyle: {
+                  color: '#fff',
+                  fontSize: 12,
                 },
               }
-            ],
-            series: seriesValue
+            }]
           },
-          options: options
+          options: []
         };
-        console.log(option);
-        if (option && typeof option === 'object') {
+        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){
           myChart.setOption(option);
         }
       }
-    },
-	}
-  function dataFormatter(obj) {
-    // 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>