彭宇 преди 1 година
родител
ревизия
45c1e09740
променени са 3 файла, в които са добавени 82 реда и са изтрити 101 реда
  1. 0 5
      src/views/bigdata/chart-danger.vue
  2. 76 90
      src/views/bigdata/chart-foam.vue
  3. 6 6
      src/views/datacenter.vue

+ 0 - 5
src/views/bigdata/chart-danger.vue

@@ -31,23 +31,18 @@
 				var option;
 				let indicator = [{
 						name: '合作社',
-						max: 10
 					},
 					{
 						name: '农机站',
-						max: 10
 					},
 					{
 						name: '植保站',
-						max: 10
 					},
 					{
 						name: '畜保站',
-						max: 10
 					},
 					{
 						name: '养殖、粪污站',
-						max: 10
 					},
 				]
 

+ 76 - 90
src/views/bigdata/chart-foam.vue

@@ -23,100 +23,86 @@
 		methods: {
 			// 出处 http://192.144.199.210:8080/editor/index.html?chart_id=daPJGrcYMpZanpxR
 			myEcharts(yData,seriesData) {
-
+        var seriesDataY=[]
+        if(seriesData!=null&&seriesData.length>0){
+          for (let i = seriesData.length-1; i >= 0; i--) {
+            seriesDataY.push(seriesData[i])
+          }
+        }
+        var yDatay=[]
+        if(yData!=null&&yData.length>0){
+          for (let i = yData.length-1; i >= 0; i--) {
+            yDatay.push(yData[i])
+          }
+        }
 				var chartDom = document.getElementById('foam');
 				var myChart = echarts.init(chartDom);
-				var zdslColorList = ['#D0A00E', '#34DA62', '#00C0E9', '#0096F3', '#33CCFF'];
 				var option;
 				  option = {
-				      grid: {
-				          top: '5%',
-				          left: '10%',
-				          right: '12%',
-				          bottom: '0',
-				          containLabel: true
-				      },
-				      tooltip: {
-                show:false
-				      },
-				      xAxis: {
-				          show: false,
-				          type: 'value'
-				      },
-				      yAxis: [{
-				              type: 'category',
-							  inverse:true,
-				              data: yData,
-				              axisLabel: {
-				                  show: true,
-				                  textStyle: {
-				                      color: '#ADD6FF',
-				                      fontSize: '12'
-				                  }
-				              },
-				              splitLine: {
-				                  show: false
-				              },
-				              axisTick: {
-				                  show: false
-				              },
-				              axisLine: {
-				                  show: false
-				              },
-				          },
-				          {
-				              splitLine: {
-				                  show: false
-				              },
-				              axisTick: {
-				                  show: false
-				              },
-				              axisLine: {
-				                  show: false
-				              },
-				              axisLabel: {
-				                  show: true,
-				                  textStyle: {
-				                      color: '#ADD6FF',
-				                      fontSize: '12'
-				                  }
-				              },
-				              data: seriesData
-				          }
-				      ],
-
-				      series: [{
-				              name: "受理数", // bar图的外边框
-				              type: "bar",
-				              barWidth: "20%",
-				              yAxisIndex: 0,
-				              data: [100, 100, 100, 100, 100].map((item, i) => {
-				                  return {
-				                      value: item,
-				                      itemStyle: {
-				                          color: "rgba(0,0,0,0)",
-				                          barBorderColor: zdslColorList[i],
-				                          borderWidth: 1,
-				                          shadowColor: "#33CCFF",
-				                          shadowBlur: 4
-				                      }
-				                  }
-				              }),
-				          },
-				          {
-				              name: "受理数", //这个是Bar图
-				              type: 'bar',
-				              yAxisIndex: 1,
-				              barWidth: "10%",
-				              data: seriesData
-				          }
-				      ],
-				      itemStyle: {
-				          color: function(params) {
-				              return zdslColorList[params.dataIndex]
-				          }
-				      }
-				  }
+            tooltip: {},
+            grid: {
+              top: 20,
+              left:100,
+              bottom: 0,
+            },
+            xAxis: {
+              show: false
+            },
+            yAxis: {
+              type: 'category',
+              axisLine: {
+                show: false
+              },
+              axisTick: {
+                show: false
+              },
+              triggerEvent: true,
+              data: yDatay
+            },
+            dataZoom: [
+              {
+                type: 'slider',
+                show: true,
+                // 设置组件控制的y轴
+                yAxisIndex: 0,
+                right: 20,
+                top: 0,
+                // 数据窗口范围的起始百分比。范围是:0 ~ 100。表示 0% ~ 100%
+                // 也可以用 startValue设置起始值
+                start: 50,
+                end: 100,
+                width: 12,
+                height: 230,
+                // 组件的背景颜色
+                backgroundColor: 'rgba(0, 0, 0, 0.4)',
+                // 选中范围的填充颜色
+                fillerColor: '#00FFFF',
+                // 边框颜色
+                borderColor: '#0094E9',
+                // 是否显示detail,即拖拽时候显示详细数值信息
+                showDetail: false,
+                // 控制手柄的尺寸
+                handleSize: 16,
+                // 是否在 dataZoom-silder 组件中显示数据阴影。数据阴影可以简单地反应数据走势。
+                showDataShadow: false,
+              },
+              {
+                type: 'inside',
+                yAxisIndex: [0],
+                start: 50,
+                end: 100,
+                // 不按任何功能键,鼠标滚轮能触发缩放
+                zoomOnMouseWheel: false,
+                // 不按任何功能键,鼠标移动能触发数据窗口平移
+                moveOnMouseWheel: true
+              }
+            ],
+            series: {
+              type: 'bar',
+              barWidth: 5,
+              data: seriesDataY
+            }
+          }
 				option && myChart.setOption(option);
 			},
 

