【svg画图】

svg画图
svg教程：https://www.w3school.com.cn/svg/svg_example.asp
svg编辑器：https://c.runoob.com/more/svgeditor/
1、首先打开svg编辑器，使用PathTo（工具）点选物件，点选后为白色区域，保存图片，在编辑器（如vscode）中打开图片，在中有两个xlink:href的字段，删掉一个，多余了，在此字段的最后添加name=“##”(划上去显示的字段)，在下面会显示你点选的所有部分的path,在每个path后加上name="###"保存后引入你的文件夹就可以使用了。

<template>
  <div ref="chart" class="chart"/>
</template>

<script>
import park from '@/map/svg.svg'

export default {
  name: 'AreaMap',
  data() {
    return {
      chart: null,
    }
  },
  mounted() {
    this.chart = this.$echarts.init(this.$refs.chart)
    this.$axios(park).then(res => {
      this.$echarts.registerMap('park', { svg: res.data })
      this.draw()
      this.chart.resize()
    })
  },
  beforeDestroy() {
    this.chart.dispose()
  },
  methods: {
    draw() {
      this.chart.setOption({
        // 提示框（浮窗）组件
        tooltip: {
          show: true,
          // trigger: 'item', // 触发类型，数据项图形触发
          // showDelay: 0, // 浮窗显示延时
          // hideDelay: 0, // 浮窗隐藏延时
          // transitionDuration: 0, // 提示框浮层的移动动画过渡时间，单位是 s，设置为 0 的时候会紧跟着鼠标移动
          // backgroundColor: 'rgba(0, 0, 0, 0.8)', // 浮窗背景颜色
          // borderWidth: 1,
          // borderColor: '#08b1e7',
          // textStyle: {
          //   color: '#fff',
          // },
          // // 浮窗内文本格式
          // formatter: params => {
          //   if (params.seriesType === 'effectScatter') {
          //     return '节点 ' + params.data.name
          //   } else {
          //     return '链路 ' + params.data.name
          //   }
          // },
        },
        // 地理坐标系
        geo: {
          map: 'park',
          layoutCenter: ['60%', '50%'],
          layoutSize: 2100,
          // silent: true,
          // zoom: 1.7,
          // label: {show: false},
          // roam: true, // 是否允许缩放
          // // 缩放倍数范围
          // scaleLimit: {
          //   min: 1.2,
          //   max: 10,
          // },
          // 地图区域的多边形样式
          itemStyle: {
            borderColor: '#ffffff',
            borderWidth: 1,
            areaColor: '#ffffff00',
          },
          // 光标移上去的样式
          emphasis: {
            label: {
              show: false,
              color: 'white',
              fontSize: 16,
            },
            itemStyle: {
              // borderColor: '#02bbd4',
              // borderWidth: 1,
              areaColor: '#ffffff80',
            },
          },
        },
      }, true)
    },
  },
}
</script>

<style scoped>
.chart {
  width: 100%;
  height: 100%;
  margin: 0 auto;
}
</style>