manage-client 3.1.43 → 3.1.47

package/src/components/qinhua/qinHuaMap.vue

@@ -1,414 +1,414 @@
-<template>
-
-  <div>
-    <div style="width: 100%;height: 100%">
-      <!--<div  style="height: 40px;"><span v-for="i in list"  @click="selmap(i)">{{i}}———></span></div>-->
-      <div :id="idname" style="text-align: left"></div>
-    </div>
-  </div>
-</template>
-
-<script>
-
-import '../../stores/shanxi1.js'
-
-export default {
-  name: 'echart-map',
-  props: {
-    mode: String,
-    idname: String
-  },
-  data () {
-    return {
-      mapdata: [
-        {name: 'qinhua', value: require('../../../static/qh.json')}
-        // {name:'咸阳市',value:require('../../../static/xianyangshi.json')},
-        // {name:'西安市',value:require('../../../static/xianshi.json')}
-      ],
-      list: [],
-      xc: '',
-      timer: ''
-    }
-  },
-
-  mounted () {
-    this.drawChinaMap()
-  },
-  methods: {
-    drawChinaMap (mapjson) {
-      var chart = this.$echarts.init(document.getElementById(this.idname))
-      this.xc = chart
-      var scale = this.$parent.$parent.$parent.scale
-      var geoCoordMap = {}
-      this.$echarts.registerMap(mapjson.name, mapjson.value, {
-        千阳县: {
-          // 左上角经度
-          left: 108.5,
-          // 左上角纬度
-          top: 34.4,
-          // 经度横跨的范围
-          width: 0.2
-        },
-        平利县: {
-          left: 109.1,
-          top: 33.8,
-          width: 0.2
-        },
-        卢氏县: {
-          left: 109.4,
-          top: 34.1,
-          width: 0.2
-        }
-      })
-      chart.showLoading()
-      var mapFeatures = this.$echarts.getMap(mapjson.name).geoJson.features
-      chart.hideLoading()
-      mapFeatures.forEach(function (v) {
-        // 地区名称
-        var name = v.properties.name
-        // 地区经纬度
-        geoCoordMap[name] = v.properties.cp
-
-      })
-      var convertData = function (data) {
-        var res = []
-        for (var i = 0; i < data.length; i++) {
-          var geoCoord = geoCoordMap[data[i].name]
-          if (geoCoord) {
-            res.push({
-              name: data[i].name,
-              value: geoCoord.concat(data[i].value)
-            })
-          }
-        }
-        return res
-      }
-      var colormode = ''
-      if (this.mode == '0') {
-        colormode = '#e7c83c'
-      }
-      if (this.mode == '1') {
-        colormode = '#66f2de'
-      }
-      var data = [
-        {
-          name: '秦华',
-          value: 2852946,
-          minyong: 2828604,
-          feiminyong: 24342
-        },
-        {
-          name: '港务区',
-          value: 29910,
-          minyong: 29514,
-          feiminyong: 396
-        },
-        {
-          name: '千阳县',
-          value: 11195,
-          minyong: 10996,
-          feiminyong: 189
-        },
-        {
-          name: '平利县',
-          value: 3306,
-          minyong: 3274,
-          feiminyong: 32
-        },
-        {
-          name: '卢氏县',
-          value: 2506,
-          minyong: 2365,
-          feiminyong: 141
-        }
-      ]
-      var col = ['#2a4096', '#1285de', '#27459b', '#284ba5', '#225bb2', '#2353a8', '#244ca3', '#1775cd', '#1e64bc', '#05a0fc', '#108de7', '#1b6dc3']
-      let colors = []
-      for (var i = 0; i < data.length; i++) {
-        var jo = {
-          name: data[i].name,
-          itemStyle: {
-            areaColor: col[i],
-            // color: '#02363f'
-            color: col[i]
-          }
-        }
-        colors.push(jo)
-      }
-      var option = {
-        title: {
-          text: '',
-          subtext: '',
-          x: 'center'
-        },
-        tooltip: {
-          show: true,
-          alwaysShowContent: false,
-          backgroundColor: 'rgba(2, 59, 63, 0.7)',
-          borderColor: 'rgba(98, 194, 186, 0.45)',
-          borderWidth: 1,
-          padding: 10 * scale,
-          textStyle: {
-            fontSize: 18 * scale
-          },
-          hideDelay: 100 * scale,
-          triggerOn: 'mousemove',
-          enterable: true,
-          position: function (point, params, dom, rect, size) {
-            //其中point为当前鼠标的位置，size中有两个属性：viewSize和contentSize，分别为外层div和tooltip提示框的大小
-            var x = point[0] //
-            var y = point[1]
-            var viewWidth = size.viewSize[0]
-            var viewHeight = size.viewSize[1]
-            var boxWidth = size.contentSize[0]
-            var boxHeight = size.contentSize[1]
-            var posX = 0 //x坐标位置
-            var posY = 0 //y坐标位置
-
-            if (x < boxWidth) { //左边放不开
-              posX = 5
-            } else { //左边放的下
-              posX = x - boxWidth
-            }
-
-            if (y < boxHeight) { //上边放不开
-              posY = 5
-            } else { //上边放得下
-              posY = y - boxHeight
-            }
-
-            return [posX - 10, posY - 10]
-
-          },
-          extraCssText: 'width: auto;height:auto;',
-          formatter: function (params, ticket, callback) {
-            return '<div style=\'text-align: center;height: 1px;margin-bottom: 5px;color:#14ffff;font-weight: normal\'>' + data[params.dataIndex].name + '</div><br/><span>'
-              + '<span style="font-weight: normal">总用户 &nbsp;&nbsp;</span><span style="color:#e1e52a;font-weight: bolder">' + data[params.dataIndex].value + '</span><br/>'
-              + '<span style="font-weight: normal">民用 &nbsp;&nbsp;</span><span style="color:#e1e52a;font-weight: bolder">' + data[params.dataIndex].minyong + '</span><br/>'
-              + '<span style="font-weight: normal">非民用&nbsp;&nbsp;&nbsp;  &nbsp;&nbsp;</span><span style="color:#e1e52a; font-weight: bolder">' + data[params.dataIndex].feiminyong + '</span>'
-          }
-        },
-        dataRange: {
-          min: 0,
-          max: 2500,
-          left: 'left',
-          top: 'bottom',
-          text: ['高', '低'],
-          calculable: true,
-          show: false,
-          inRange: {
-            color: [
-              // "#1DE9B6", "#F46E36", "#04B9FF", "#5DBD32", "#FFC809", "#FB95D5", "#BDA29A", "#6E7074", "#546570", "#C4CCD3"
-              // "#ff002d"
-              // "#ffc188",
-              // "#479fd2",
-              // "#fba853",
-              // "#48c7c0",
-              // "#fa8737",
-              // "#4bbdd6",
-              // "#ff6f5b",
-              // "#F4D5B1",
-              // "#ADE1E3",
-              // "#F4B387",
-              // "#F0F3F4"
-            ]
-          }
-        },
-
-        series: [
-          {
-            type: 'effectScatter',
-            coordinateSystem: 'geo',
-            data: [
-              {"name": "秦华", "value": [108.94592, 34.27197]},
-              {"name": "港务区", "value": [109.06265, 34.39048]},
-              {"name": "千阳县", "value": [108.6, 34.45]},
-              {"name": "平利县", "value": [109.2, 33.98]},
-              {"name": "卢氏县", "value": [109.5, 34.17]}
-            ],
-            rippleEffect: {
-              period: 10, // 动画时间，值越小速度越快
-              color: "#fff",
-              brushType: 'stroke', // 波纹绘制方式 stroke, fill
-              scale: 3 // 波纹圆环最大限制，值越大波纹越大
-            },
-            hoverAnimation: true,
-            itemStyle: {
-              color: '#e5925e',// 中心点颜色
-              shadowBlur: 10,
-              shadowColor: '#e5925e'// 波纹颜色
-            }
-          }
-        ]
-      }
-      if (this.mode == '0') {
-        option.geo = {  //地图设置
-          show: true,
-          map: mapjson.name,
-          label: {
-            normal: {
-              show: true,
-              textStyle: {
-                color: '#fff'
-              }
-            },
-            emphasis: {
-              textStyle: {
-                color: '#fff'
-              }
-            }
-          },
-          selectedMode: 'single',
-          roam: false,
-
-          emphasis: {   //高亮区域样式
-            label: {
-              normal: {
-                show: true,
-                textStyle: {
-                  color: '#fff'
-                }
-              },
-              emphasis: {
-                textStyle: {
-                  color: '#fff'
-                }
-              }
-            },
-            itemStyle: {
-              areaColor: '#ffff2c'
-            }
-          },
-          itemStyle: {
-            normal: {
-              borderColor: '#666666',
-              borderWidth: 1,
-              areaColor: {
-                type: 'radial',
-                x: 0.5,
-                y: 0.5,
-                r: 0.8,
-                colorStops: [{
-                  offset: 0,
-                  color: '#02363f' // 0% 处的颜色
-                }, {
-                  offset: 1,
-                  color: '#02363f'
-                }],
-                globalCoord: false // 缺省为 false
-              },
-              shadowBlur: 0
-            }
-          },
-          regions: colors
-        }
-      }
-      if (this.mode == '1') {
-        option.geo = {  //地图设置
-          show: true,
-          map: mapjson.name,
-          label: {
-            normal: {
-              show: true,
-              textStyle: {
-                color: '#fff'
-              }
-            },
-            emphasis: {
-              textStyle: {
-                color: '#fff'
-              }
-            }
-          },
-          selectedMode: 'single',
-          roam: false,
-
-          emphasis: {   //高亮区域样式
-            label: {
-              show: false
-            },
-            itemStyle: {
-              areaColor: '#62fff7'
-            }
-          },
-          // itemStyle: {
-          //   normal: {
-          //     borderWidth:0
-          //   }
-          //   },
-          itemStyle: {
-            normal: {
-              borderColor: '#21e3dc',
-              borderWidth: 1,
-              areaColor: {
-                type: 'radial',
-                x: 0.5,
-                y: 0.5,
-                r: 0.8,
-                colorStops: [{
-                  offset: 0,
-                  color: '#02363f' // 0% 处的颜色
-                }, {
-                  offset: 1,
-                  color: '#02363f'
-                }],
-                globalCoord: false // 缺省为 false
-              },
-              // shadowColor: '#21e3dc',
-              // // shadowColor: 'rgba(255, 255, 255, 1)',
-              // shadowOffsetX: -1,
-              // shadowOffsetY: 1,
-              shadowBlur: 0
-            }
-            // emphasis: {
-            //   areaColor: '#389BB7',
-            //   borderWidth: 0
-            // }
-          }
-          // regions: colors
-        }
-      }
-      chart.setOption(option)
-      let index = -1
-      // var timer = setInterval(function () {
-      //   // 隐藏提示框
-      //   chart.dispatchAction({
-      //     type: 'hideTip',
-      //     seriesIndex: 0,
-      //     dataIndex: index
-      //   })
-      //   // 显示提示框
-      //   chart.dispatchAction({
-      //     type: 'showTip',
-      //     seriesIndex: 0,
-      //     dataIndex: index + 1
-      //   })
-      //   // 取消高亮指定的数据图形
-      //   chart.dispatchAction({
-      //     type: 'downplay',
-      //     seriesIndex: 0,
-      //     dataIndex: index
-      //   })
-      //   // 高亮指定的数据图形
-      //   chart.dispatchAction({
-      //     type: 'highlight',
-      //     seriesIndex: 0,
-      //     dataIndex: index + 1
-      //   })
-      //   index++
-      //   if (index > data.length) {
-      //     index = -1
-      //   }
-      // }, 2000)
-    }
-  },
-  beforeDestroy () {
-    //清除定时器
-    // clearInterval(this.timer)
-  },
-  ready () {
-    this.list.push(this.mapdata[0].name)
-    this.drawChinaMap(this.mapdata[0])
-  }
-}
-</script>
+<template>
+
+  <div>
+    <div style="width: 100%;height: 100%">
+      <!--<div  style="height: 40px;"><span v-for="i in list"  @click="selmap(i)">{{i}}———></span></div>-->
+      <div :id="idname" style="text-align: left"></div>
+    </div>
+  </div>
+</template>
+
+<script>
+
+import '../../stores/shanxi1.js'
+
+export default {
+  name: 'echart-map',
+  props: {
+    mode: String,
+    idname: String
+  },
+  data () {
+    return {
+      mapdata: [
+        {name: 'qinhua', value: require('../../../static/qh.json')}
+        // {name:'咸阳市',value:require('../../../static/xianyangshi.json')},
+        // {name:'西安市',value:require('../../../static/xianshi.json')}
+      ],
+      list: [],
+      xc: '',
+      timer: ''
+    }
+  },
+
+  mounted () {
+    this.drawChinaMap()
+  },
+  methods: {
+    drawChinaMap (mapjson) {
+      var chart = this.$echarts.init(document.getElementById(this.idname))
+      this.xc = chart
+      var scale = this.$parent.$parent.$parent.scale
+      var geoCoordMap = {}
+      this.$echarts.registerMap(mapjson.name, mapjson.value, {
+        千阳县: {
+          // 左上角经度
+          left: 108.5,
+          // 左上角纬度
+          top: 34.4,
+          // 经度横跨的范围
+          width: 0.2
+        },
+        平利县: {
+          left: 109.1,
+          top: 33.8,
+          width: 0.2
+        },
+        卢氏县: {
+          left: 109.4,
+          top: 34.1,
+          width: 0.2
+        }
+      })
+      chart.showLoading()
+      var mapFeatures = this.$echarts.getMap(mapjson.name).geoJson.features
+      chart.hideLoading()
+      mapFeatures.forEach(function (v) {
+        // 地区名称
+        var name = v.properties.name
+        // 地区经纬度
+        geoCoordMap[name] = v.properties.cp
+
+      })
+      var convertData = function (data) {
+        var res = []
+        for (var i = 0; i < data.length; i++) {
+          var geoCoord = geoCoordMap[data[i].name]
+          if (geoCoord) {
+            res.push({
+              name: data[i].name,
+              value: geoCoord.concat(data[i].value)
+            })
+          }
+        }
+        return res
+      }
+      var colormode = ''
+      if (this.mode == '0') {
+        colormode = '#e7c83c'
+      }
+      if (this.mode == '1') {
+        colormode = '#66f2de'
+      }
+      var data = [
+        {
+          name: '秦华',
+          value: 2852946,
+          minyong: 2828604,
+          feiminyong: 24342
+        },
+        {
+          name: '港务区',
+          value: 29910,
+          minyong: 29514,
+          feiminyong: 396
+        },
+        {
+          name: '千阳县',
+          value: 11195,
+          minyong: 10996,
+          feiminyong: 189
+        },
+        {
+          name: '平利县',
+          value: 3306,
+          minyong: 3274,
+          feiminyong: 32
+        },
+        {
+          name: '卢氏县',
+          value: 2506,
+          minyong: 2365,
+          feiminyong: 141
+        }
+      ]
+      var col = ['#2a4096', '#1285de', '#27459b', '#284ba5', '#225bb2', '#2353a8', '#244ca3', '#1775cd', '#1e64bc', '#05a0fc', '#108de7', '#1b6dc3']
+      let colors = []
+      for (var i = 0; i < data.length; i++) {
+        var jo = {
+          name: data[i].name,
+          itemStyle: {
+            areaColor: col[i],
+            // color: '#02363f'
+            color: col[i]
+          }
+        }
+        colors.push(jo)
+      }
+      var option = {
+        title: {
+          text: '',
+          subtext: '',
+          x: 'center'
+        },
+        tooltip: {
+          show: true,
+          alwaysShowContent: false,
+          backgroundColor: 'rgba(2, 59, 63, 0.7)',
+          borderColor: 'rgba(98, 194, 186, 0.45)',
+          borderWidth: 1,
+          padding: 10 * scale,
+          textStyle: {
+            fontSize: 18 * scale
+          },
+          hideDelay: 100 * scale,
+          triggerOn: 'mousemove',
+          enterable: true,
+          position: function (point, params, dom, rect, size) {
+            //其中point为当前鼠标的位置，size中有两个属性：viewSize和contentSize，分别为外层div和tooltip提示框的大小
+            var x = point[0] //
+            var y = point[1]
+            var viewWidth = size.viewSize[0]
+            var viewHeight = size.viewSize[1]
+            var boxWidth = size.contentSize[0]
+            var boxHeight = size.contentSize[1]
+            var posX = 0 //x坐标位置
+            var posY = 0 //y坐标位置
+
+            if (x < boxWidth) { //左边放不开
+              posX = 5
+            } else { //左边放的下
+              posX = x - boxWidth
+            }
+
+            if (y < boxHeight) { //上边放不开
+              posY = 5
+            } else { //上边放得下
+              posY = y - boxHeight
+            }
+
+            return [posX - 10, posY - 10]
+
+          },
+          extraCssText: 'width: auto;height:auto;',
+          formatter: function (params, ticket, callback) {
+            return '<div style=\'text-align: center;height: 1px;margin-bottom: 5px;color:#14ffff;font-weight: normal\'>' + data[params.dataIndex].name + '</div><br/><span>'
+              + '<span style="font-weight: normal">总用户 &nbsp;&nbsp;</span><span style="color:#e1e52a;font-weight: bolder">' + data[params.dataIndex].value + '</span><br/>'
+              + '<span style="font-weight: normal">民用 &nbsp;&nbsp;</span><span style="color:#e1e52a;font-weight: bolder">' + data[params.dataIndex].minyong + '</span><br/>'
+              + '<span style="font-weight: normal">非民用&nbsp;&nbsp;&nbsp;  &nbsp;&nbsp;</span><span style="color:#e1e52a; font-weight: bolder">' + data[params.dataIndex].feiminyong + '</span>'
+          }
+        },
+        dataRange: {
+          min: 0,
+          max: 2500,
+          left: 'left',
+          top: 'bottom',
+          text: ['高', '低'],
+          calculable: true,
+          show: false,
+          inRange: {
+            color: [
+              // "#1DE9B6", "#F46E36", "#04B9FF", "#5DBD32", "#FFC809", "#FB95D5", "#BDA29A", "#6E7074", "#546570", "#C4CCD3"
+              // "#ff002d"
+              // "#ffc188",
+              // "#479fd2",
+              // "#fba853",
+              // "#48c7c0",
+              // "#fa8737",
+              // "#4bbdd6",
+              // "#ff6f5b",
+              // "#F4D5B1",
+              // "#ADE1E3",
+              // "#F4B387",
+              // "#F0F3F4"
+            ]
+          }
+        },
+
+        series: [
+          {
+            type: 'effectScatter',
+            coordinateSystem: 'geo',
+            data: [
+              {"name": "秦华", "value": [108.94592, 34.27197]},
+              {"name": "港务区", "value": [109.06265, 34.39048]},
+              {"name": "千阳县", "value": [108.6, 34.45]},
+              {"name": "平利县", "value": [109.2, 33.98]},
+              {"name": "卢氏县", "value": [109.5, 34.17]}
+            ],
+            rippleEffect: {
+              period: 10, // 动画时间，值越小速度越快
+              color: "#fff",
+              brushType: 'stroke', // 波纹绘制方式 stroke, fill
+              scale: 3 // 波纹圆环最大限制，值越大波纹越大
+            },
+            hoverAnimation: true,
+            itemStyle: {
+              color: '#e5925e',// 中心点颜色
+              shadowBlur: 10,
+              shadowColor: '#e5925e'// 波纹颜色
+            }
+          }
+        ]
+      }
+      if (this.mode == '0') {
+        option.geo = {  //地图设置
+          show: true,
+          map: mapjson.name,
+          label: {
+            normal: {
+              show: true,
+              textStyle: {
+                color: '#fff'
+              }
+            },
+            emphasis: {
+              textStyle: {
+                color: '#fff'
+              }
+            }
+          },
+          selectedMode: 'single',
+          roam: false,
+
+          emphasis: {   //高亮区域样式
+            label: {
+              normal: {
+                show: true,
+                textStyle: {
+                  color: '#fff'
+                }
+              },
+              emphasis: {
+                textStyle: {
+                  color: '#fff'
+                }
+              }
+            },
+            itemStyle: {
+              areaColor: '#ffff2c'
+            }
+          },
+          itemStyle: {
+            normal: {
+              borderColor: '#666666',
+              borderWidth: 1,
+              areaColor: {
+                type: 'radial',
+                x: 0.5,
+                y: 0.5,
+                r: 0.8,
+                colorStops: [{
+                  offset: 0,
+                  color: '#02363f' // 0% 处的颜色
+                }, {
+                  offset: 1,
+                  color: '#02363f'
+                }],
+                globalCoord: false // 缺省为 false
+              },
+              shadowBlur: 0
+            }
+          },
+          regions: colors
+        }
+      }
+      if (this.mode == '1') {
+        option.geo = {  //地图设置
+          show: true,
+          map: mapjson.name,
+          label: {
+            normal: {
+              show: true,
+              textStyle: {
+                color: '#fff'
+              }
+            },
+            emphasis: {
+              textStyle: {
+                color: '#fff'
+              }
+            }
+          },
+          selectedMode: 'single',
+          roam: false,
+
+          emphasis: {   //高亮区域样式
+            label: {
+              show: false
+            },
+            itemStyle: {
+              areaColor: '#62fff7'
+            }
+          },
+          // itemStyle: {
+          //   normal: {
+          //     borderWidth:0
+          //   }
+          //   },
+          itemStyle: {
+            normal: {
+              borderColor: '#21e3dc',
+              borderWidth: 1,
+              areaColor: {
+                type: 'radial',
+                x: 0.5,
+                y: 0.5,
+                r: 0.8,
+                colorStops: [{
+                  offset: 0,
+                  color: '#02363f' // 0% 处的颜色
+                }, {
+                  offset: 1,
+                  color: '#02363f'
+                }],
+                globalCoord: false // 缺省为 false
+              },
+              // shadowColor: '#21e3dc',
+              // // shadowColor: 'rgba(255, 255, 255, 1)',
+              // shadowOffsetX: -1,
+              // shadowOffsetY: 1,
+              shadowBlur: 0
+            }
+            // emphasis: {
+            //   areaColor: '#389BB7',
+            //   borderWidth: 0
+            // }
+          }
+          // regions: colors
+        }
+      }
+      chart.setOption(option)
+      let index = -1
+      // var timer = setInterval(function () {
+      //   // 隐藏提示框
+      //   chart.dispatchAction({
+      //     type: 'hideTip',
+      //     seriesIndex: 0,
+      //     dataIndex: index
+      //   })
+      //   // 显示提示框
+      //   chart.dispatchAction({
+      //     type: 'showTip',
+      //     seriesIndex: 0,
+      //     dataIndex: index + 1
+      //   })
+      //   // 取消高亮指定的数据图形
+      //   chart.dispatchAction({
+      //     type: 'downplay',
+      //     seriesIndex: 0,
+      //     dataIndex: index
+      //   })
+      //   // 高亮指定的数据图形
+      //   chart.dispatchAction({
+      //     type: 'highlight',
+      //     seriesIndex: 0,
+      //     dataIndex: index + 1
+      //   })
+      //   index++
+      //   if (index > data.length) {
+      //     index = -1
+      //   }
+      // }, 2000)
+    }
+  },
+  beforeDestroy () {
+    //清除定时器
+    // clearInterval(this.timer)
+  },
+  ready () {
+    this.list.push(this.mapdata[0].name)
+    this.drawChinaMap(this.mapdata[0])
+  }
+}
+</script>