Echarts 中国地图点击插小旗

echarts yekong

Echarts 中国地图点击插小旗

<template>
  <div class="echarts12">
    <div class="echarts1" ref="echarts">
    </div>
  </div>
</template>

<script>
import map from './map.json'
export default {
  name: 'echarts1',
  components: { },
  props: {
    id: {
      type: String,
      default () {
        return ''
      }
    }
  },
  data () {
    return {
      status: '',
    }
  },
  watch: {},
  mounted () {
    this.drawechartmap()
  },
  methods: {
    drawechartmap () {
      var that = this
      var geoCoordMap = {
        '上海': [119.1803, 31.2891],
        '福建': [119.4543, 25.9222],
        '重庆': [108.384366, 30.439702],
        '北京': [116.4551, 40.2539],
        '辽宁': [123.1238, 42.1216],
        '河北': [114.4995, 38.1006],
        '天津': [117.4219, 39.4189],
        '山西': [112.3352, 37.9413],
        '陕西': [109.1162, 34.2004],
        '甘肃': [103.5901, 36.3043],
        '宁夏': [106.3586, 38.1775],
        '青海': [101.4038, 36.8207],
        '新疆': [87.9236, 43.5883],
        '西藏': [91.11, 29.97],
        '四川': [103.9526, 30.7617],
        '吉林': [125.8154, 44.2584],
        '山东': [117.1582, 36.8701],
        '河南': [113.4668, 34.6234],
        '江苏': [118.8062, 31.9208],
        '安徽': [117.29, 32.0581],
        '湖北': [114.3896, 30.6628],
        '浙江': [119.5313, 29.8773],
        '内蒙古': [110.3467, 41.4899],
        '江西': [116.0046, 28.6633],
        '湖南': [113.0823, 28.2568],
        '贵州': [106.6992, 26.7682],
        '云南': [102.9199, 25.4663],
        '广东': [113.12244, 23.009505],
        '广西': [108.479, 23.1152],
        '海南': [110.3893, 19.8516],
        '黑龙江': [127.9688, 45.368],
        '台湾': [121.4648, 25.5630]
      }
      var mapDate = []
      window.addEventListener('resize', this.drawechartmap)
      var myChart = this.$echarts.init(this.$refs.echarts)
      this.$echarts.registerMap('china', map)
      var data = [
        {
          name: '北京',
          value: 2
        }, {
          name: '天津',
          value: 5
        }, {
          name: '上海',
          value: 1
        }, {
          name: '重庆',
          value: 0
        }, {
          name: '河北',
          value: 0
        }, {
          name: '河南',
          value: 0
        }, {
          name: '云南',
          value: 0
        }, {
          name: '辽宁',
          value: 0
        }, {
          name: '黑龙江',
          value: 0
        }, {
          name: '湖南',
          value: 0
        }, {
          name: '安徽',
          value: 0
        }, {
          name: '山东',
          value: 0
        }, {
          name: '新疆',
          value: 0
        }, {
          name: '江苏',
          value: 0
        }, {
          name: '浙江',
          value: 0
        }, {
          name: '江西',
          value: 0
        }, {
          name: '湖北',
          value: 0
        }, {
          name: '广西',
          value: 0
        }, {
          name: '甘肃',
          value: 0
        }, {
          name: '山西',
          value: 0
        }, {
          name: '内蒙古',
          value: 0
        }, {
          name: '陕西',
          value: 0
        }, {
          name: '吉林',
          value: 5
        }, {
          name: '福建',
          value: 5
        }, {
          name: '贵州',
          value: 15
        }, {
          name: '广东',
          value: 15
        }, {
          name: '青海',
          value: 0
        }, {
          name: '西藏',
          value: 0
        }, {
          name: '四川',
          value: 0
        }, {
          name: '宁夏',
          value: 0
        }, {
          name: '海南',
          value: 0
        }]
      const tooltipFormatter = function (params) {
        console.log(params)
        return `<div style="width: 100px;height: 46px;position: relative">
        <img src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABkAAAAmCAYAAAAxxTAbAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAAyZpVFh0WE1MOmNvbS5hZG9iZS54bXAAAAAAADw/eHBhY2tldCBiZWdpbj0i77u/IiBpZD0iVzVNME1wQ2VoaUh6cmVTek5UY3prYzlkIj8+IDx4OnhtcG1ldGEgeG1sbnM6eD0iYWRvYmU6bnM6bWV0YS8iIHg6eG1wdGs9IkFkb2JlIFhNUCBDb3JlIDcuMC1jMDAwIDc5LmRhYmFjYmIsIDIwMjEvMDQvMTQtMDA6Mzk6NDQgICAgICAgICI+IDxyZGY6UkRGIHhtbG5zOnJkZj0iaHR0cDovL3d3dy53My5vcmcvMTk5OS8wMi8yMi1yZGYtc3ludGF4LW5zIyI+IDxyZGY6RGVzY3JpcHRpb24gcmRmOmFib3V0PSIiIHhtbG5zOnhtcD0iaHR0cDovL25zLmFkb2JlLmNvbS94YXAvMS4wLyIgeG1sbnM6eG1wTU09Imh0dHA6Ly9ucy5hZG9iZS5jb20veGFwLzEuMC9tbS8iIHhtbG5zOnN0UmVmPSJodHRwOi8vbnMuYWRvYmUuY29tL3hhcC8xLjAvc1R5cGUvUmVzb3VyY2VSZWYjIiB4bXA6Q3JlYXRvclRvb2w9IkFkb2JlIFBob3Rvc2hvcCAyMi40IChNYWNpbnRvc2gpIiB4bXBNTTpJbnN0YW5jZUlEPSJ4bXAuaWlkOkJDRjgyRDBCRkZBNTExRUI5REVGQkJCQkQ3NEExRkNGIiB4bXBNTTpEb2N1bWVudElEPSJ4bXAuZGlkOkJDRjgyRDBDRkZBNTExRUI5REVGQkJCQkQ3NEExRkNGIj4gPHhtcE1NOkRlcml2ZWRGcm9tIHN0UmVmOmluc3RhbmNlSUQ9InhtcC5paWQ6QkNGODJEMDlGRkE1MTFFQjlERUZCQkJCRDc0QTFGQ0YiIHN0UmVmOmRvY3VtZW50SUQ9InhtcC5kaWQ6QkNGODJEMEFGRkE1MTFFQjlERUZCQkJCRDc0QTFGQ0YiLz4gPC9yZGY6RGVzY3JpcHRpb24+IDwvcmRmOlJERj4gPC94OnhtcG1ldGE+IDw/eHBhY2tldCBlbmQ9InIiPz77Rw6pAAAGA0lEQVR42rxX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"
         style="width:24px;position: absolute;left: -30px;top: -50px" alt="">
        <div style="width: 100px;height: 46px;top: -50px;position: absolute;
         background: #0080EE;box-shadow:#0759AA 0 0 10px 2px;border-radius: 10px;">
        <div style="font-size: 12px; padding-left:5px;font-family: PingFang;font-weight: 500;color: #FFFFFF;">累计车位数:</div>
          <div style="font-size: 16px; padding-left:5px;font-family: DIN;font-weight: bold;color: #FFFFFF;">${params.data.value}</div>
      </div>
    </div>`
      }
      var option = {
        //地图显示:移动鼠标,显示数据
        tooltip: {
          trigger: 'item',
          show: false,
          showDelay: 0,
          transitionDuration: 0.2,
          borderWidth: 0,
          backgroundColor: 'rgba(255,255,255,0)',
          padding: 0,
          formatter: tooltipFormatter
        },
        //图例
        visualMap: {
          min: 19000,
          max: 70000,
          right: 10,
          bottom: 40,
          showLabel: !0,
          textStyle: {
            color: 'rgba(167, 194, 240, 1)'
          },
          pieces: [{
            gt: 10,
            lt: 20,
            label: '投放运营',
            color: 'rgba(255, 187, 5, 1)'
          }, {
            gt: 0,
            lt: 10,
            label: '战略部署',
            color: 'rgba(0, 228, 102, 1)'
          }, {
            gt: 0,
            lt: 0,
            label: '',
            color: '#00338F'
          }],
          show: !0
        },
        toolbox: {
          show: false,
          orient: 'vertical',
          left: 'right',
          top: 'center',
          feature: {
            dataView: {
              readOnly: false
            },
            restore: {},
            saveAsImage: {}
          }
        },
        geo: {
          map: 'china',
          zoom: 1,
          label: {
            normal: {
              show: false,
              color: '#000000'
            },
            emphasis: {
              show: false,
              color: '#292929'
            }
          },
          roam: false,
          itemStyle: {
            normal: {
              areaColor: '#00338F'
            },
          }
        },
        series: [
          {
            type: 'map',
            mapType: 'china',
            map: 'china',
            itemStyle: {
              normal: {
                areaColor: '#00338F',
                borderColor: '#0094D6',
                borderWidth: 0.5,
                label: {
                  show: false,
                }
              },
              emphasis: {
                areaColor: '#FFBB07',
                borderColor: '#0094D6',
                areaStyle: '#FFBB07',
                label: {
                  show: false,
                }
              }
            },
            label: {
              normal: {
                show: false
              },
              emphasis: {
                show: false
              }
            },
            data: data
          },
          {
            type: 'scatter',
            coordinateSystem: 'geo',
            // symbol: 'pin',
            symbol: function (value, params) {
              return 'image://data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABkAAAAmCAYAAAAxxTAbAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAAyZpVFh0WE1MOmNvbS5hZG9iZS54bXAAAAAAADw/eHBhY2tldCBiZWdpbj0i77u/IiBpZD0iVzVNME1wQ2VoaUh6cmVTek5UY3prYzlkIj8+IDx4OnhtcG1ldGEgeG1sbnM6eD0iYWRvYmU6bnM6bWV0YS8iIHg6eG1wdGs9IkFkb2JlIFhNUCBDb3JlIDcuMC1jMDAwIDc5LmRhYmFjYmIsIDIwMjEvMDQvMTQtMDA6Mzk6NDQgICAgICAgICI+IDxyZGY6UkRGIHhtbG5zOnJkZj0iaHR0cDovL3d3dy53My5vcmcvMTk5OS8wMi8yMi1yZGYtc3ludGF4LW5zIyI+IDxyZGY6RGVzY3JpcHRpb24gcmRmOmFib3V0PSIiIHhtbG5zOnhtcD0iaHR0cDovL25zLmFkb2JlLmNvbS94YXAvMS4wLyIgeG1sbnM6eG1wTU09Imh0dHA6Ly9ucy5hZG9iZS5jb20veGFwLzEuMC9tbS8iIHhtbG5zOnN0UmVmPSJodHRwOi8vbnMuYWRvYmUuY29tL3hhcC8xLjAvc1R5cGUvUmVzb3VyY2VSZWYjIiB4bXA6Q3JlYXRvclRvb2w9IkFkb2JlIFBob3Rvc2hvcCAyMi40IChNYWNpbnRvc2gpIiB4bXBNTTpJbnN0YW5jZUlEPSJ4bXAuaWlkOkJDRjgyRDBCRkZBNTExRUI5REVGQkJCQkQ3NEExRkNGIiB4bXBNTTpEb2N1bWVudElEPSJ4bXAuZGlkOkJDRjgyRDBDRkZBNTExRUI5REVGQkJCQkQ3NEExRkNGIj4gPHhtcE1NOkRlcml2ZWRGcm9tIHN0UmVmOmluc3RhbmNlSUQ9InhtcC5paWQ6QkNGODJEMDlGRkE1MTFFQjlERUZCQkJCRDc0QTFGQ0YiIHN0UmVmOmRvY3VtZW50SUQ9InhtcC5kaWQ6QkNGODJEMEFGRkE1MTFFQjlERUZCQkJCRDc0QTFGQ0YiLz4gPC9yZGY6RGVzY3JpcHRpb24+IDwvcmRmOlJERj4gPC94OnhtcG1ldGE+IDw/eHBhY2tldCBlbmQ9InIiPz77Rw6pAAAGA0lEQVR42rxXW4hWVRT+1j77nP8290vizHhJRhRTGRooS8MohsY3e4jU6K2HJBJCfBHChyQrKiEKC4Ik0odMCtPQTEmoINRES0JRp3EMnWkc5+LMP/Ofs/du7X3OXBxmnF+D9s/h32ftvdf1W2vtQ488CzcC7YNkBgIaxggo41X6wjxtgA0GtIq3lGDS4LU2pfVBSbRXhTirpEYqDfTcLKD/b0B48T6JKU7yWENEW3XMfIw4eRBoie95S1irjazdbibt4Of65H1i8jkDbzsJ7ytBWGWZE1ME7zIsJ4yAQghEijcSHxaG6caqUCp9vBoI7zhvf2KyEDlugCEB7yMib6MxylE8NrdQAG7221cPgjmAGWvFTmXmmZRCVRnxPFaCx2KP/K+hwrUq0j+NCbF+05o1E8EWAguAihc8QnefQb5AaF5cQEvzMB6creDzWv8I4fRFie9PSvzVSairBnzLhwWp0FRXlKa/kA3RaqVMu7WYaup81MyVK+vm545Eoc45C9hX7V0G9bUhtr1QwMqFIdK1zCGdhIcPohfouuHh0x9T2HXQQ325j2zGOFdKaX2JL6NQrbMR8Eqqg6CqJvVOrkw0RZGBzw681m2waF6I3ZuG0bQ0gqxOGOtEiP1ngblKDkBjiNllwIFTAhlfIGBTlXZ7HmLLTrCMq96yZ9LNZVn/TRbg2xgMDBGCQGHP5jwa5rJa2YTpVCi0sEkByxqUmx89GaAsR06f2GCaJQNzTKRU0KI4hiZZ6GY3bFk/ggZ7kJ0HNS2CY+EUZ9ArrQUsXxyhd4AczcVC0MO3b+nVDBP9pDbEyGEUsYAFcxRalxZiCxRmHomVfpXBc48XMJDXo0iz2lVJ6T0lGLgLyGY5CxlmJC1fGKEia3BPw7ptBGhaECGd0aw3OUH8yFSOGu1ymZPJGnmcKXU1iK24FzkJ4mbVatSWeYiiCYYq1IiY/fhwGzTua1ASC+MCNW6ntWQgLhE2mTQ6/uFN+SkKzl25x9Z0dRO6ehXniZ5I7hM6QgejwPkwkzY4fylAT16MJ12x7mIon7oYID/MxUmMksmWq3YBoX+2pcoKqeTotF8X+PZ0wPYVaU2SpIOdAvt+CVCeIeeyZPTw2wkx2F84wkRbHZ1GtRUa7++TuHyVM/M207xpLKIJdFbow8M+zl0EykuNU9ilJOEPBthRka0o+VXB+85wRtoCV8oJWBgJsPHjHNoueQ6aY0ijxDqaAI4e4LMjAXZ9k8XcGi+OstvGvzB8W0b5K17jMl+RCa/KlL+B4SYt1spZUEenh0PnPNSVAnUcq6DMxMkZJYKGgcsXJHYeSmHn/gzqqwTSKRNXdHaNgtofInyLmRtqfd5zjalvILc5yAXvWotsI7KFsofd0Me1bFkjl/omjXm1EQKm3xoUONMm8MNpid4+ifoa22pjASL24dl+GmqNoG9Yt0mLACt5sC96j4nZTDazjbTyQta6gmtSlq1ouxbgg0uE0EQWLZy0Eiku59m0xpwHYhxpHfuT7T1vjF7HUyeAJnZG27zCUL8RqOiK9MR2XpyvtHFwrLTBLDHugjEGTjIORXqsUFnYq/1MeY3R0nGXHu8iukdFpnVkSO3l/DEuocydGT0KUUd3L6adW/bLWpv1TOugGS4So8wu5AejF8MwbGHlDzPpNk2dmG1GRTtYWjM/n/B7OF39vFsRPzYS6jVcz9ZyM/gtFjTalMx2dthjPNvKrzdnKtIzZzThGMfrJUZdjwuyMZ9zcF/npc5iO0FRcpj5GaPpz6RUHRhP95kLnJy25tmmY28ePiUFzzErxDNB44GXSUHQdzQhk/ymFUJ8gcuVS4a1FSBcck6yXExxKK65SdwyJj1WyGU+KonvAtU0BlPL0w9GW6i5t66V2CONnOgughlfv8Nd/2WYCa4T+B/G/yKEv1+KuzWM1637EFLc1YRiABBFLjeNHrJfMqbIa02x6tkvhhX8zEnypYVta4hxNPPDndAUYQetEkIcj+HMFUuITTx7lM+uKEZDb96iYEZlmHne/nFzs/fLPNtyhpvULl74vRgh/wowAI86mxvPx70wAAAAAElFTkSuQmCC'
            },
            symbolSize: [24, 35],
            symbolOffset: [-0, -0],
            hoverAnimation: true,
            itemStyle: {
              normal: {
                color: 'pink' // 标志颜色
              }
            },
            zlevel: 6,
            data: []
          },
          {
            type: 'scatter',
            coordinateSystem: 'geo',
            label: {
              normal: {
                show: true,
                formatter: function (params) {
                  var name = params.name
                  var value = params.data.datas
                  var text = `{fline|累计车位数:}\n{tline|${params.data.number}}`
                  return text
                },
                color: '#fff',
                rich: {
                  fline: {
                    padding: [0, 10, 5, 15],
                    color: '#fff',
                    fontSize: 12,
                    fontWeight: 400,
                  },
                  tline: {
                    padding: [5, 15],
                    color: '#fff',
                    fontSize: 16,
                    fontFamily: 'DIN',
                    fontWeight: 'bold'
                  },
                },
              },
              emphasis: {
                show: true,
              },
            },
            itemStyle: {
              color: '#00FFF6',
            },
            symbol: function (value, params) {
              return 'image://data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAHYAAABACAYAAADPhIOhAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAAyZpVFh0WE1MOmNvbS5hZG9iZS54bXAAAAAAADw/eHBhY2tldCBiZWdpbj0i77u/IiBpZD0iVzVNME1wQ2VoaUh6cmVTek5UY3prYzlkIj8+IDx4OnhtcG1ldGEgeG1sbnM6eD0iYWRvYmU6bnM6bWV0YS8iIHg6eG1wdGs9IkFkb2JlIFhNUCBDb3JlIDcuMC1jMDAwIDc5LmRhYmFjYmIsIDIwMjEvMDQvMTQtMDA6Mzk6NDQgICAgICAgICI+IDxyZGY6UkRGIHhtbG5zOnJkZj0iaHR0cDovL3d3dy53My5vcmcvMTk5OS8wMi8yMi1yZGYtc3ludGF4LW5zIyI+IDxyZGY6RGVzY3JpcHRpb24gcmRmOmFib3V0PSIiIHhtbG5zOnhtcD0iaHR0cDovL25zLmFkb2JlLmNvbS94YXAvMS4wLyIgeG1sbnM6eG1wTU09Imh0dHA6Ly9ucy5hZG9iZS5jb20veGFwLzEuMC9tbS8iIHhtbG5zOnN0UmVmPSJodHRwOi8vbnMuYWRvYmUuY29tL3hhcC8xLjAvc1R5cGUvUmVzb3VyY2VSZWYjIiB4bXA6Q3JlYXRvclRvb2w9IkFkb2JlIFBob3Rvc2hvcCAyMi40IChNYWNpbnRvc2gpIiB4bXBNTTpJbnN0YW5jZUlEPSJ4bXAuaWlkOjFENjQ5ODhCMDA5MjExRUM5RUQ3RkU4NUFFRjZFOUZCIiB4bXBNTTpEb2N1bWVudElEPSJ4bXAuZGlkOjFENjQ5ODhDMDA5MjExRUM5RUQ3RkU4NUFFRjZFOUZCIj4gPHhtcE1NOkRlcml2ZWRGcm9tIHN0UmVmOmluc3RhbmNlSUQ9InhtcC5paWQ6MUQ2NDk4ODkwMDkyMTFFQzlFRDdGRTg1QUVGNkU5RkIiIHN0UmVmOmRvY3VtZW50SUQ9InhtcC5kaWQ6MUQ2NDk4OEEwMDkyMTFFQzlFRDdGRTg1QUVGNkU5RkIiLz4gPC9yZGY6RGVzY3JpcHRpb24+IDwvcmRmOlJERj4gPC94OnhtcG1ldGE+IDw/eHBhY2tldCBlbmQ9InIiPz5mHuUCAAADhUlEQVR42uydTW7bMBCFhxJje9m0mxwg61yi9/KiRU+TM3TXE3TZKxRpu0tsi2TtRJRHoyHtNrFEG+8BhGhKRgB+fsMfx0Nzcx8oI0N5HboPvU7hf+/bA7DMkW3Q6eGGA0BDDiyHFuuVaDOAOwlUXnbybf/HNsPh2gzUStQrpR0OPr1DIzjPrhyqZ891cG0GKi+1qPPnpMOh14PlroyvHYPK66TBlY41AmAsVryuhIsB9TRwvYAZS8PqpMAdhGIJ1bblqi2WtQPueFAbBnST6W+fC8UVg7eDOWMlAk7Bhd4GrAZ105Za6W8evrtQzGe/EuwO5nxbFu2VA7YiNAPs24J1wqXrttSsr6W7q/Y9RjpWc+viz+/wcfVEyxDoA/p9OhlDD/MFfXp3bb4mZso+NXniY2wEO189BkAtwcpbBqtHWtK1+SYmU4PhMDUr7rk2OA+o5cTpLYtqlhhzB2Al1LrnWu/Ro2VpxsbbWoOrOTYCth1cgC1NcmVico7VNile1rEAW5qsWG4OtngtDfd6h9uJAFuaaoVTz6C5b3c6sAZgSwarfgmT+j62H5IdwBamKjW2psAaZbw15B26srC9igSrrGOHcgB7jrOrI8AiFF8oWDgWYCGAhQAWOgVYA7BwLHROYJsGPQXHQgALTR2KAfZCHYsxFssdCKEYQiiG4FgIyx2ABdgLDcUYY7HcgRCKIYCFABYCWIAF2AsFi38YP3ewPK3MPncffrtTmkKCVdax/E3PmUiwji1OMUNM0KCmHEvUTzHjEIqLkxNwSXOsvOFJ5vDDD59LBsuTZXYsreJU7tbmuQBsaWraIkNyx9JmxtZ9Dj+ALU0b2qfjU8daqziVZ/x6yeEHsKVpzeA6FppDzrGeZHJGYx7IOWRnK0F1/YuBbTSoGlie9Dimc6tnd7ef199/LKlx79Gz08nY+ufV3e2XbXUlXCtnyGRu7kNMTBFTzPDE03NCWtspNh9yaW13UJ/a64r2ORUb9r5e9tOYEjXe5JlIQm/MRSLqMcCmElGvWZGh2GvrWCM+LdonaENIHT8G2EOp4zdsyeOUjYqgjbGpP+QIhz1MCTd12IM6xkqwJODKtOQ4nmU8qETHHc/ic7NiedKST4DFgUrjgJVXLU28bM/uPGlwKzaxwhFo00HWjkAjDaoEK+HGuiMcWliSgw+1qWAHD2TaAHc8qP98/68AAwB14eoLyYFs1wAAAABJRU5ErkJggg=='
            },
            symbolSize: [118, 64],
            symbolOffset: [70, 5],
            z: 999,
            data: [],
          },

        ]
      }
      myChart.resize()
      myChart.setOption(option)
      myChart.on('click', function (params) {
        var valarr = geoCoordMap[params.name]
        console.log(valarr)
        console.log(option.series[1])
        option.series[1].data = [{
          name: params.name,
          value: valarr,
          number: 1354,
        }]
        option.series[2].data = [{
          name: params.name,
          value: valarr,
          number: 1354,
        }]
        myChart.setOption(option, false)
      })
      myChart.on('dblclick', function (params) {
        console.log('双击')
        console.log(params)
        that.$refs.pops.getshow()
        myChart.setOption(option, false)
      })
    }
  }
}
</script>

<style lang="scss" scoped>
.echarts1 {
  position: relative;
  width: 100%;
  height: calc(100% - 0px);
}

.echarts12 {
  position: relative;
  width: 100%;
  height: calc(100% - 0px);
}
</style>

喜欢