echarts散点图自定义图标symbol

最近要制作一个省内的地图，发现省内各市需要标出总行、分行、子公司等，那么symbol肯定不一样啦，所以就去翻了一下官网，

1. 地图各市内自定义图标

默认标记就不说了，主要是下面的：

1）可以通过 'image://url' 设置为图片，其中 URL 为图片的链接，或者 dataURI。

'image://http://example.website/a/b.png'

但因为我是内网开发肯定没链接图，换一个，

2）可以通过 'path://' 将图标设置为任意的矢量路径。这种方式相比于使用图片的方式，不用担心因为缩放而产生锯齿或模糊，而且可以设置为任意颜色。路径图形会自适应调整为合适的大小。路径的格式参见 SVG PathData。可以从 Adobe Illustrator 等工具编辑导出。

'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'

这个方法感觉挺好的，主要还说图标不会模糊什么的，很心动，而且方法3--base64转码感觉那一长串东西看着就很不简洁！想试试这个，结果我去研究了一下，还要下工具弄，就算了……等有时间再研究。接下来就是我用的方法啦，

3）URL 为 dataURI ，例如：

'image://data:image/gif;base64,R0lGODlhEAAQAMQAAORHHOVSKudfOulrSOp3WOyDZu6QdvCchPGolfO0o/XBs/fNwfjZ0frl3/zy7wAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAACH5BAkAABAALAAAAAAQABAAAAVVICSOZGlCQAosJ6mu7fiyZeKqNKToQGDsM8hBADgUXoGAiqhSvp5QAnQKGIgUhwFUYLCVDFCrKUE1lBavAViFIDlTImbKC5Gm2hB0SlBCBMQiB0UjIQA7'

这个方法是把图片转base64，试验过了可以，但刚开始不熟悉，忘记加上'image://'作为前缀了，失策啊！又浪费5分钟。

以上三种方法就是symbol自定义的方法啦，具体代码，我随便写一个，顺便说一下，因为是画的地图，要在地图上显示symbol的话，要在series里弄一个type是'scatter'的散点图，如下：

series:[
    {
type:'scatter',
symbol:'image://data:image/gif;base64,R0lGODlhEAAQAMQAAORHHOVSKudfOulrSOp3WOyDZu6QdvCchPGolfO0o/XBs/fNwfjZ0frl3/zy7wAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAACH5BAkAABAALAAAAAAQABAAAAVVICSOZGlCQAosJ6mu7fiyZeKqNKToQGDsM8hBADgUXoGAiqhSvp5QAnQKGIgUhwFUYLCVDFCrKUE1lBavAViFIDlTImbKC5Gm2hB0SlBCBMQiB0UjIQA7'

     }
]

一定要记得加'image://'！！

2. 地图各市内有多个自定义symbol

还是看官网，symbol下的最后一个，

1）如果需要每个数据的图形不一样，可以设置为如下格式的回调函数：

(value: Array|number, params: Object) => string

其中第一个参数 value 为 data 中的数据值。第二个参数params 是其它的数据项参数。

直接上代码！！

series:[
{
type:'scatter',
coordinateSystem:'geo',
symbol:(value,params)=>{
        //value就是
      if(params.name == '南京市'){
           return 'image://data:image/gif;base64,R0lGODlhEAAQAMQAAORHHOVSKudfOulrSOp3WOyDZu6QdvCchPGolfO0o/XBs/fNwfjZ0frl3/zy7wAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAACH5BAkAABAALAAAAAAQABAAAAVVICSOZGlCQAosJ6mu7fiyZeKqNKToQGDsM8hBADgUXoGAiqhSvp5QAnQKGIgUhwFUYLCVDFCrKUE1lBavAViFIDlTImbKC5Gm2hB0SlBCBMQiB0UjIQA7'
       }
   }
//data里的value就是你自定义的坐标点symbol要显示在哪个位置,我用的是南京市的经纬度，因为肯定要在中心点附近啦。后面的a是随便定义的值，一般是tooltip显示的值---params.a
data:[{name:'南京市',value:['118.767','32.241'],a:'100'}]
 },
]

（题外话：用不好这个代码模拟器，空格用不了，所以代码看着很……强迫症果咩）

咳咳，如上所示，需要什么条件显示什么symbol就很容易啦~

如果是需要在南京市区域内再设置一个symbol，那就在series再加一个，

series:[
{
type:'scatter',
coordinateSystem:'geo',
symbol:(value,params)=>{
        //value就是
      if(params.name == '南京市'){
           return 'image://data:image/gif;base64,R0lGODlhEAAQAMQAAORHHOVSKudfOulrSOp3WOyDZu6QdvCchPGolfO0o/XBs/fNwfjZ0frl3/zy7wAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAACH5BAkAABAALAAAAAAQABAAAAVVICSOZGlCQAosJ6mu7fiyZeKqNKToQGDsM8hBADgUXoGAiqhSvp5QAnQKGIgUhwFUYLCVDFCrKUE1lBavAViFIDlTImbKC5Gm2hB0SlBCBMQiB0UjIQA7'
       }
   }
//data里的value就是你自定义的坐标点symbol要显示在哪个位置,我用的是南京市的经纬度，因为肯定要在中心点附近啦。后面的a是随便定义的值，一般是tooltip显示的值---params.a
data:[{name:'南京市',value:['118.767','32.241'],a:'100'}]
 },
//第二个
{
type:'scatter',
coordinateSystem:'geo',
symbol:(value,params)=>{
        //value就是
      if(params.name == '南京市'){
           return 'image://data:image/gif;base64,R0lGODlhEAAQAMQAAORHHOVSKudfOulrSOp3WOyDZu6QdvCchPGolfO0o/XBs/fNwfjZ0frl3/zy7wAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAACH5BAkAABAALAAAAAAQABAAAAVVICSOZGlCQAosJ6mu7fiyZeKqNKToQGDsM8hBADgUXoGAiqhSvp5QAnQKGIgUhwFUYLCVDFCrKUE1lBavAViFIDlTImbKC5Gm2hB0SlBCBMQiB0UjIQA7'
       }
   }
//data里的value就是你自定义的坐标点symbol要显示在哪个位置,我用的是南京市的经纬度，因为肯定要在中心点附近啦。后面的a是随便定义的值，一般是tooltip显示的值---params.a
data:[{name:'南京市',value:['119.767','33.241'],a:'100'}]
 },
]

细心的朋友已经发现了！我把第二个data里的value改一下，因为两个symbol标记点嘛，肯定位置不一样，如果重合了也看不出哪里不同。

3. 总结

总的来说，这个自定义标记没什么难度，就是可能需要看一下官网，并且亲自动手试一试，这样就很快做出来了，关于地图还有别的麻烦的地方，等有空再记录。