Vue3+TS+ECharts5实现中国地图数据信息显示

honor_zhang

已于 2023-10-08 22:07:46 修改

阅读量1.7k

点赞数 1

文章标签： vue.js 前端 javascript

于 2023-10-04 12:05:04 首次发布

本文链接：https://blog.csdn.net/honor_zhang/article/details/133524202

版权

1.引言

最近在做一个管理系统，主要技术栈使用的是Vue3+TS+Vite+ElementPlus，主要参考项目是yudao-ui-admin-vue3，其中用到ECharts5做数字大屏，展示中国地图相关信息，以此基础做一个分享，写下这篇文章。

"dependencies": {
    "@element-plus/icons-vue": "^2.1.0",
    "@kjgl77/datav-vue3": "^1.6.1",
    "@vueuse/core": "^10.2.1",
    "echarts": "^5.4.2",
    "echarts-wordcloud": "^2.1.0",
    "element-plus": "2.3.7",
    "vue": "3.3.4",
    "vue-i18n": "9.2.2",
    "vue-router": "^4.2.4",
    "vue-types": "^5.1.0",
    "vuedraggable": "^4.1.0"
  }

在读这篇文章之前，建议先读一下自适应大屏容器组件这篇文章。

2.封装ECharts组件

通常在实际项目中，需要用到ECharts图表的地方肯定很多，我们可以封装一个ECharts组件，方便使用，这里在 yudao-ui-admin-vue3基础上，添加了一个响应式变量，为了在引用ECharts父组件中获取到ECharts初始化实例，在地图中自动随机显示各省份数据的函数中使用。

为什么要添加这个响应式变量了？我实际使用中遇到的问题，如果把ECharts初始化实例赋值为响应式变量，会导致tooltip提示框在设置trigger: ‘axis’显示不出来，如果赋值为非响应式变量，父组件接受变量时数据为空，拿不到数据，所以我的解决办法是添加一个响应式变量，这样双方都可以满足。

<script lang="ts" setup>
import type { EChartsOption } from 'echarts'
import echarts from '@/plugins/echarts'
import 'echarts-wordcloud'
import { propTypes } from '@/utils/propTypes'
import { PropType } from 'vue'
import { isString } from '@/utils/is'
import { useDesign } from '@/hooks/web/useDesign'

defineOptions({ name: 'EChart' })

const { getPrefixCls } = useDesign()

const prefixCls = getPrefixCls('echart')

const props = defineProps({
  options: {
    type: Object as PropType<EChartsOption>,
    required: true
  },
  width: propTypes.oneOfType([Number, String]).def('100%'),
  height: propTypes.oneOfType([Number, String]).def('100%')
})

const elRef = ref<ElRef>()

let echartRef: Nullable<echarts.ECharts> = null
/**********************添加的响应式变量******************/
const eChart = ref()

const styles = computed(() => {
  const width = isString(props.width) ? props.width : `${props.width}px`
  const height = isString(props.height) ? props.height : `${props.height}px`

  return {
    width,
    height
  }
})

const initChart = () => {
  if (unref(elRef) && props.options) {
    echartRef = echarts.init(unref(elRef) as HTMLElement)
    echartRef?.setOption(unref(props.options), true)
    /**********************初始化后再赋值******************/
    eChart.value = echartRef
  }
}

watch(
  () => props.options,
  (options) => {
    if (echartRef) {
      echartRef?.setOption(options, true)
    }
  },
  {
    deep: true
  }
)
onMounted(() => {
  initChart()
})

onBeforeUnmount(() => {
  echartRef.dispose()
})

defineExpose({ eChart })
</script>

<template>
  <div ref="elRef" :class="[$attrs.class, prefixCls]" :style="styles"></div>
</template>

3.数据的准备

数据主要分为ECharts5需要的中国地图数据，需要显示的自定义数据，以及各个省份的中心经纬度数据。

1.地图数据。由于ECharts5地图不能直接引入，需要自己下载JSON数据，然后引入。地图数据下载地址为阿里云数据可视化平台，下载JSON数据，可根据自己的需要对南海诸岛的数据做编辑。数据下载后，放入asserts目录中，引入。

