echarts地图插入图片

た入场券 2022-09-06 10:23 173阅读 0赞

## 一、插入图片的方式有三种 ##

### 1.symbol自带基础样式 ###

*  circle：圆
 *  rect：方块
 *  roundRect： 圆角方块
 *  triangle：三角
 *  diamond：四角棱形
 *  pin：气泡
 *  arrow：凹三角
 *  none：啥也没有

### 2. URL 为图片链接、base64、svg ###

*  URL 为图片链接：

'image://http://xxx.xxx.xxx/a/b.png'

*  URL 为 dataURI 例如：

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

*  可以通过 ‘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'

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

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

其中第一个参数value为data中的数据值。第二个参数params是其它的数据项参数。  
参考地址官网：  
https://echarts.apache.org/zh/option.html\#series-line.symbol

## 实现： ##

> 主要是做一些小图标，实现的逻辑就是定义一个iconData的变量，然后series.push进去，代码如下：  
> ![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NDcwMDk3OA_size_16_color_FFFFFF_t_70]

--------------------

遇到的问题

*  插图图片不显示，如图  
    ![在这里插入图片描述][e00f9e6974b64323a38847bf69e6344a.png]  
    解决：  
    是格式的问题  
    ![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NDcwMDk3OA_size_16_color_FFFFFF_t_70 1]

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NDcwMDk3OA_size_16_color_FFFFFF_t_70]: /images/20220829/1efbaccd61ca45cb95bcd90a52fac590.png
[e00f9e6974b64323a38847bf69e6344a.png]: /images/20220829/89778089c2b146a386d8fa28c82bfc98.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NDcwMDk3OA_size_16_color_FFFFFF_t_70 1]: /images/20220829/dbea77c4561846da84c4cc60f413d965.png