echarts 自定义legend icon出现的路径错误等

echarts提供给我们默认的legend icon只有 'circle', 'rect', 'roundRect', 'triangle', 'diamond', 'pin', 'arrow', 'none'这么几种类型， 有时候我们需要自定义，比如去引入图片等

自定义icon为图片

legend: {
    data: [
       {
          name: "XXX",
          textStyle: {
            fontSize: 12,
            color: "#fff"
            },
           icon: "image://http://baidu.com/xxx.xx"
        }
      ]
},

但是在vue中，引用项目中的图片或者icon又会出现路径问题，很头疼，

因为除了static文件夹，图片放在其他文件夹都会被webpack构建，如改成base64的格式。js会找不到图片路径。

因此，我提供两种方式供大家参考：

1、

legend: {
    data: [
       {
          name: "XXX",
          textStyle: {
            fontSize: 12,
            color: "#fff"
            },
           icon: "image://" + require(@/assets/xxx.png) + ""
        }
      ]
},

2、

import xxxx from '@/assets/xxxx.png'

legend: {
    data: [
       {
          name: "XXX",
          textStyle: {
            fontSize: 12,
            color: "#fff"
            },
           icon: "image://" + xxxx + ""
        }
      ]
},

此外，我还遇到一种情况，双Y轴时，两个不同大小的icon引入后，第一次渲染是没有问题的，但是重复渲染后，两个icon的尺寸就成一样了，

这样的需求就很D疼，

解决办法我是直接搞了两个尺寸相同的icon，有更好的办法欢迎留言告诉呀