2.自定义显示数据。自定义显示数据就是想要在地图上显示的信息，当鼠标点击某个省份后，tooltip显示框显示的数据内容。本地中，显示的数据为各个省份合同数以及合同金额，如下图所示。

数据格式为：

interface digitalScreenDataType {
  name: string
  value: number
}
interface contractInfoForFirstArea {
  name: string
  contractInfoByFirstArea: digitalScreenDataType[]
}

数据内容举例：

[
    {
      name: '北京市',
      contractInfoByFirstArea: [
        { name: '合同总额(亿)', value: 0.9923 },
        { name: '合同总数', value: 51 }
      ]
    },
    {
      name: '天津市',
      contractInfoByFirstArea: [
        { name: '合同总额(亿)', value: 170.2683 },
        { name: '合同总数', value: 30790 }
      ]
    }
]

3.各个省份的中心经纬度数据。此数据主要为了显示各省份的中心点，利用的ECharts的配置，可以让中心点具有不同的显示效果。ECharts文档传送门。

数据定义：

const geoCodeMap = [
  { name: '北京市', delay: 63, lossPercent: 2, value: [119.337634104, 26.0911937119] },
  { name: '天津市', delay: 63, lossPercent: 2, value: [117.190182, 39.125596] },
  { name: '河北省', delay: 63, lossPercent: 2, value: [114.502461, 38.045474] },
  { name: '山西省', delay: 63, lossPercent: 2, value: [112.549248, 37.857014] },
  { name: '内蒙古自治区', delay: 63, lossPercent: 2, value: [111.670801, 40.818311] },
  { name: '辽宁省', delay: 63, lossPercent: 2, value: [123.429096, 41.796767] },
  { name: '吉林省', delay: 63, lossPercent: 2, value: [125.3245, 43.886841] },
  { name: '黑龙江省', delay: 63, lossPercent: 2, value: [126.642464, 45.756967] },
  { name: '上海市', delay: 63, lossPercent: 2, value: [121.487899486, 31.24916171] },
  { name: '江苏省', delay: 63, lossPercent: 2, value: [118.767413, 32.041544] },
  { name: '浙江省', delay: 63, lossPercent: 2, value: [120.153576, 30.287459] },
  { name: '安徽省', delay: 63, lossPercent: 2, value: [117.283042, 31.86119] },
  { name: '福建省', delay: 63, lossPercent: 2, value: [119.306239, 26.075302] },
  { name: '江西省', delay: 63, lossPercent: 2, value: [115.892151, 28.676493] },
  { name: '山东省', delay: 63, lossPercent: 2, value: [117.000923, 36.675807] },
  { name: '河南省', delay: 63, lossPercent: 2, value: [113.665412, 34.757975] },
  { name: '湖北省', delay: 63, lossPercent: 2, value: [114.298572, 30.584355] },
  { name: '湖南省', delay: 63, lossPercent: 2, value: [112.982279, 28.19409] },
  { name: '广东省', delay: 63, lossPercent: 2, value: [113.280637, 23.125178] },
  { name: '广西壮族自治区', delay: 63, lossPercent: 2, value: [108.320004, 22.82402] },
  { name: '海南省', delay: 63, lossPercent: 2, value: [110.33119, 20.031971] },
  { name: '重庆市', delay: 63, lossPercent: 2, value: [106.504962, 29.533155] },
  { name: '四川省', delay: 63, lossPercent: 2, value: [104.065735, 30.659462] },
  { name: '贵州省', delay: 63, lossPercent: 2, value: [106.713478, 26.578343] },
  { name: '云南省', delay: 63, lossPercent: 2, value: [102.712251, 25.040609] },
  { name: '西藏自治区', delay: 63, lossPercent: 2, value: [91.132212, 29.660361] },
  { name: '陕西省', delay: 63, lossPercent: 2, value: [108.948024, 34.263161] },
  { name: '甘肃省', delay: 63, lossPercent: 2, value: [103.823557, 36.058039] },
  { name: '青海省', delay: 63, lossPercent: 2, value: [96.07, 36.62] },
  { name: '宁夏回族自治区', delay: 63, lossPercent: 2, value: [106.278179, 38.46637] },
  { name: '新疆维吾尔自治区', delay: 63, lossPercent: 2, value: [87.617733, 43.792818] },
  { name: '台湾省', delay: 63, lossPercent: 2, value: [121.509062, 25.044332] },
  { name: '香港特别行政区', delay: 63, lossPercent: 2, value: [114.173355, 22.320048] },
  { name: '澳门特别行政区', delay: 63, lossPercent: 2, value: [113.54909, 22.198951] }
]

