【Echarts地图开发全流程加全套代码】

前言

本篇分享近期做的项目echarts相关地图开发的相关细节和避坑细节！！

一、地图Json文件

echarts地图采用官网的type类型map进行配置开发

Apache EChartsApache ECharts，一款基于JavaScript的数据可视化图表库，提供直观，生动，可交互，可个性化定制的数据可视化图表。https://echarts.apache.org/zh/index.html

渲染地图需要通过Json文件来渲染，那么JSON文件可以参考我的上一篇文章内容

二、地图开发过程

初始化

通过echarts配置项开发，首先我们需要一个容器来接收

    <div ref="mapRef" class="map"></div>

class类名可以设置这个容器的宽高比例等等

ref属性值用于我们初始化函数init地图，具体如下：

this.$nextTick(() => {
 this.chartRef = this.$echarts.init(this.$refs.mapRef)
        this.chartRef.setOption(option)
        window.addEventListener('resize', () => {
          this.chartRef.resize()
        })
}

在组件挂载时进行上面的操作，同时在组件销毁前进行相同的注销操作，特别是addEventListener

  beforeDestroy() {
    this.chartRef = this.$echarts.init(this.$refs.mapRef)
    window.removeEventListener('resize', () => {
      this.chartRef.resize()
    })
    this.chartRef.dispose()
    this.chartRef = null
  },

基础配置Options

在不同的业务场景会有不同的业务需求，基本的地图配置即可渲染出一个地图。相关渲染字段不明白的可以去官网配置项文档查看详细内容

const options = {
backgroundColor: 'transparent', // 背景色
        // 提示浮窗配置
        tooltip: {
          //提示框组件
          show: true,
          trigger: 'item',
          triggerOn: 'mousemove', // 触发条件
          appendToBody: true,
          position: function (pos, params, dom, rect, size) {
            // 固定在鼠标位置
            return [pos[0], pos[1]]
          },
          backgroundColor: 'transparent', // 提示框浮层背景颜色
          borderWidth: 0,
          padding: [0], // 提示框浮层内边距
          // 提示框浮层的文本样式
          textStyle: {
            color: '#fff'
          }
        },
geo:[
          {
            type: 'map',
            map: 'china',
            zlevel: 4,
            aspectScale: 0.9,
            zoom: 1.45,
            layoutCenter: ['47%', '50%'],
            layoutSize: '100%',
            roam: false,
            silent: true,
            regions: [
              {
                name: '南海诸岛',
                value: 0,
                itemStyle: {
                  opacity: 0
                },
                label: {
                  show: false
                }
              }
            ],
            label: {
              show: true,
              formatter: (params) => {
                if (this.areaCode == 100000) {
                  const LevelOne = this.mapIconData?.find((item) => item.name === params.name)
                  if (LevelOne) {
                    return `{area_nam