1.获取图片

var img = require('./imgs/main_bg.png')
var domImg = document.createElement("img");
domImg.style.height = domImg.height = domImg.width = domImg.style.width = "100px";
domImg.src = img

2.把图片放在echarts配置项里

geo: {
  show: true,                                  // 是否显示 ECharts 地理坐标系组件
  map: 'china',                                  // 地理坐标系组件的地图类型
  roam: false,                                  // 开启鼠标缩放和平移漫游
  label: {                                     // 图形上的文本标签
    normal: {
      show: false,                          // 是否显示标签
      textStyle: {                         // 标签字体样式
        color: "#000"                    // 标签字体颜色
      }
    },
    emphasis: {
      show: false,
    }
  },
  itemStyle: {
    areaColor: {
        type: "pattern",
        image: domImg, //配置图片
        repeat: "repeat", //可选值repeat、no-repeat、repeat-x、repeat-y
    },
    borderColor: `#16ecfc`,
    borderWidth: 1,
    shadowBlur: 6,
    shadowOffsetY: 0,
    shadowOffsetX: 0,
    shadowColor: `#16ecfc`,
    emphasis: {
      areaColor: `rgba(63, 218, 255, 0.1)`,
      opacity:0.4,
      label: {
        color: `#fff`
      }
    }
  },
  center:[104.5, 36.263161],
  zoom:1,
  layoutCenter: ['50%', '40%'],
  layoutSize: '100%',
},
Logo

腾讯云面向开发者汇聚海量精品云计算使用和开发经验,营造开放的云计算技术生态圈。

更多推荐