manage-client 3.1.26 → 3.1.27

package/src/components/qinhua/qinHuaMap.vue

@@ -1,390 +1,414 @@
-<template>
-    <div style="width: 30%;height: 55%">
-      <!--<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>
-</template>
-
-<script>
-
-  // import '../../stores/shanxi1.js'
-
-  export default {
-    name: 'echart-map',
-    props: {
-      mode: String,
-      idname: String
-    },
-    data () {
-      return {
-        mapdata: [
-          {name: 'wuhai', value: require('../../../static/wuhai.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)
-        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'
-        }
-        let 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
-     //      }
-        ]
-        let col = ['#2a4096', '#1285de', '#27459b', '#284ba5', '#225bb2', '#2353a8', '#244ca3', '#1775cd', '#1e64bc', '#05a0fc', '#108de7', '#1b6dc3']
-        let colors = []
-        for (let i = 0; i < data.length; i++) {
-          let jo = {
-            name: data[i].name,
-            itemStyle: {
-              areaColor: col[i],
-              // color: '#02363f'
-              color: col[i]
-            }
-          }
-          colors.push(jo)
-        }
-        let 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提示框的大小
-              let x = point[0] //
-              let y = point[1]
-              let viewWidth = size.viewSize[0]
-              let viewHeight = size.viewSize[1]
-              let boxWidth = size.contentSize[0]
-              let boxHeight = size.contentSize[1]
-              let posX = 0 //x坐标位置
-              let 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": [106.817762, 39.673527]},
-                {"name": "海南区","value": [106.884789, 39.44153]},
-                {"name": "乌达区","value": [106.722711, 39.502288]}
-              ],
-              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>