+ 6 - 6
src/views/datacenter.vue

@@ -342,15 +342,15 @@ export default {
         for(let key in resourcesMap){
           const map = {};
           map.count=resourcesMap[key];
-          if(key == 'buzhu'){map.name="补助次数";}
+          if(key == 'buzhu'){map.name="补助次数";map.count=resourcesMap[key]+"次";}
           if(key == 'gengdi'){map.name="耕地面积";map.count=resourcesMap[key]+"㎡";}
-          if(key == 'hezuoshe'){map.name="合作社数量";}//有经纬度
+          if(key == 'hezuoshe'){map.name="合作社数量";map.count=resourcesMap[key]+"个";}//有经纬度
           if(key == 'huafei'){map.name="化肥库存";map.count=resourcesMap[key]+"吨";}
-          if(key == 'nongji'){map.name="农机站数量";}//有经纬度
+          if(key == 'nongji'){map.name="农机站数量";map.count=resourcesMap[key]+"个";}//有经纬度
           if(key == 'nongju'){map.name="农具库存";map.count=resourcesMap[key]+"个";}
-          if(key == 'xubao'){map.name="畜保站数量";}//有经纬度
-          if(key == 'yangzhi'){map.name="养殖及粪污处理点";}//有经纬度
-          if(key == 'zhibao'){map.name="植保数量";}//有经纬度
+          if(key == 'xubao'){map.name="畜保站数量";map.count=resourcesMap[key]+"个";}//有经纬度
+          if(key == 'yangzhi'){map.name="养殖及粪污处理点";map.count=resourcesMap[key]+"个";}//有经纬度
+          if(key == 'zhibao'){map.name="植保数量";map.count=resourcesMap[key]+"个";}
           if(key == 'zhongzhi'){map.name="种植产量";map.count=resourcesMap[key]+"吨";}
           if(key == 'zhongzi'){map.name="种子库存";map.count=resourcesMap[key]+"吨";}
           map.icon='sj-icon-'+key;