echarts浮点图使用svg图片

echarts 中导入svg一开始没有啥思路，只能去看文档，发现有 symbol 可以导入图片，这些svg图片我是放到一个静态服务器上面，然后写入他们的链接，请求数据的时候后端可以直接返回名字，然后拼接一下链接就可以啦

<template>
  div id="imgicon" :style="{width: '100%', height: `${info_canvas}`}" />
</template>
export default {
  data(){
   return{
   	info_canvas:'26vh'
   }
  },
  mounted () {
    this.init()
  },
  methods: {
    // APPtop10
    init () {
      const option = {
        // 图表标题
        title: {
          show: true, // 显示策略，默认值true,可选为：true（显示） | false（隐藏）
          // text: '"新时代"主题图谱',//主标题文本，'\n'指定换行
          x: 'center', // 水平安放位置，默认为左对齐，可选为：
          // 'center' ¦ 'left' ¦ 'right'
          // ¦ {number}（x坐标，单位px）
          y: 'bottom', // 垂直安放位置，默认为全图顶端，可选为：
          // 'top' ¦ 'bottom' ¦ 'center'
          // ¦ {number}（y坐标，单位px）
          // textAlign: null          // 水平对齐方式，默认根据x设置自动调整
          backgroundColor: 'rgba(0,0,0,0)',
          borderColor: '#ccc', // 标题边框颜色
          borderWidth: 0, // 标题边框线宽，单位px，默认为0（无边框）
          padding: 5, // 标题内边距，单位px，默认各方向内边距为5，
          // 接受数组分别设定上右下左边距，同css
          itemGap: 10, // 主副标题纵向间隔，单位px，默认为10，
          textStyle: {
            fontSize: 18,
            fontWeight: 'bolder',
            color: '#333' // 主标题文字颜色
          },
          subtextStyle: {
            color: '#aaa' // 副标题文字颜色
          }
        },
        backgroundColor: 'rgba(0,0,0,0)',
        tooltip: {},
        animationDurationUpdate (idx) {
          // 越往后的数据延迟越大
          return idx * 100
        },
        animationEasingUpdate: 'bounceIn',
        color: ['#fff', '#fff', '#fff'],
        series: [{
          type: 'graph',
          layout: 'force',
          force: {
            repulsion: 100,
            edgeLength: 8000
          },
          roam: true,
          label: {
            normal: {
              show: true
            }
          },
          data: [{
            'name': '大众点评',
            'value': 2373,
            'symbolSize': 35,
            'draggable': true,
            'itemStyle': {
              'normal': {
                'shadowBlur': 100,
                'shadowColor': '#ff7f50',
                'color': '#ff7f50'
              }
            },
            // symbol: 'path://M30.9,53.2C16.8,53.2,5.3,41.7,5.3,27.6S16.8,2,30.9,2C45,2,56.4,13.5,56.4,27.6S45,53.2,30.9,53.2z M30.9,3.5C17.6,3.5,6.8,14.4,6.8,27.6c0,13.3,10.8,24.1,24.101,24.1C44.2,51.7,55,40.9,55,27.6C54.9,14.4,44.1,3.5,30.9,3.5z M36.9,35.8c0,0.601-0.4,1-0.9,1h-1.3c-0.5,0-0.9-0.399-0.9-1V19.5c0-0.6,0.4-1,0.9-1H36c0.5,0,0.9,0.4,0.9,1V35.8z M27.8,35.8 c0,0.601-0.4,1-0.9,1h-1.3c-0.5,0-0.9-0.399-0.9-1V19.5c0-0.6,0.4-1,0.9-1H27c0.5,0,0.9,0.4,0.9,1L27.8,35.8L27.8,35.8z'
            symbol: 'image://http://admin.oxpp.xyz:7000/uploads/dz.svg'
          }, {
            'name': '飞猪',
            'value': 5449,
            'symbolSize': 29,
            'draggable': true,
            'itemStyle': {
              'normal': {
                'shadowBlur': 100,
                'shadowColor': '#ff7f50',
                'color': '#ff7f50'
              }
            },
            symbol: 'image://http://admin.oxpp.xyz:7000/uploads/fz.svg'
          }, {
            'name': '驴妈妈旅行',
            'value': 200,
            'symbolSize': 30,
            'draggable': true,
            'itemStyle': {
              'normal': {
                'shadowBlur': 100,
                'shadowColor': '#ff7f50',
                'color': '#ff7f50'
              }
            },
            symbol: 'image://http://admin.oxpp.xyz:7000/uploads/lu.svg'
          }, {
            'name': '美团',
            'value': 2518,
            'symbolSize': 21,
            'draggable': true,
            'itemStyle': {
              'normal': {
                'shadowBlur': 100,
                'shadowColor': '#ff7f50',
                'color': '#ff7f50'
              }
            },
            symbol: 'image://http://admin.oxpp.xyz:7000/uploads/mt.svg'
          }, {
            'name': '马蜂窝',
            'value': 4730,
            'symbolSize': 20,
            'draggable': true,
            'itemStyle': {
              'normal': {
                'shadowBlur': 100,
                'shadowColor': '#ff7f50',
                'color': '#ff7f50'
              }
            },
            symbol: 'image://http://admin.oxpp.xyz:7000/uploads/mfw.svg'
          }, {
            'name': '途牛',
            'value': 1952,
            'symbolSize': 29,
            'draggable': true,
            'itemStyle': {
              'normal': {
                'shadowBlur': 100,
                'shadowColor': '#ff7f50',
                'color': '#ff7f50'
              }
            },
            symbol: 'image://http://admin.oxpp.xyz:7000/uploads/tn.svg'
          }, {
            'name': '去哪儿',
            'value': 926,
            'symbolSize': 32,
            'draggable': true,
            'itemStyle': {
              'normal': {
                'shadowBlur': 100,
                'shadowColor': '#ff7f50',
                'color': '#ff7f50'
              }
            },
            symbol: 'image://http://admin.oxpp.xyz:7000/uploads/qne.svg'
          }, {
            'name': '同程旅游',
            'value': 4000,
            'symbolSize': 35,
            'draggable': true,
            'itemStyle': {
              'normal': {
                'shadowBlur': 100,
                'shadowColor': '#ff7f50',
                'color': '#ff7f50'
              }
            },
            symbol: 'image://http://admin.oxpp.xyz:7000/uploads/tc.svg'
          }, {
            'name': '小猪-短租民宿',
            'value': 3002,
            'symbolSize': 35,
            'draggable': true,
            'itemStyle': {
              'normal': {
                'shadowBlur': 100,
                'shadowColor': '#ff7f50',
                'color': '#ff7f50'
              }
            },
            symbol: 'image://http://admin.oxpp.xyz:7000/uploads/z.svg'
          }, {
            'name': '携程',
            'value': 2000,
            'symbolSize': 35,
            'draggable': true,
            'itemStyle': {
              'normal': {
                'shadowBlur': 100,
                'shadowColor': '#ff7f50',
                'color': '#ff7f50'
              }
            },
            symbol: 'image://http://admin.oxpp.xyz:7000/uploads/xc.svg'
          }]
        }]
      }
      const myChart = this.$echarts.init(document.getElementById('imgicon'))
      myChart.setOption(option)
    }
  }
  }