vue3+echarts5 中国地图+散点地图

var mapData = [
  {
    id: 1,
    name: '北京市',
    value: 30,
    adcode: 110000
  },
  {
    id: 2,
    name: '广东省',
    value: 29,
    adcode: 440000
  },
  {
    id: 3,
    name: '四川省',
    value: 28,
    adcode: 510000
  },
  {
    id: 4,
    name: '上海市',
    value: 27,
    adcode: 310000
  },
  {
    id: 5,
    name: '山东省',
    value: 26,
    adcode: 370000
  },
  {
    id: 6,
    name: '江苏省',
    value: 25,
    adcode: 320000
  },
  {
    id: 7,
    name: '浙江省',
    value: 4.51,
    adcode: 330000
  },
  {
    id: 8,
    name: '河南省',
    value: 24,
    adcode: 410000
  },
  {
    id: 9,
    name: '湖南省',
    value: 23,
    adcode: 430000
  },
  {
    id: 10,
    name: '陕西省',
    value: 22,
    adcode: 610000
  },
  {
    id: 11,
    name: '河北省',
    value: 21,
    adcode: 130000
  },
  {
    id: 12,
    name: '山西省',
    value: 20,
    adcode: 140000
  },
  {
    id: 13,
    name: '湖北省',
    value: 19,
    adcode: 420000
  },
  {
    id: 14,
    name: '安徽省',
    value: 18,
    adcode: 340000
  },
  {
    id: 15,
    name: '福建省',
    value: 17,
    adcode: 350000
  },
  {
    id: 16,
    name: '重庆市',
    value: 16,
    adcode: 500000
  },
  {
    id: 17,
    name: '天津市',
    value: 15,
    adcode: 120000
  },
  {
    id: 18,
    name: '江西省',
    value: 14,
    adcode: 360000
  },
  {
    id: 19,
    name: '广西壮族自治区',
    value: 13,
    adcode: 450000
  },
  {
    id: 20,
    name: '辽宁省',
    value: 12,
    adcode: 210000
  },
  {
    id: 21,
    name: '内蒙古自治区',
    value: 11,
    adcode: 150000
  },
  {
    id: 22,
    name: '吉林省',
    value: 10,
    adcode: 220000
  },
  {
    id: 23,
    name: '贵州省',
    value: 9,
    adcode: 520000
  },
  {
    id: 24,
    name: '黑龙江省',
    value: 8,
    adcode: 230000
  },
  {
    id: 25,
    name: '甘肃省',
    value: 6,
    adcode: 620000
  },
  {
    id: 26,
    name: '云南省',
    value: 7,
    adcode: 530000
  },
  {
    id: 27,
    name: '新疆维吾尔自治区',
    value: 5,
    adcode: 650000
  },
  {
    id: 28,
    name: '海南省',
    value: 5,
    adcode: 460000
  },
  {
    id: 29,
    name: '宁夏回族自治区',
    value: 4,
    adcode: 640000
  },
  {
    id: 30,
    name: '香港特别行政区',
    value: 4,
    adcode: 810000
  },
  {
    id: 31,
    name: '青海省',
    value: 3,
    adcode: 630000
  },
  {
    id: 32,
    name: '台湾省',
    value: 3,
    adcode: 710000
  },
  {
    id: 33,
    name: '澳门特别行政区',
    value: 2,
    adcode: 820000
  },
  {
    id: 34,
    name: '西藏自治区',
    value: 1,
    adcode: 540000
  }
]
const option = {
  tooltip: {
    show: true,
    triggerOn: 'none',
    backgroundColor: 'rgba(0, 228, 255, 0.5)', //提示标签背景颜色
    borderColor: 'rgb(0 0 0 / 0%)',
    textStyle: {
      color: '#fff',
      fontSize: 16,
      width: 80,
      height: 40,
      overflow: 'break'
    },
    confine: true,
    formatter: `<span style='border-radius:20px!important'>{b}:{c}</span>`
  },
  geo: {
    show: true,
    //设置中心点
    center: [105, 36],
    map: 'china',
    roam: true, //是否允许缩放，拖拽
    zoom: 1, //初始化大小
    //缩放大小限制
    scaleLimit: {
      min: 1.2, //最小
      max: 12 //最大
    },
    label: {
      normal: {
        show: true,
        fontSize: '14',
        color: 'rgba(226, 246, 255, 0.8)'
      },
      emphasis: {
        show: true
      }
    },
    //各个省份模块样式设置
    itemStyle: {
      areaColor: 'rgb(10,28,112)', //背景色
      color: 'rgba(226, 246, 255, 0.8)', //字体颜色
      borderColor: '#5e84fd',
      borderWidth: 1
    },
    //高亮状态
    emphasis: {
      itemStyle: {
        areaColor: '#0582bb',
        color: 'rgba(226, 246, 255, 0.8)'
      },
      label: {
        show: true,
        color: '#fff'
      }
    },
    // 显示层级
    z: 10
    // silent: true
  },
  // dataset: { ...dataJson },
  series: [
    {
      type: 'map',
      mapType: 'china',
      geoIndex: 0,
      data: mapData,
      hoverAnimation: false,
      label: {
        formatter: `<span >{b}:{c}</span>`
      }
      // silent: true
    }
  ]
}

