admin-govern/src/components/echarts/MyEchartMap.vue

<!-- 地图组件 -->
<template>
  <div class="bars_w" :id="id"></div>
</template>

<script setup>
import { ref, nextTick, onMounted, defineEmits } from 'vue'
import * as echarts from 'echarts'
// import cqMap from '../../views/ECharts/zg.json'
import 'echarts/map/js/china.js'
import axios from 'axios'

const props = defineProps({
  id: {
    type: String,
    required: true
  },
  datas: {
    type: Array,
    required: true
  }
  // cqMap: {
  //   // type: String,
  //   // required: true
  // }
})
const myCharts = ref()
const emit = defineEmits(['getRegionByRegionId'])

onMounted(() => {
  GetEchar()
})
const 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
}

const GetEchar = () => { 
  nextTick(() => {
    let chartDom = document.getElementById(props.id)
    myCharts.value = echarts.init(chartDom)

    axios.get(`./zg.json`).then((res) => {
      echarts.registerMap('china', res.data)

      let option = {
        backgroundColor: '#001540',
        geo: {
          show: true,
          map: 'china',
          roam: true,
          top: 0,
          left: 0,
          zoom: 1,
          label: {
            emphasis: {
              show: false
            }
          },
          itemStyle: {
            normal: {
              borderColor: 'rgba(147, 235, 248, 1)',
              borderWidth: 1,
              areaColor: {
                type: 'radial',
                x: 0.5,
                y: 0.5,
                r: 0.8,
                colorStops: [
                  {
                    offset: 0,
                    color: 'rgba(147, 235, 248, 0)' // 0% 处的颜色
                  },
                  {
                    offset: 1,
                    color: 'rgba(147, 235, 248, .2)' // 100% 处的颜色
                  }
                ],
                globalCoord: false // 缺省为 false
              },
              shadowColor: 'rgba(128, 217, 248, 1)',
              // shadowColor: 'rgba(255, 255, 255, 1)',
              shadowOffsetX: -2,
              shadowOffsetY: 2,
              shadowBlur: 10
            },
            emphasis: {
              areaColor: '#389BB7',
              borderWidth: 0
            }
          }
        },
        series: [
          //地图？
          {
            type: 'map',
            map: 'china',
            geoIndex: 0,
            aspectScale: 0.75, //长宽比
            showLegendSymbol: false, // 存在legend时显示
            label: {
              normal: {
                show: false
              },
              emphasis: {
                show: false,
                textStyle: {
                  color: '#fff'
                }
              }
            },
            roam: true,
            itemStyle: {
              normal: {
                areaColor: '#031525',
                borderColor: '#FFFFFF'
              },
              emphasis: {
                areaColor: '#2B91B7'
              }
            },
            animation: false
          },
          //地图点的动画效果
          {
            //  name: 'Top 5',
            type: 'effectScatter',
            coordinateSystem: 'geo',

            symbolSize: function (val) {
              return val[2] / 10
            },
            showEffectOn: 'render',
            rippleEffect: {
              brushType: 'stroke'
            },
            hoverAnimation: true,
            label: {
              normal: {
                formatter: '{b}',
                position: 'right',
                show: true
              }
            },
            itemStyle: {
              normal: {
                shadowBlur: 10
              }
            },
            zlevel: 1
          }
        ]
      }
      myCharts.value.setOption(option)
    })

    window.addEventListener('resize', function () {
      myCharts.value.resize()
    })

    //设置默认选中高亮部分
    let index = 11
    myCharts.value.dispatchAction({
      type: 'highlight',
      seriesIndex: 0,
      dataIndex: index
    })

    // 点击事件
    myCharts.value.on('click', (e) => {
      emit('getRegionByRegionId', e.data)
      myCharts.value.dispatchAction({
        type: 'downplay',
        seriesIndex: 0,
        dataIndex: 0
      })
      if (e.dataIndex != index) {
        myCharts.value.dispatchAction({
          type: 'downplay',
          seriesIndex: 0,
          dataIndex: index
        })
      }
      myCharts.value.dispatchAction({
        type: 'highlight',
        seriesIndex: 0,
        dataIndex: e.dataIndex
      })
      index = e.dataIndex
    })
    // 当鼠标离开时
    myCharts.value.on('mouseout', function (e) {
      myCharts.value.dispatchAction({
        type: 'highlight',
        seriesIndex: 0,
        dataIndex: index
      })
    })
  })
}
</script>

<style lang="scss" scoped>
.bars_w {
  width: 100%;
  height: 500px;
}
</style>