配置项：

{
      type: 'effectScatter',
      coordinateSystem: 'geo',
      symbolSize: 7,
      effectType: 'ripple',
      legendHoverLink: false,
      showEffectOn: 'render',
      rippleEffect: {
        period: 4,
        scale: 2.5,
        brushType: 'stroke'
      },
      zlevel: 1,
      itemStyle: {
        color: '#99FBFE',
        shadowBlur: 5,
        shadowColor: '#fff'
      },
      data: geoCodeMap
    }

4.地图展示组件

/** * @LeftTop.vue * @author: zgr * @createTime: 2023/9/25 */

<template>
  <EChart :options="options" ref="chinaMapRef" />
</template>

<script lang="ts" setup>

interface digitalScreenDataType {
  name: string
  value: number
}
interface contractInfoForFirstArea {
  name: string
  contractInfoByFirstArea: digitalScreenDataType[]
}


import * as echarts from 'echarts'
import chinaData from '@/assets/map/china.json'
echarts.registerMap('china', chinaData)


defineOptions({ name: 'ContractMap' })
//计时器
const timer = reactive({
  //地图动态显示数据
  mapIntervalTimer: null
})
const geoCodeMap = [
  { name: '北京市', delay: 63, lossPercent: 2, value: [119.337634104, 26.0911937119] },
  { name: '天津市', delay: 63, lossPercent: 2, value: [117.190182, 39.125596] },
  { name: '河北省', delay: 63, lossPercent: 2, value: [114.502461, 38.045474] },
  { name: '山西省', delay: 63, lossPercent: 2, value: [112.549248, 37.857014] },
  { name: '内蒙古自治区', delay: 63, lossPercent: 2, value: [111.670801, 40.818311] },
  { name: '辽宁省', delay: 63, lossPercent: 2, value: [123.429096, 41.796767] },
  { name: '吉林省', delay: 63, lossPercent: 2, value: [125.3245, 43.886841] },
  { name: '黑龙江省', delay: 63, lossPercent: 2, value: [126.642464, 45.756967] },
  { name: '上海市', delay: 63, lossPercent: 2, value: [121.487899486, 31.24916171] },
  { name: '江苏省', delay: 63, lossPercent: 2, value: [118.767413, 32.041544] },
  { name: '浙江省', delay: 63, lossPercent: 2, value: [120.153576, 30.287459] },
  { name: '安徽省', delay: 63, lossPercent: 2, value: [117.283042, 31.86119] },
  { name: '福建省', delay: 63, lossPercent: 2, value: [119.306239, 26.075302] },
  { name: '江西省', delay: 63, lossPercent: 2, value: [115.892151, 28.676493] },
  { name: '山东省', delay: 63, lossPercent: 2, value: [117.000923, 36.675807] },
  { name: '河南省', delay: 63, lossPercent: 2, value: [113.665412, 34.757975] },
  { name: '湖北省', delay: 63, lossPercent: 2, value: [114.298572, 30.584355] },
  { name: '湖南省', delay: 63, lossPercent: 2, value: [112.982279, 28.19409] },
  { name: '广东省', delay: 63, lossPercent: 2, value: [113.280637, 23.125178] },
  { name: '广西壮族自治区', delay: 63, lossPercent: 2, value: [108.320004, 22.82402] },
  { name: '海南省', delay: 63, lossPercent: 2, value: [110.33119, 20.031971] },
  { name: '重庆市', delay: 63, lossPercent: 2, value: [106.504962, 29.533155] },
  { name: '四川省', delay: 63, lossPercent: 2, value: [104.065735, 30.659462] },
  { name: '贵州省', delay: 63, lossPercent: 2, value: [106.713478, 26.578343] },
  { name: '云南省', delay: 63, lossPercent: 2, value: [102.712251, 25.040609] },
  { name: '西藏自治区', delay: 63, lossPercent: 2, value: [91.132212, 29.660361] },
  { name: '陕西省', delay: 63, lossPercent: 2, value: [108.948024, 34.263161] },
  { name: '甘肃省', delay: 63, lossPercent: 2, value: [103.823557, 36.058039] },
  { name: '青海省', delay: 63, lossPercent: 2, value: [96.07, 36.62] },
  { name: '宁夏回族自治区', delay: 63, lossPercent: 2, value: [106.278179, 38.46637] },
  { name: '新疆维吾尔自治区', delay: 63, lossPercent: 2, value: [87.617733, 43.792818] },
  { name: '台湾省', delay: 63, lossPercent: 2, value: [121.509062, 25.044332] },
  { name: '香港特别行政区', delay: 63, lossPercent: 2, value: [114.173355, 22.320048] },
  { name: '澳门特别行政区', delay: 63, lossPercent: 2, value: [113.54909, 22.198951] }
]
let preSelectMapIndex = 0
const dataList = ref<contractInfoForFirstArea[]>([])
const options = reactive<echarts.EChartsOption>({
  showLegendSymbol: false,
  tooltip: {
    trigger: 'item',
    //是否显示提示框组件
    show: true,
    backgroundColor: 'rgba(0,0,55,0.4)',
    textStyle: {
      color: 'white',
      fontSize: 14,
      lineHeight: 20
    },
    // 如果需要自定义 tooltip样式，需要使用formatter
    formatter: function (params) {
      let toolTipHtml = ''
      let data = dataList.value
      for (let i = 0; i < data.length; i++) {
        if (params.name === data[i].name) {
          toolTipHtml += data[i].name + ':<br>'
          for (let j = 0; j < data[i].contractInfoByFirstArea.length; j++) {
            toolTipHtml +=
              data[i].contractInfoByFirstArea[j].name +
              ':' +
              data[i].contractInfoByFirstArea[j].value +
              '<br>'
          }
        }
      }
      return toolTipHtml
    }
  },
  visualMap: {
    min: 0,
    max: 800,
    show: false,
    seriesIndex: 0,
    // 颜色
    inRange: {
      color: ['rgba(41,166,206, .5)', 'rgba(69,117,245, .9)']
    }
  },
  // 底部背景
  geo: {
    show: true,
    aspectScale: 0.85, //长宽比
    zoom: 1.6,
    top: '30%',
    left: '25%',
    map: 'china',
    roam: false,
    itemStyle: {
      areaColor: 'rgba(0,0,0,0)',
      shadowColor: 'rgba(138,181,218,0.8)',
      borderColor: '#232652',
      borderWidth: 2
    },
    emphasis: {
      itemStyle: {
        areaColor: '#00aeef',
        shadowColor: 'rgba(138,181,218,0.8)'
      }
    }
  },
  series: [
    {
      name: '',
      type: 'map',
      aspectScale: 0.85, //长宽比
      zoom: 1.6,
      map: 'china', // 自定义扩展图表类型
      top: '30%',
      left: '25%',
      itemStyle: {
        color: 'red',
        areaColor: 'rgba(19,54,162, .5)',
        borderColor: 'rgba(0,242,252,.3)',
        borderWidth: 1,
        shadowBlur: 7,
        shadowColor: '#00f2fc'
      },
      emphasis: {
        itemStyle: {
          areaColor: '#4f7fff',
          borderColor: 'rgba(0,242,252,.6)',
          borderWidth: 2,
          shadowBlur: 10,
          shadowColor: '#00f2fc'
        }
      },
      label: {
        formatter: (params) => `${params.name}`,
        show: true,
        position: 'insideRight',
        fontSize: 12,
        color: '#efefef'
      },
      data: [] as contractInfoForFirstArea[]
    },
    {
      type: 'effectScatter',
      coordinateSystem: 'geo',
      symbolSize: 7,
      effectType: 'ripple',
      legendHoverLink: false,
      showEffectOn: 'render',
      rippleEffect: {
        period: 4,
        scale: 2.5,
        brushType: 'stroke'
      },
      zlevel: 1,
      itemStyle: {
        color: '#99FBFE',
        shadowBlur: 5,
        shadowColor: '#fff'
      },
      data: geoCodeMap
    }
  ]
})
const getData = async () => {
  let resData: contractInfoForFirstArea[] = [
    {
      name: '北京市',
      contractInfoByFirstArea: [
        { name: '合同总额(亿)', value: 0.9923 },
        { name: '合同总数', value: 51 }
      ]
    },
    {
      name: '天津市',
      contractInfoByFirstArea: [
        { name: '合同总额(亿)', value: 170.2683 },
        { name: '合同总数', value: 30790 }
      ]
    },
    {
      name: '上海市',
      contractInfoByFirstArea: [
        { name: '合同总额(亿)', value: 0.2098 },
        { name: '合同总数', value: 5 }
      ]
    },
    {
      name: '重庆市',
      contractInfoByFirstArea: [
        { name: '合同总额(亿)', value: 4.5777 },
        { name: '合同总数', value: 144 }
      ]
    },
    {
      name: '新疆维吾尔自治区',
      contractInfoByFirstArea: [
        { name: '合同总额(亿)', value: 2.5839 },
        { name: '合同总数', value: 78 }
      ]
    },
    {
      name: '西藏自治区',
      contractInfoByFirstArea: [
        { name: '合同总额(亿)', value: 0.2476 },
        { name: '合同总数', value: 14 }
      ]
    },
    {
      name: '宁夏回族自治区',
      contractInfoByFirstArea: [
        { name: '合同总额(亿)', value: 1.3043 },
        { name: '合同总数', value: 353 }
      ]
    },
    {
      name: '内蒙古自治区',
      contractInfoByFirstArea: [
        { name: '合同总额(亿)', value: 4.4069 },
        { name: '合同总数', value: 256 }
      ]
    },
    {
      name: '广西壮族自治区',
      contractInfoByFirstArea: [
        { name: '合同总额(亿)', value: 0.9392 },
        { name: '合同总数', value: 47 }
      ]
    },
    {
      name: '黑龙江省',
      contractInfoByFirstArea: [
        { name: '合同总额(亿)', value: 1.5711 },
        { name: '合同总数', value: 53 }
      ]
    },
    {
      name: '吉林省',
      contractInfoByFirstArea: [
        { name: '合同总额(亿)', value: 5.3852 },
        { name: '合同总数', value: 157 }
      ]
    },
    {
      name: '辽宁省',
      contractInfoByFirstArea: [
        { name: '合同总额(亿)', value: 5.1029 },
        { name: '合同总数', value: 193 }
      ]
    },
    {
      name: '河北省',
      contractInfoByFirstArea: [
        { name: '合同总额(亿)', value: 17.9545 },
        { name: '合同总数', value: 1101 }
      ]
    },
    {
      name: '山东省',
      contractInfoByFirstArea: [
        { name: '合同总额(亿)', value: 9.7 },
        { name: '合同总数', value: 568 }
      ]
    },
    {
      name: '江苏省',
      contractInfoByFirstArea: [
        { name: '合同总额(亿)', value: 6.6828 },
        { name: '合同总数', value: 239 }
      ]
    },
    {
      name: '安徽省',
      contractInfoByFirstArea: [
        { name: '合同总额(亿)', value: 7.2328 },
        { name: '合同总数', value: 260 }
      ]
    },
    {
      name: '浙江省',
      contractInfoByFirstArea: [
        { name: '合同总额(亿)', value: 7.7085 },
        { name: '合同总数', value: 309 }
      ]
    },
    {
      name: '福建省',
      contractInfoByFirstArea: [
        { name: '合同总额(亿)', value: 3.15 },
        { name: '合同总数', value: 241 }
      ]
    },
    {
      name: '广东省',
      contractInfoByFirstArea: [
        { name: '合同总额(亿)', value: 28.461 },
        { name: '合同总数', value: 1102 }
      ]
    },
    {
      name: '海南省',
      contractInfoByFirstArea: [
        { name: '合同总额(亿)', value: 8.5549 },
        { name: '合同总数', value: 423 }
      ]
    },
    {
      name: '云南省',
      contractInfoByFirstArea: [
        { name: '合同总额(亿)', value: 5.5561 },
        { name: '合同总数', value: 422 }
      ]
    },
    {
      name: '贵州省',
      contractInfoByFirstArea: [
        { name: '合同总额(亿)', value: 2.8905 },
        { name: '合同总数', value: 82 }
      ]
    },
    {
      name: '四川省',
      contractInfoByFirstArea: [
        { name: '合同总额(亿)', value: 10.9661 },
        { name: '合同总数', value: 409 }
      ]
    },
    {
      name: '湖南省',
      contractInfoByFirstArea: [
        { name: '合同总额(亿)', value: 3.0104 },
        { name: '合同总数', value: 144 }
      ]
    },
    {
      name: '湖北省',
      contractInfoByFirstArea: [
        { name: '合同总额(亿)', value: 3.7586 },
        { name: '合同总数', value: 157 }
      ]
    },
    {
      name: '河南省',
      contractInfoByFirstArea: [
        { name: '合同总额(亿)', value: 8.2312 },
        { name: '合同总数', value: 230 }
      ]
    },
    {
      name: '山西省',
      contractInfoByFirstArea: [
        { name: '合同总额(亿)', value: 6.1501 },
        { name: '合同总数', value: 322 }
      ]
    },
    {
      name: '陕西省',
      contractInfoByFirstArea: [
        { name: '合同总额(亿)', value: 3.265 },
        { name: '合同总数', value: 133 }
      ]
    },
    {
      name: '甘肃省',
      contractInfoByFirstArea: [
        { name: '合同总额(亿)', value: 1.4853 },
        { name: '合同总数', value: 58 }
      ]
    },
    {
      name: '青海省',
      contractInfoByFirstArea: [
        { name: '合同总额(亿)', value: 1.2578 },
        { name: '合同总数', value: 30 }
      ]
    },
    {
      name: '江西省',
      contractInfoByFirstArea: [
        { name: '合同总额(亿)', value: 2.8155 },
        { name: '合同总数', value: 67 }
      ]
    },
    {
      name: '台湾省',
      contractInfoByFirstArea: [
        { name: '合同总额(亿)', value: 0.0032 },
        { name: '合同总数', value: 2 }
      ]
    },
    {
      name: '香港特别行政区',
      contractInfoByFirstArea: [
        { name: '合同总额(亿)', value: 0 },
        { name: '合同总数', value: 0 }
      ]
    },
    {
      name: '澳门特别行政区',
      contractInfoByFirstArea: [
        { name: '合同总额(亿)', value: 0 },
        { name: '合同总数', value: 0 }
      ]
    },
    {
      name: '南海诸岛',
      contractInfoByFirstArea: [
        { name: '合同总额(亿)', value: 0 },
        { name: '合同总数', value: 0 }
      ]
    }
  ]

  dataList.value = resData
  options.series[0].data = resData
}