以下代码是组件封的

<template>
  <v-chart ref="vChartRef" :theme="themeColor" :option="option" :manual-update="isPreview()" autoresize></v-chart>
</template>

<script setup lang="ts">
import { computed, PropType, ref, onMounted } from 'vue'
import VChart from 'vue-echarts'
import { use } from 'echarts/core'
import { CanvasRenderer } from 'echarts/renderers'
import { MapChart } from 'echarts/charts'
import { mergeTheme } from '@/packages/public/chart'
import config, { includes } from './config'
import { useChartDataFetch } from '@/hooks'
import { useChartEditStore } from '@/store/modules/chartEditStore/chartEditStore'
import { isPreview } from '@/utils'
import { DatasetComponent, GridComponent, TooltipComponent, LegendComponent } from 'echarts/components'
import chinaMap from './china.json'
const props = defineProps({
  themeSetting: {
    type: Object,
    required: true
  },
  themeColor: {
    type: Object,
    required: true
  },
  chartConfig: {
    type: Object as PropType<config>,
    required: true
  }
})

use([DatasetComponent, CanvasRenderer, MapChart, GridComponent, TooltipComponent, LegendComponent])

const option = computed(() => {
  return mergeTheme(props.chartConfig.option, props.themeSetting, includes)
})

const { vChartRef } = useChartDataFetch(props.chartConfig, useChartEditStore, (newData: any) => {
  if (vChartRef.value) {
    let nowOption = vChartRef.value.getOption()
    vChartRef.value.setOption({
      ...nowOption,
      series: [
        {
          ...nowOption.series[0],
          data: newData
        }
      ]
    })
    let dataJson = newData
    let selectData: any = []
    dataJson.forEach((item: any) => {
      if (item.value > 0) {
        selectData.push(item)
      }
    })
    //高亮当前的城市
    vChartRef.value.dispatchAction({
      type: 'highlight',
      seriesIndex: 0,
      name: selectData[0].name
    })
    vChartRef.value.dispatchAction({
      type: 'showTip',
      seriesIndex: 0,
      name: selectData[0].name
    })
  }
})
</script>

http://datav.aliyun.com/portal/school/atlas/area_selector#&lat=30.332329214580188&lng=106.72278672066881&zoom=3.5    全国json数据

 

地图散点

<template>
  <v-chart ref="vChartRef" :theme="themeColor" :option="option" :manual-update="isPreview()" autoresize></v-chart>
</template>

<script setup lang="ts">
import { computed, PropType } from 'vue'
import VChart from 'vue-echarts'
import { use } from 'echarts/core'
import { CanvasRenderer } from 'echarts/renderers'
import { MapChart } from 'echarts/charts'
import { mergeTheme } from '@/packages/public/chart'
// import config, { includes } from './config'
import { useChartDataFetch } from '@/hooks'
import { useChartEditStore } from '@/store/modules/chartEditStore/chartEditStore'
import { isPreview } from '@/utils'
import { DatasetComponent, GridComponent, TooltipComponent, LegendComponent } from 'echarts/components'
import { mapData } from './config'
import chinaMap from './china.json'
const props = defineProps({
  themeSetting: {
    type: Object,
    required: true
  },
  themeColor: {
    type: Object,
    required: true
  },
  chartConfig: {
    type: Object as PropType<config>,
    required: true
  }
})

use([DatasetComponent, CanvasRenderer, MapChart, GridComponent, TooltipComponent, LegendComponent])

var convertData = function (mapData: any) {
  let geoCoordMap: any = {}
  // 获取地区详细信息
  let mapFeatures = chinaMap.features
  // 遍历获取每个地区的经纬度
  mapFeatures.forEach(function (v, i) {
    // 获取当前地区名
    let name = v.properties.name
    if (name) {
      // 获取当前地区的经纬度
      geoCoordMap[name] = v.properties.center
    }
  })
  var res = []
  for (var i = 0; i < mapData.length; i++) {
    var geoCoord = geoCoordMap[mapData[i].name]
    if (geoCoord) {
      res.push({
        name: mapData[i].name,
        value: geoCoord.concat(mapData[i].value, mapData[i].ratio),
        ratio: mapData[i].ratio
      })
    }
  }
  return res
}

