echars 地图添加纹理图片

目前已经用echarts写好了地图的展示效果，但是想给地图添加纹理。发现可以通过svg创建自定义地图纹理效果。

通过QGIS导出svg文件，需要在标签里添加name属性，才能有点击事件。代码如下（把svg部分替换为带纹理地图的svg即可）：

var svg = `

`;

echarts.registerMap("organ_diagram", { svg: svg });


option = {
  backgroundColor: "#040b1c",
  title: {
    text: "地图系列的 SVG 底图-2",
    left: "center",
    bottom: 10,
  },
  tooltip: {
    show: false,
    trigger: "item",
    backgroundColor: "rgba(166, 200, 76, 0.82)",
    borderColor: "#FFFFCC",
    showDelay: 0,
    hideDelay: 0,
    enterable: true,
    transitionDuration: 0,
    extraCssText: "z-index:100",
    formatter: function (params, ticket, callback) {
      console.log(params);
      //根据业务自己拓展要显示的内容
      var res = "";
      var name = params.name;
      var value = params.value[params.seriesIndex + 1] || params.value;
      res = "" + name + "
数据：" + value;
      return res;
    },
  },
  visualMap: {
    //图例值控制
    min: 1,
    max: 10,
    calculable: true,
    show: false,
    color: ["#f44336", "#00eaff"],
    textStyle: {
      color: "#fff",
    },
  },
  geo: {
    left: 10,
    right: 10,
    map: "organ_diagram",
    itemStyle: {
      borderWidth: 0,
    },
    emphasis: {
      focus: "none",
      itemStyle: {
        areaColor: "#ffffff",
      },
      label: {
        show: false,
      },
    },
    regions: [
      {
        name: "map11",
        itemStyle: {
          areaColor: "red",
          color: "red",
        },
      },
    ],
  },
  series: [
   
  ],
};

myChart.setOption(option);

myChart.on("click", function (event) {
  console.log(event);
  myChart.dispatchAction({
    type: "highlight",
    geoIndex: 0,
    name: event.name,
  });
});

参考：
http://ppchart.com 中搜索“svg”
echarts实现svg地图