// 重新随机选中地图区域
const reSelectMapRandomArea = () => {
  const length = 34
  nextTick(() => {
    try {
      const map = chinaMapRef.value.eChart
      let index = Math.floor(Math.random() * length)
      while (index === preSelectMapIndex || index >= length) {
        index = Math.floor(Math.random() * length)
      }
      map.dispatchAction({
        type: 'unselect',
        seriesIndex: 0,
        dataIndex: preSelectMapIndex
      })
      map.dispatchAction({
        type: 'showTip',
        seriesIndex: 0,
        dataIndex: index
      })
      map.dispatchAction({
        type: 'select',
        seriesIndex: 0,
        dataIndex: index
      })
      preSelectMapIndex = index
    } catch (error) {
      console.log('2345' + error)
    }
  })
}
const chinaMapRef = ref()
const handleMapRandomSelect = () => {
  nextTick(() => {
    try {
      const map = chinaMapRef.value.eChart
      setTimeout(() => {
        reSelectMapRandomArea()
      }, 0)
      // 移入区域，清除定时器、取消之前选中并选中当前
      map.on('mouseover', function (params) {
        clearInterval(timer.mapIntervalTimer)
        map.dispatchAction({
          type: 'unselect',
          seriesIndex: 0,
          dataIndex: preSelectMapIndex
        })
        map.dispatchAction({
          type: 'select',
          seriesIndex: 0,
          dataIndex: params.dataIndex
        })
        preSelectMapIndex = params.dataIndex
      })
      // 移出区域重新随机选中地图区域，并开启定时器
      map.on('globalout', function () {
        reSelectMapRandomArea()
        startInterval()
      })
      startInterval()
    } catch (error) {
      console.log('134' + error)
    }
  })
}
// 开启定时器
const startInterval = () => {
  // 应通过接口获取配置时间，暂时写死5s
  const time = 2000
  if (timer.mapIntervalTimer !== null) {
    clearInterval(timer.mapIntervalTimer)
  }
  timer.mapIntervalTimer = setInterval(() => {
    reSelectMapRandomArea()
  }, time)
}

