vue2+antv-x6+画布背景图

直接附上代码：

<template>
  <div class="container">
    <a-row>
      <a-col :span="15">
        <h3 style="margin-bottom: 0">区域分布图</h3>
        <a-breadcrumb style="margin: 10px">
          <a-breadcrumb-item>区域分布图</a-breadcrumb-item>
          <a-breadcrumb-item>楼宇分布图</a-breadcrumb-item>
          <a-breadcrumb-item>楼层索引图</a-breadcrumb-item>
        </a-breadcrumb>
        <div class="map">
          <div ref="x6div" class="x6div" :style="{ 'background-image': 'url(' + imgURL + ')' }"></div>
        </div>
      </a-col>
      <a-col :span="9">
        <div>
          <div ref="proportion" class="proportion"></div>
          <div ref="classification" class="classification"></div>
          <div ref="change" class="change"></div>
        </div>
      </a-col>
    </a-row>
  </div>
</template>

<script>
import { Graph } from '@antv/x6'

export default {
  data() {
    return {
      imgURL: require('./../workBench/【公开】成都地图.jpg'),
      option: {
        tooltip: {
          trigger: 'item',
        },
        legend: {
          top: '5%',
          left: 'center',
        },
        series: [
          {
            name: 'Access From',
            type: 'pie',
            radius: ['40%', '70%'],
            avoidLabelOverlap: false,
            itemStyle: {
              borderRadius: 10,
              borderColor: '#fff',
              borderWidth: 2,
            },
            label: {
              show: false,
              position: 'center',
            },
            emphasis: {
              label: {
                show: true,
                fontSize: 40,
                fontWeight: 'bold',
              },
            },
            labelLine: {
              show: false,
            },
            data: [
              { value: 1048, name: 'Search Engine' },
              { value: 735, name: 'Direct' },
              { value: 580, name: 'Email' },
              { value: 484, name: 'Union Ads' },
              { value: 300, name: 'Video Ads' },
            ],
          },
        ],
      },
      nodeData: {
        nodes: [
          {
            shape: 'html',
            id: 'node1', // String，可选，节点的唯一标识
            x: 40, // Number，必选，节点位置的 x 值
            y: 40, // Number，必选，节点位置的 y 值
            width: 40, // Number，可选，节点大小的 width 值
            height: 40, // Number，可选，节点大小的 height 值
            html: () => {
              const wrap = document.createElement('div')
              wrap.style.width = '100%'
              wrap.style.height = '100%'
              wrap.style.display = 'flex'
              wrap.style.alignItems = 'center'
              wrap.style.justifyContent = 'center'
              wrap.style.border = '1px solid #9254de'
              wrap.style.background = 'rgba(222,221,235,.4)'
              wrap.style.borderRadius = '50%'
              wrap.innerText = '标点'
              return wrap
            },
          },
          {
            shape: 'html',
            id: 'node2', // String，节点的唯一标识
            x: 160, // Number，必选，节点位置的 x 值
            y: 180, // Number，必选，节点位置的 y 值
            width: 40, // Number，可选，节点大小的 width 值
            height: 40, // Number，可选，节点大小的 height 值
            // label: 'world', // String，节点标签
            html: () => {
              const wrap = document.createElement('div')
              wrap.style.width = '100%'
              wrap.style.height = '100%'
              wrap.style.display = 'flex'
              wrap.style.alignItems = 'center'
              wrap.style.justifyContent = 'center'
              wrap.style.border = '1px solid #9254de'
              wrap.style.background = 'rgba(222,221,235,.4)'
              wrap.style.borderRadius = '50%'
              wrap.innerText = '标点'
              return wrap
            },
          },
        ],
      },
    }
  },
  created() {},
  mounted() {
    this.initMap()
  },
  methods: {
    initMap() {
      const graph = new Graph({
        container: this.$refs.x6div,
        width: 950,
        height: 700,
        // grid: true,
      })
      graph.fromJSON(this.nodeData)
    },
  },
}
</script>

<style lang="less" scoped>
.container {
  width: 100%;
  height: 100%;
  background-color: #fff;
  padding: 20px;
  h3 {
    width: 100%;
    text-align: center;
  }
  .map {
    width: 100%;
    height: 700px;
    overflow: hidden;
    // min-height: 700px;
    border: 1px solid rgba(0, 0, 1, 0.1);
    border-radius: 10px;
    .x6div {
      width: 950px;
      height: 700px;
      margin: 0 auto;
      background-repeat: no-repeat;
      background-size: 100% 100%;
    }
  }
  .proportion,
  .classification,
  .change {
    width: 95%;
    margin: 0px auto;
    margin-bottom: 10px;
    height: 240px;
    border-radius: 10px;
    border: 1px solid rgba(0, 0, 1, 0.1);
    text-align: center;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.12), 0 0 6px rgba(0, 0, 0, 0.04);
  }
}
</style>

说说中间遇到的坑：x6-api中有一个属性 background{}；

测试了很多次，就只想讲画布的背景动态设置为一张图片，无奈一直不生效，不知道什么原因，

（但是之前也用win11测试能生效，现在用的mac，觉得应该是自己哪里写的有问题）

dom节点也没有看到background的属性，无奈设置画布的行内样式，但是行内样式想写动态的样式，用了三个方法

<div ref="x6div" class="x6div" style="background-image: url('./../workBench/【公开】成都地图.jpg')"></div> //不生效
<div ref="x6div" class="x6div" :style="{ 'background-image': 'url(' + imgURL + ')' }"></div> //不生效
//data中定义 imgURL:'./../workBench/【公开】成都地图.jpg'
<div ref="x6div" class="x6div" :style="{ 'background-image': 'url(' + imgURL + ')' }"></div>
//data中定义 require('./../workBench/【公开】成都地图.jpg') 这才生效

欢迎吐槽