统计分析

src/views/bigdata/chart-eventTrend.vue

@@ -1,7 +1,7 @@
 <!-- **************************************NO.6 矿坑*************************************** -->
 <template>
 	<div class="chart-container">
-		<div id="pit" style="width: 100%; height:23vh;">
+		<div id="pit" style="width: 100%; height:24vh;">
 		</div>
 	</div>
 </template>
@@ -22,7 +22,7 @@
 
 		methods: {
 			// 出处 http://192.144.199.210:8080/editor/index.html?chart_id=udduEFcFiEYEEj4Q
-			
+
 			myEcharts() {
 
 
@@ -30,43 +30,67 @@
 				var myChart = echarts.init(chartDom);
 				var color = ['#02CDFF', '#62FBE7', '#7930FF','#ef5f9d','#ecb935'];
 				var option;
-				option = {
-				   
-				    color:color,
-				    tooltip : {
-				        trigger: 'item',
-				        formatter: "{b}: {c}"
-				    },
-				    toolbox: {
-				        show : true,
-				       
-				    },
-
-				    series : [
-				        {
-				            name:'业务警种',
-				            type:'pie',
-				            roseType: true,
-				            radius : ['50%', '70%'],
-				            label: {
-				              show: true,
-				              formatter: "{b} {c}",
-							  textStyle: {
-							      fontSize: 10 ,
-							      
-							  }
-							  
-				            },
-				            data:[
-				                {value:20, name:'双辽市'},
-				                {value:25, name:'梨树县'},
-				                {value:30, name:'伊通县'},
-				                {value:35, name:'铁东区'},
-								{value:35, name:'铁西区'}
-				            ]
-				        }
-				    ]
-				};
+        option = {
+          xAxis: {
+            data: [
+              '2021-05-17',
+              '2021-05-18',
+              '2021-05-19',
+              '2021-05-20',
+              '2021-05-21',
+              '2021-05-24',
+              '2021-05-25',
+              '2021-05-26',
+              '2021-05-27',
+            ],
+          },
+          yAxis: {
+            axisLabel: {
+              fontSize: 10,
+              color: '#999',
+              verticalAlign: 'bottom',
+              formatter: function (value, index) {
+                return `${value.toFixed(2)}%`;
+              },
+            },
+          },
+          series: [
+            {
+              type: 'line',
+              lineStyle: {
+                color: '#C22F43',
+                width: 1,
+                type: 'solid',
+              },
+              areaStyle: {
+                color: {
+                  type: 'linear',
+                  x: 0,
+                  y: 0,
+                  x2: 0,
+                  y2: 1,
+                  colorStops: [
+                    {
+                      offset: 0,
+                      color: 'rgba(194, 47, 67, 1.0)',
+                    },
+                    {
+                      offset: 1,
+                      color: 'rgba(194, 47, 67, 0.03)',
+                    },
+                  ],
+                  global: false,
+                },
+                origin: 'start',
+              },
+              opacity: 0.2,
+              shadowColor: 'rgba(194, 47, 67)',
+              shadowBlur: 0,
+              shadowOffsetX: 0,
+              data: [1.56, -1.34, 0.57, 2.34, -0.45, 0.57, 2.34, 1.2, 0.34],
+            },
+          ],
+        };
 				option && myChart.setOption(option);
 			},
 
@@ -79,7 +103,7 @@
 <style rel="stylesheet/scss" lang="scss" scoped>
 	.chart-container {
 		width: 100%;
-		height: auto;
+		height: 100%;
 		position: relative;
 		padding-bottom: 10px;
 		display: flex;

src/views/bigdata/chart-gridStaff.vue

@@ -1,7 +1,7 @@
 <!-- **************************************NO.13 消火栓*************************************** -->
 <template>
 	<div class="chart-container">
-		<div id="hydrant" style="width: 100%; height:50vh;">
+		<div id="hydrant" style="width: 100%; height:55vh;">
 		</div>
 	</div>
 </template>
@@ -27,192 +27,124 @@
 
 				var chartDom = document.getElementById('hydrant');
 				var myChart = echarts.init(chartDom);
-				var color = ['#0E7CE2', '#FF8352', '#E271DE', '#F8456B', '#00FFFF', '#4AEAB0'];
-				var option;
-				 var trafficWay = [
-				    {
-				        name: '双辽市',
-				        value: 20,
-				    },
-				    {
-				        name: '梨树县',
-				        value: 20,
-				    },
-				    {
-				        name: '伊通县',
-				        value: 20,
-				    },
-				    {
-				        name: '铁东区',
-				        value: 25,
-				    },
-				    {
-				        name: '铁西区',
-				        value: 20,
-				    },
-				];
-				
-				var data = [];
-				var color = ['#F6C558', '#25EFBD', '#21bad6', '#3283F5', '#E44660'];
-				for (var i = 0; i < trafficWay.length; i++) {
-				    data.push(
-				        {
-				            value: trafficWay[i].value,
-				            name: trafficWay[i].name,
-				            itemStyle: {
-				                normal: {
-				                    borderWidth: 8,
-				                    shadowBlur: 0,
-				                    borderColor: color[i],
-				                    shadowColor: color[i],
-				                },
-				            },
-				        },
-				        {
-				            value: 3,
-				            name: '',
-				            labelLine:{
-				              show:false  
-				            },
-				            itemStyle: {
-				                normal: {
-				                    label: {
-				                        show: false,
-				                    },
-				                    labelLine: {
-				                        show: false,
-				                    },
-				                    color: 'rgba(0, 0, 0, 0)',
-				                    borderColor: 'rgba(0, 0, 0, 0)',
-				                    borderWidth: 0,
-				                },
-				            },
-				        }
-				    );
-				}
-				var seriesOption = [
-				    {
-				        name: '',
-				        type: 'pie',
-				        clockWise:true,
-				        radius: ['70%', '80%'],
-				        hoverAnimation: true,
-				        itemStyle: {
-				            normal: {
-				                label: {
-				                    show: true
-				                },
-				            },
-				        },
-				        data: data,
-				        labelLine: {
-				            normal: {
-				                length: 20,
-				                length2: 20,
-				                lineStyle: {
-				                    type: 'solid',
-				                    color: '#31FFFF',
-				                },
-				            },
-				        },
-				        label: {
-				            normal: {
-				                formatter: function (params) {
-				                    var result = '';
-				                    if (params.name) {
-				                        result +=  params.name+'{blue|' + params.value  + '}';
-				                    }
-				                    return result;
-				                },
-				                borderWidth: 0,
-				                borderRadius: 4,
-				                padding: [60, 0],
-				                height: 10,
-				                fontSize: 10,
-				                align: 'center',
-				                color: '#DEDEDE',
-				                rich: {
-				                    blue: {
-				                        fontSize: 10,
-				                        lineHeight: 5,
-				                        color: '#31FFFF',
-				                        padding: [0, 5],
-				                    },
-				                },
-				            },
-				        },
-				    },
-				    {
-				        type: 'pie',
-				       radius: ['58%', '58%'],
-				        hoverAnimation: false,
-				        clockWise: false,
-				        itemStyle: {
-				            normal: {
-				                borderColor: 'rgba(2,178,247,0.2)',
-				                borderWidth: 30,
-				            },
-				        },
-				        label: {
-				            show: false,
-				        },
-				        data: [200],
-				    },
-				    {
-				        type: 'pie',
-				        radius: [0, '20%'],
-				        zlevel: 3,
-				        silent: true,
-				        label: {
-				            normal: {
-				                show: false,
-				            },
-				        },
-				        labelLine: {
-				            normal: {
-				                show: false,
-				            },
-				        },
-				        data: [
-				            {
-				                value: 6,
-				                name: '总数',
-				                itemStyle: {
-				                    normal: {
-				                        color: {
-				                            x: 0,
-				                            y: 0,
-				                            x2: 1,
-				                            y2: 0,
-				                            type: 'linear',
-				                            global: false,
-				                            colorStops: [
-				                                {
-				                                    offset: 0,
-				                                    color: 'rgba(2,178,247,0.2)',
-				                                },
-				                                {
-				                                    offset: 1,
-				                                    color: 'rgba(2,178,247,0.2)',
-				                                },
-				                            ],
-				                        },
-				                    },
-				                },
-				            },
-				        ],
-				    },
-				];
-				option = {
-				    color: color,
-				    tooltip: {
-				        show: false,
-				    },
-				    toolbox: {
-				        show: false,
-				    },
-				    series: seriesOption,
-				};
+        function rand(m, n) {
+          if (!n) {
+            return Math.floor(Math.random() * m);
+          } else {
+            var c = n - m + 1;
+            return Math.floor(Math.random() * c + m);
+          }
+        }
+
+        function getMax(arr, key) {
+          var max = 0,
+            len = arr.length;
+          for (var i = 0; i < len; i++) {
+            var item = arr[i][key];
+            if (max < item) max = item;
+          }
+          return max;
+        }
+
+        function getValArr(arr, key) {
+          var val = [],
+            len = arr.length;
+          for (var i = 0; i < len; i++) {
+            val.push(arr[i][key]);
+          }
+          return val;
+        }
+
+        var arr = [];
+        for (var i = 0; i < 10; i++) {
+          arr.push({
+            name: '类目名称' + rand(99),
+            amount: rand(99999) / 100 // 采购金额
+          });
+        }
+
+        var max = getMax(arr, 'amount'),
+          angleAxisData = getValArr(arr, 'name');
+        $.each(arr, function(i, e) {
+          e.value = (e.amount / max * 100).toFixed(2);
+        });
+        var option = {
+          backgroundColor: '#222',
+          tooltip: {
+            trigger: 'item',
+            textStyle: {
+              fontSize: 16,
+              color: '#fff',
+              fontFamily: 'Microsoft YaHei'
+            }
+          },
+          angleAxis: {
+            type: 'category',
+            axisLine: {
+              lineStyle: {
+                color: '#6d8a92'
+              }
+            },
+            axisLabel: {
+              interval: 0,
+              fontSize: 14,
+              color: '#fff',
+              fontFamily: 'Microsoft YaHei'
+            },
+            axisTick: {
+              show: false
+            },
+            data: angleAxisData,
+            z: 10
+          },
+          radiusAxis: {
+            max: 100,
+            min: 0,
+            axisTick: {
+              show: false
+            },
+            axisLine: {
+              show: true,
+              lineStyle: {
+                color: '#6d8a92'
+              }
+            },
+            axisLabel: {
+              formatter: '{value}%',
+              textStyle: {
+                fontSize: 11,
+                color: '#61d9fb',
+                fontFamily: 'Microsoft YaHei'
+              }
+            },
+            splitLine: {
+              show: true,
+              lineStyle: {
+                color: '#6d8a92'
+              }
+            },
+            splitArea: {
+              areaStyle: {
+                color: 'transparent'
+              }
+            }
+          },
+          polar: {
+            center: ['50%', '50%'],
+            radius: '74%',
+          },
+          series: [{
+            type: 'bar',
+            data: arr,
+            itemStyle: {
+              color: function(params) {
+                var colorList = ['#5cc6ca', '#d87a7f', '#f5b97f', '#5ab1ef', '#b6a2de', '#8d98b3', '#e5d02d', '#97b552', '#956f6d', '#d0579c'];
+                return colorList[params.dataIndex];
+              }
+            },
+            coordinateSystem: 'polar',
+          }]
+        };
 				option && myChart.setOption(option);
 			},
 

src/views/bigdata/chart-weatherTrends.vue

@@ -1,7 +1,7 @@
 <!-- **************************************NO.9 散养户、养殖场养殖种类*************************************** -->
 <template>
 	<div class="chart-container">
-		<div id="farmtype" style="width: 100%; height:23vh;">
+		<div id="farmtype" style="width: 100%; height:24vh;">
 		</div>
 	</div>
 </template>
@@ -28,57 +28,177 @@
 
 				var chartDom = document.getElementById('farmtype');
 				var myChart = echarts.init(chartDom);
-				var color = ['#37a2da','#32c5e9','#9fe6b8','#ffdb5c','#ff9f7f','#fb7293','#e7bcf3','#8378ea'];
-				var option;
-				option = {
-				    color:color,
-				    tooltip : {
-				        formatter: "{b}：{c}%"
-				    },
-				    
-				    
-				    legend: {
-						textStyle:{
-							color:'#fffff',
-							fontSize:10
-						},
-						itemWidth:15,
-				        orient: 'vertical',
-				        left: '10%',
-						top:'5%',
-				        data: ['一般修剪', '浇水', '除草', '绿篱修剪', '病虫害防治', '施肥', '伐除', '其他']
-				    },
-				    series: [
-				        {
-				            name: '',
-				            type: 'pie',
-				            radius: '80%',
-				            center: ['65%', '48%'],
-				            data:[
-				                {value:40, name:'一般修剪'},
-				                {value:30, name:'浇水'},
-				                {value:25, name:'除草'},
-				                {value:18, name:'绿篱修剪'},
-				                {value:10, name:'病虫害防治'},
-				                {value:5, name:'施肥'},
-				                {value:4, name:'伐除'},
-				                {value:3, name:'其他'}
-				            ],
-				            emphasis: {
-				                itemStyle: {
-				                    shadowBlur: 10,
-				                    shadowOffsetX: 0,
-				                    shadowColor: 'rgba(0, 0, 0, 0.5)'
-				                }
-				            },
-				            label: {
-				                normal: {
-				                    show: false,
-				                }
-				            }
-				        }
-				    ]
-				};
+        var xData = ['2022年1月','2022年2月','2022年3月','2022年4月','2022年5月','2022年6月','2022年7月','2022年8月','2022年9月','2022年10月','2022年11月','2022年12月'];
+        var option;
+        option = {
+          backgroundColor:'#232d36',
+          tooltip: {
+            trigger: 'axis',
+            axisPointer: {
+              lineStyle: {
+                color: {
+                  type: 'linear',
+                  x: 0,
+                  y: 0,
+                  x2: 0,
+                  y2: 1,
+                  colorStops: [{
+                    offset: 0,
+                    color: 'rgba(0, 255, 233,0)'
+                  }, {
+                    offset: 0.5,
+                    color: 'rgba(255, 255, 255,1)',
+                  }, {
+                    offset: 1,
+                    color: 'rgba(0, 255, 233,0)'
+                  }],
+                  global: false
+                }
+              },
+            },
+          },
+          grid: {
+            top: '15%',
+            left: '10%',
+            right: '5%',
+            bottom: '15%',
+          },
+          legend:{
+            data:['最高气温','最低气温'],
+            textStyle:{
+              color:'#fff',
+              align: 'center',
+              fontSize: 16
+            },
+            x:'center'
+          },
+          xAxis: [{
+            type: 'category',
+            // 轴线
+            axisLine: {
+              show: true,
+              lineStyle:{
+                color: '#85B1B4',
+              }
+            },
+            // 轴刻度线
+            axisTick:{
+              show:false,
+            },
+            // 坐标轴名称
+            axisLabel: {
+              color: '#fff',
+              margin:6,
+            },
+            // 轴分隔线
+            splitLine: {
+              show: false
+            },
+            // 轴两侧留白
+            boundaryGap: ['5%','5%'],
+            data: xData
+
+          }],
+
+          yAxis: [{
+            type: 'value',
+            min: 0,
+            // max: 140,
+            splitNumber: 4,
+            splitLine: {
+              show: false,
+            },
+            axisLine: {
+              show: true,
+              lineStyle:{
+                color: '#85B1B4'
+              }
+            },
+            axisLabel: {
+              show: true,
+              margin: 10,
+              textStyle: {
+                color: '#fff',
+
+              },
+            },
+            axisTick: {
+              show: false,
+            },
+          }],
+          series: [
+            {
+              name:'最高气温',
+              type: 'line',
+              showAllSymbol: true,
+              symbol: 'circle',
+              symbolSize: 4,
+              lineStyle: {
+                normal: {
+                  color: "#FF8736",
+                },
+              },
+              label: {
+                show: false,
+              },
+              itemStyle: {
+                color: "#FF8736",
+                borderColor: "#FF8736",
+                borderWidth: 2,
+              },
+              // areaStyle: {
+              //     normal: {
+              //         color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
+              //             {
+              //                 offset: 0,
+              //                 color: 'rgba(43,193,145,0.3)'
+              //             },
+              //             {
+              //                 offset: 1,
+              //                 color: 'rgba(43,193,145,0)'
+              //             }
+              //         ], false),
+              //     }
+              // },
+              data: [4,7,8,12,15,23,24,24,25,28,27,24,21,23]//data.values
+            },
+            {
+              name:'最低气温',
+              type: 'line',
+              showAllSymbol: true,
+              symbol: 'circle',
+              symbolSize:4,
+              lineStyle: {
+                normal: {
+                  color: "#13EFB7",
+                },
+              },
+              label: {
+                show: false,
+              },
+              itemStyle: {
+                color: "#13EFB7",
+                borderColor: "#13EFB7",
+                borderWidth: 2,
+              },
+              areaStyle: {
+                normal: {
+                  color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
+                    {
+                      offset: 0,
+                      color: 'rgba(81,150,164,0.3)'
+                    },
+                    {
+                      offset: 1,
+                      color: 'rgba(81,150,164,0)'
+                    }
+                  ], false),
+                }
+              },
+              data: [3,5,4,2,1,7,6,3,4,5,6,7,1,2]//data.values
+            },
+          ]
+        };
 				option && myChart.setOption(option);
 			},