//去除定时器
const clearData = () => {
  if (timer.mapIntervalTimer) {
    clearInterval(timer.mapIntervalTimer)
    timer.mapIntervalTimer = null
  }
}

onMounted(() => {
  getData()
  handleMapRandomSelect()
})

onUnmounted(() => {
  clearData()
})
</script>

<style scoped></style>

几个需要说明的地方：

1.option配置中的显示数据。本例中，数据直接写死赋值，在实际使用中，我们可能是从后端异步拉取数据然后再显示，这就会有一个问题，组件加载完毕，数据却还没有获取完毕。本人在实际项目的办法是初始化一个定时器，1秒钟获取一次数据，如果加载到数据就销毁定时器，继续赋值给option中的数据。

const getData = async () => {
  let resData: contractInfoForFirstArea[] = digitalScreenStore.getContractInfoForFirstArea
  if (resData.length > 0 && timer.initDataTimer !== null) {
    // 清除多次执行定时器
    clearInterval(Number(timer.initDataTimer))
    timer.initDataTimer = null
  }
  dataList.value = resData
  options.series[0].data = resData
}


const getInitDataTimer = () => {
  timer.initDataTimer = setInterval(getData, 1000)
}

onMounted(() => {
  getInitDataTimer()
  getData()
})

2.tooltip中的formatter函数。如果简单的字符串满足不了显示数据的要求，可以自定义函数，返回一段自定义HTML，显示对应数据。

3.自动随机选择省份区域，并显示tooltip数据。主要为三个函数，handleMapRandomSelect，reSelectMapRandomArea，startInterval，最初引用链接为koi-screen Vue2版，ECharts5的配置也有一些变化，所以改进为现在的Vue3+ECharts5版。

5.总结

本篇文章简单介绍了ECharts组件的封装，以及地图组件的封装，大概描述了实际项目中遇到的问题以及自己的一些解决办法，行文比较简单概括，所给代码并不能达到文章开始图片效果，对于一些问题可能还不是能很好的理解，欢迎批评指正，一起探讨交流进步。

honor_zhang

关注

1
点赞
踩
9

收藏

觉得还不错? 一键收藏
0
评论
Vue3+TS+ECharts5实现中国地图数据信息显示

本篇文章简单介绍了ECharts组件的封装，以及地图组件的封装，大概描述了实际项目中遇到的问题以及自己的一些解决办法，行文比较简单概括，所给代码并不能达到文章开始图片效果，对于一些问题可能还不是能很好的理解，欢迎批评指正，一起探讨交流进步。
复制链接

扫一扫