echarts中的地图如何添加小树（自定义图标）

代码如下

<template>
  <ECharts ref="echartRef"
           :options="getMapOptions"
           :map="mapJSON"
           :showVisualMap="showVisualMap"
           @click="mapClick" />
</template>
<script>
import ECharts from '@/components/ECharts/ECharts.vue';

export default {
  name: 'ChartMap',
  components: {
    ECharts,
  },
  data() {
    return {
      // 图表数据
      // 杭州市市地图数据
      mapJSON: null,
      chartOtions: {
        // 热力图
        map: this.maps,
      },
      // 地图上的背景图
      hzImg: require('@/assets/archivelndl/others/green.jpg'),
      treeImg: require('@/assets/archivelndl/others/trees.png'),
      dldata: [
        {
          name: '中山区',
          value: '23',
        },
        {
          name: '西岗区',
          value: '2',
        },
        {
          name: '沙河口区',
          value: '63',
        },
        {
          name: '甘井子区',
          value: '64',
        },
        {
          name: '旅顺口区',
          value: '2',
        },
        {
          name: '金普新区',
          value: '64',
        },
        {
          name: '普兰店区',
          value: '8',
        },
        {
          name: '长海县',
          value: '56',
        },
        {
          name: '瓦房店市',
          value: '3',
        },
        {
          name: '庄河市',
          value: '34',
        },
      ],
    };
  },
  props: {
    maps: {
      type: Array,
      default: () => [],
    },
    option: {
      type: Object,
      default: () => {},
    },
    // 是否展示热力系数
    showVisualMap: {
      type: Boolean,
      default: false,
    },
  },
  created() {
    const { region } = process.env.PROJECT_CONFIG.common;
    // eslint-disable-next-line import/no-dynamic-require
    this.mapJSON = require(`./map/${region}`);
  },

  methods: {
    // 热力图点击
    mapClick(params) {
      this.$emit('click', params);
    },
  },
  computed: {
    getMapOptions() {
      const dlmap = {
        中山区: [121.64376, 38.921553],
        西岗区: [121.616112, 38.914266],
        沙河口区: [121.593702, 38.912859],
        甘井子区: [121.582614, 38.975148],
        旅顺口区: [121.26713, 38.812043],
        金普新区: [121.789413, 39.052745],
        普兰店区: [121.9705, 39.401555],
        长海县: [122.587824, 39.272399],
        瓦房店市: [122.002656, 39.63065],
        庄河市: [122.970612, 39.69829],
      };
      const data = this.chartOtions.map;
      const lineMaxHeight = () => {
        const maxValue = Math.max(...this.dldata.map((item) => item.value));
        return 0.00001;
      };
      const dlMapData = () =>
        this.dldata.map((item) => ({
          coords: [dlmap[item.name], [dlmap[item.name][0], dlmap[item.name][1] + item.value * lineMaxHeight()]],
        }));
      // 从返回的数据获取最大值
      const max = Math.max(...this.dldata.map((t) => t.value), 10);
      const min = Math.min(...this.dldata.map((t) => t.value), 10);
      /* eslint-disable */
      const imgDom = new Image();
      imgDom.src = this.hzImg;
      imgDom.alt = 'png';
      return {
        tooltip: {
          trigger: 'item',
          formatter: (params) => {
            // if (!Number.isNaN(params.value)) {
              return `${params.name}：扣${params.value}分`;
            // }
            // return `${params.name}`;
          },
        },
        visualMap: {
          min: 0,
          max: 100,
          show: false,
          calculable: false,
          inRange: {
            color: ['green', 'green'],
          },
        },
        series: [
          {
            type: 'map',
            map: 'MAP',
            aspectScale: 1, // 长宽比
            zoom: 1.1, // 当前视角的缩放比例。
            roam: false, // 是否开启鼠标缩放和平移漫游
            layoutSize: '82%',
            zlevel: 1, // 设置图层堆叠顺序
            layoutCenter: ['50%', '50%'],
            label: {
              normal: {
                show: true, // 默认显示地图上的label
                color: '#fff',
                fontSize: 14,
              },
            },
            itemStyle: {
              normal: {
                borderColor: '#fff', // 区域边框颜色
                borderWidth: 0.2, // 区域边框宽度
                borderType: 'solid', // 区域边框类型
                areaColor: '#30bc59',
                opacity: 0.6, // 透明度
              },
              emphasis: {
                areaColor: {
                  image: imgDom, // 支持为 HTMLImageElement, HTMLCanvasElement，不支持路径字符串 这个是背景图片
                  repeat: 'repeat',
                  colorStops: [
                    {
                      offset: 0,
                      color: '#30bc59', // 0% 处的颜色
                    },
                    {
                      offset: 1,
                      color: '#30bc59', // 50% 处的颜色
                    },
                  ],
                },
                borderWidth: 1,
                borderColor: '#30bc59',
                label: {
                  color: '#30bc59',
                },
                opacity: 1,
              },
            },
            data: this.map,
          },
          {
            type: 'lines',
            zlevel: 10,
            symbol:'image://'+ require('@/assets/archivelndl/others/tree.png'),//这个就是图标啦
            symbolRotate: 0,
            symbolKeepAspect:true,
            showAllSymbol:false,
            symbolOffset: [0, 0],
            symbolSize: [0, 50], // 图标大小，前面那个设置为0，是因为打开的话可能会出现镜像的树
            color: '#30bc59',
            effect: {
              show: false,
            },
            lineStyle: {
              width: 40, // 尾迹线条宽度
              color: '#30bc59',
              opacity: 0, // 尾迹线条透明度
              curveness: 0, // 尾迹线条曲直度
            },
            label: {
              show: 0,
              position: 'end',
              formatter: '0',
            },
            silent: true,
            data: dlMapData(),
          },
        ],
        geo: [
          {
            map: 'MAP',
            show: false,
            aspectScale: 1, //长宽比
            zoom: 1,
            layoutSize: '100%',
            layoutCenter: ['50%', '50%'],
            roam: false,
            zlevel: 0, // 设置图层堆叠顺序
            transform: {
              rotateX: 200, // 设置地图倾斜角度
            },
            itemStyle: {
              normal: {
                areaColor: '#30bc59',
                borderColor: '#30bc59',
                shadowBlur: 2,
                borderWidth: 0,
                shadowColor: '#30bc59',
                shadowOffsetX: 0,
                shadowOffsetY: 35,
              },
            },
            silent: true,
          },
        ],
      };
    },
  },
  mounted() {
  },
};
</script>
<style  rel="stylesheet/scss" lang="scss" scoped>
.map-wrp {
  width: 100%;
  height: 100%;
}
</style>

上述就是地图组件的开发

在父组件使用的代码如下

//其他代码省略哦，下述就是组件引用代码
        <DlMap :style="{width:'100%'}"
                  class="main-map"
                  :mapData="maps"
                  :showVisualMap="true"
                  :option="option"
                  @click="mapClick" />
//script部分
import DlMap from '@/components/ECharts/DlMap.vue';
//data中的部分
// 左边地区清单
      maps: [],
      
  computed: {
    // 额外配置
    option() {
      return {
      //这边也可以加一些配置，用来改变地图中的一些参数
      };
    },
  },
  //具体的点击方法
  
    // 地区点击事件
    mapClick(params) {
      // 地区加权限功能
      if (params.data.isAuth === 1) {
        // name为跳转路由页面名字
        this.$store.dispatch('openNewLabelPage', {
          name: 'SelectDeptLeader',
          id: params.data.id,
          pageName: '请勾选单位档案查看权限',
          // 当有表格的时候判断是否显示功能按钮
          tableVisibleList: false,
        });
      }
    },

以上部分为全部代码，具体使用还是需要根据项目进行修改的，欢迎大家指正和评论哦~