const option = {
  tooltip: {
    triggerOn: 'item',
    formatter: function (params: any) {
      if (isNaN(params.value)) {
        params.value = 0
      }
      if (params.seriesName === '散点') {
        params.value = params.data.value[2]
      }
      var html = '<span>' + params.name + '：</span><br/>'
      html += '<span>值：' + params.value + '</span><br/>'
      return html
    },
    color: '#fff'
  },
  geo: {
    show: true,
    //设置中心点
    center: [105, 36],
    map: 'china',
    roam: true, //是否允许缩放，拖拽
    zoom: 1, //初始化大小
    //缩放大小限制
    scaleLimit: {
      min: 1.2, //最小
      max: 12 //最大
    },
    label: {
      normal: {
        show: true,
        fontSize: '14',
        color: 'rgba(226, 246, 255, 0.8)'
      },
      emphasis: {
        show: true, // 显示地区名称
        color: 'rgba(226, 246, 255, 0.8)'
      }
    },
    //各个省份模块样式设置
    itemStyle: {
      areaColor: 'rgb(10,28,112)', //背景色
      color: 'rgba(226, 246, 255, 0.8)', //字体颜色
      borderColor: '#5e84fd',
      borderWidth: 1
    },

    //高亮状态
    emphasis: {
      itemStyle: {
        areaColor: 'rgb(10,28,112)',
        color: 'rgba(226, 246, 255, 0.8)'
      },
      label: {
        show: true
      }
    },
    // 显示层级
    z: 10
  },
  //进行气泡标点
  series: [
    {
      type: 'map',
      map: mapData,
      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: '#3B5077'
        },
        emphasis: {
          areaColor: '#2B91B7'
        }
      },
      animation: true,
      data: mapData
    },
    {
      name: '', // 自定义名称
      type: 'effectScatter', // scatter  effectScatter
      coordinateSystem: 'geo', // 设置坐标系类型
      data: convertData(mapData), // 设置散点位置和数据
      symbolSize: function (val: any) {
        // 设置散点大小
        return val[3] * 10
      },
      showEffectOn: 'render',
      rippleEffect: {
        brushType: 'stroke'
      },
      hoverAnimation: true, // 是否显示鼠标悬浮动画
      label: {
        // 静态显示时的样式
        normal: {
          show: true, // 显示地区名称
          fontSize: '16',
          formatter: function (data: any) {
            // 显示模板
            return data.name + ':' + data.value[2]
          },
          position: 'right' // 显示位置
        }
      },
      itemStyle: {
        normal: {
          color: function (res: any) {
            let value = res.value[2]
            //根据value值对标点进行不同颜色显示  /crm-api/view/toker/entCount
            return '#4ed7fa'
          },
          shadowBlur: 5
        }
      },
      zlevel: 3
    }
  ]
}
//这里是组件封装过后 接口调用返回的数据 newData
const { vChartRef } = useChartDataFetch(props.chartConfig, useChartEditStore, (newData: any) => {
  if (vChartRef.value) {
    let nowOption = vChartRef.value.getOption()
    vChartRef.value.setOption({
      ...option,
      //进行气泡标点
      series: [
        {
          data: newData
        },
        {
          name: '', // 自定义名称
          type: 'effectScatter', // scatter  effectScatter
          coordinateSystem: 'geo', // 设置坐标系类型
          data: convertData(newData), // 设置散点位置和数据
          symbolSize: function (val: any) {
            let nowValue = val[3] * 2
            if (nowValue < 6) {
              nowValue = 6
            } else if (nowValue > 16) {
              nowValue = 16
            }
            // 设置散点大小
            return nowValue
          },
          showEffectOn: 'render',
          rippleEffect: {
            brushType: 'stroke'
          },
          hoverAnimation: true, // 是否显示鼠标悬浮动画
          label: {
            // 静态显示时的样式
            normal: {
              show: true, // 显示地区名称
              fontSize: '16',
              formatter: function (data: any) {
                // 显示模板
                return data.value[2] > '0' ? data.name + ':' + data.value[2] : ''
              },
              position: 'right', // 显示位置
              color: '#fff'
            }
          },
          itemStyle: {
            normal: {
              color: function (res: any) {
                let value = res.value[2]
                //根据value值对标点进行不同颜色显示  /crm-api/view/toker/entCount
                return '#4ed7fa'
              },
              shadowBlur: 1
            }
          }
        }
      ]
    })
  }
})
</script>