echarts散点图的圆点设置成不同的自定义图片且使用本地静态资源图片的写法

现在要实现的功能是：

散点图的每个点都不再是小圆点而是一张图片！！！！！
即：

散点图的圆点设置成不同的自定义图片、且使用本地静态资源图片的写法

---

首先举个栗子，假设有个echarts散点图，以下是他的options

const option = {
        backgroundColor: 'rgba(255, 255, 255, 0)',
        xAxis: {
          min: 0,
          max: 1000,
          show: false,
          type: 'value'
        },
        yAxis: {
          min: 0,
          max: 1000,
          show: false,
          type: 'value'
        },
        series: [
          {
            type: 'graph',
            z: 99,
            coordinateSystem: 'cartesian2d',
            label: {
              normal: {
                show: true,
                position: 'top',
                color: '#FFFFFF',

                formatter(item) {
                  return item.data.nodeName;
                }
              }
            },
            itemStyle: {
              normal: {
                label: {
                  show: true,
                  formatter(item) {
                    return item.nodeName;
                  }
                }
              }
            },
            data: charts.nodes,
          }
        ]
      };
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44

散点数据如下：

import mnImg from '@/assets/images/monitor/module-normal.png';
import appImg from '@/assets/images/monitor/app.png';
import saImg from '@/assets/images/monitor/service-normal.png';
// 节点数据
      const nodes = [
        {
          x: 500,
          y: 480,
          nodeName: 'test1',
          img: appImg
        },
        {
          x: '220',
          y: '800',
          nodeName: 'test2',
          img: absaImg
        },
        {
          x: '140',
          y: '690',
          nodeName: 'test3',
          img: saImg
        },
        ]
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24

echarts图的data写法：

for (let j = 0; j < nodes.length; j++) {
      // eslint-disable-next-line radix
        const x = parseInt(nodes[j].x);
        // eslint-disable-next-line radix
        const y = parseInt(nodes[j].y);
        const node = {
          id: nodes[j].id,
          nodeName: nodes[j].nodeName,
          value: [x, y], // 散点坐标
          symbolSize: 300, // 散点图大小
          symbol: 'image://' + nodes[j].img, // 重点：散点图片地址！！！
          itemStyle: {
            color: '#12b5d0'
          }
        };
        charts.nodes.push(node);
 }
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17

以上就能实现，散点图的圆点设置成不同的自定义图片、且使用本地静态资源图片的写法。