使用fabric.js生成的svg图制作echarts的map图表

框选图片区域制作echarts图这个需求的坑终于填的差不多了

写个demo记录下

生成的svg图代码如下：可以看出svg部分节点有name属性，echarts正是对应此name属性来显示具体数值。

<?xml version="1.0" encoding="UTF-8" standalone="no" ?>
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" version="1.1" width="690" height="276" viewBox="0 0 690 276" xml:space="preserve">
<desc>Created with Fabric.js 5.3.0</desc>
<defs>
</defs>
<g transform="matrix(1 0 0 1 345 138)"  >
	<image style="stroke: none; stroke-width: 0; stroke-dasharray: none; stroke-linecap: butt; stroke-dashoffset: 0; stroke-linejoin: miter; stroke-miterlimit: 4; fill: rgb(0,0,0); fill-rule: nonzero; opacity: 1;"  xlink:href="http://localhost:3000/images/2.jpg" x="-345" y="-138" width="690" height="276"></image>
</g>
<g transform="matrix(1 0 0 1 71.47 72.5)">
<rect style="stroke: none; stroke-width: 1; stroke-dasharray: none; stroke-linecap: butt; stroke-dashoffset: 0; stroke-linejoin: miter; stroke-miterlimit: 4; fill: rgb(255,0,0); fill-opacity: 0.5; fill-rule: nonzero; opacity: 1;" x="-10" y="-25" rx="0" ry="0" width="20" height="50" name="11"/>
</g><g transform="matrix(0.33 0 0 0.33 151.11 80.44)"  >
<g style=""   >
		<g transform="matrix(1 0 0 1 0 0)">
<ellipse style="stroke: none; stroke-width: 1; stroke-dasharray: none; stroke-linecap: butt; stroke-dashoffset: 0; stroke-linejoin: miter; stroke-miterlimit: 4; fill: rgb(255,0,0); fill-opacity: 0.5; fill-rule: nonzero; opacity: 1;" cx="0" cy="0" rx="75" ry="75" name="12"/>
</g>		<g transform="matrix(1 0 0 1 0 0)"  >
<ellipse style="stroke: none; stroke-width: 1; stroke-dasharray: none; stroke-linecap: butt; stroke-dashoffset: 0; stroke-linejoin: miter; stroke-miterlimit: 4; fill: rgb(255,255,255); fill-opacity: 0.9; fill-rule: nonzero; opacity: 1;"  cx="0" cy="0" rx="50" ry="50" />
</g>
</g>
</g>
<g transform="matrix(0.33 0 0 0.33 227.81 73.08)">
<g style="">
		<g transform="matrix(1 0 0 1 0 0)">
<ellipse style="stroke: none; stroke-width: 1; stroke-dasharray: none; stroke-linecap: butt; stroke-dashoffset: 0; stroke-linejoin: miter; stroke-miterlimit: 4; fill: rgb(255,0,0); fill-opacity: 0.5; fill-rule: nonzero; opacity: 1;" cx="0" cy="0" rx="75" ry="75" name="13"/>
</g>
		<g transform="matrix(1 0 0 1 0 0)">
<ellipse style="stroke: none; stroke-width: 1; stroke-dasharray: none; stroke-linecap: butt; stroke-dashoffset: 0; stroke-linejoin: miter; stroke-miterlimit: 4; fill: rgb(255,255,255); fill-opacity: 0.9; fill-rule: nonzero; opacity: 1;" cx="0" cy="0" rx="50" ry="50"/>
</g>
</g>
</g><g transform="matrix(1 0 0 1 120.45 138)">
<rect style="stroke: none; stroke-width: 1; stroke-dasharray: none; stroke-linecap: butt; stroke-dashoffset: 0; stroke-linejoin: miter; stroke-miterlimit: 4; fill: rgb(255,0,0); fill-opacity: 0.5; fill-rule: nonzero; opacity: 1;" x="-10" y="-25" rx="0" ry="0" width="20" height="50" name="14"/>
</g><g transform="matrix(1 0 0 1 223.4 157)">
<rect style="stroke: none; stroke-width: 1; stroke-dasharray: none; stroke-linecap: butt; stroke-dashoffset: 0; stroke-linejoin: miter; stroke-miterlimit: 4; fill: rgb(255,0,0); fill-opacity: 0.5; fill-rule: nonzero; opacity: 1;" x="-10" y="-25" rx="0" ry="0" width="20" height="50" name="15"/>
</g></svg>

根据svg画图

<script src="../plugins/echarts.min.v5.4.2.js"></script>
<script src="../plugins/jquery/jquery-3.3.1.js"></script>
<body>
  <div>
    <!-- svg图片在html中引入方式：img、object、iframe -->
    <object type="image/svg+xml" data="http://localhost:3000/images/test.svg" width="100" height="100"></object>
    <img src="http://localhost:3000/images/test.svg" alt="" width="100" height="100" />
  </div>
  <div id="mapChart" style="height: 400px"></div>
  <script>
    function drawChart() {
      var chartDom = document.getElementById("mapChart");
      var myChart = echarts.init(chartDom);
      // var myChart = echarts.init(chartDom, null, { renderer: "svg" });
      var option;

      $.get("../images/test.svg", function (svg) {
        echarts.registerMap("test_map", { svg: svg });
        option = {
          tooltip: {},
          visualMap: {
            left: "center",
            bottom: "10%",
            min: 5,
            max: 100,
            orient: "horizontal",
            text: ["", "Range"],
            realtime: true,
            calculable: true,
            inRange: {
              color: ["#dbac00", "#db6e00", "#cf0000"],
            },
          },
          series: [
            {
              name: "test",
              type: "map",
              map: "test_map",
              roam: true,
              emphasis: {
                label: {
                  show: false,
                },
              },
              selectedMode: false,
              data: [
                { name: "11", value: 15 },
                { name: "12", value: 55 },
                { name: "13", value: 85 },
                { name: "14", value: 45 },
                { name: "15", value: 35 },
                { name: "ellipse", value: 85 },
                { name: "rect", value: 95 },
              ],
            },
          ],
        };
        myChart.setOption(option);
      });

      option && myChart.setOption(option);
    }

    drawChart();
  </script>
</body>

之前试用过使用fabric的stroke画圆，结果导出的svg图虽然可以正常显示，echarts却无法识别

使用img标签导入的svg图不知道为什么背景图没显示，使用object导入的svg图显示正常

过程中遇到的svg图中嵌入的图片路径问题：

路径要使用url，且要确保路径可访问，注意url中的空格等特殊字符需要转义

记录下各转义函数转义的字符：一般转义url的话encodeURI就够用了

<script>
  const str = 'str+ $,?&%:;/|@<=>()"str中文';
  console.log(str);
  const str1 = encodeURI(str);
  console.log("encodeURI", str1, "   ", decodeURI(str1));
  const str2 = encodeURIComponent(str);
  console.log("encoencodeURIComponentdeURI", str2, "   ", decodeURIComponent(str2));
  const str3 = escape(str);
  console.log("escape", str3, "   ", unescape(str3));
</script>