Uncaught TypeError: CanvasPattern.setTransform: Argument 1 does not implement interface SVGMatrix.

[liuzhenxiaoqqq]

//生成圆
function makearc(color) {
  const canvas = document.createElement("canvas");
  if (canvas) {
    canvas.width = 6;
    canvas.height = 6;
    let context = canvas.getContext("2d");
    context.fillStyle = "#fff";
    // context.strokeStyle = "#fff";
    context.fillRect(0, 0, 6, 6);
    context.beginPath();
    context.arc(1, 1, 1, 0, 1, true);
    context.closePath();
    context.fillStyle = color || "#fff";
    context.fill();
    return canvas;
  } else {
    return;
  }
},

const piePatternImg = makearc("#ccc"); const piePatternImg1 = makearc("#125FB2"); option={ tooltip: { trigger: "item", borderWidth: 0, formatter: function (params) { return ${params.name}: 20; }, }, geo: { show: true, //是否显示地理坐标系组件 roam: true, //是否允许鼠标滚动放大，缩小 map: "world", //这就是注册的地图文件的那个mapName zoom: 1.25, scaleLimit: { min: 0.8, max: 1.8, }, itemStyle: { borderWidth: 0, areaColor: { image: piePatternImg, repeat: "repeat", }, emphasis: { label: { show: true }, areaColor: { image: piePatternImg1, repeat: "repeat", }, }, }, emphasis: { //高亮状态下的多边形和标签样式。 label: { show: false, //文本 }, itemStyle: { areaColor: "#125FB2", //区域 }, }, select: { label: { show: false, }, itemStyle: { borderColor: "#fff", areaColor: { image: piePatternImg, repeat: "repeat", }, }, }, },

    dataRange: {
      min: 0,
      max: 1000,
      calculable: true,
      show: false,
      // 从深颜色到较浅的颜色
      color: ["#125FB2", "#1890FF", "#69C0FF", "#BAE7FF"],
    },
    series: [
      {
        name: "国家",
        type: "map",
        mapType: "world",
        roam: true,
        zoom: 1.25,
        geoIndex: 0,
        scaleLimit: {
          min: 0.8,
          max: 1.8,
        },
        itemStyle: {
          areaColor: {
            image: piePatternImg,
            repeat: "repeat",
          },
          emphasis: {
            label: { show: false },
            borderColor: "#fff",
            areaColor: {
              image: piePatternImg1,
              repeat: "repeat",
            },
          },
        },
        select: {
          label: {
            show: false,
          },
          itemStyle: {
            borderColor: "#fff",
            areaColor: {
              image: piePatternImg,
              repeat: "repeat",
            },
          },
        },
        data: [],
      },
      {
        name: "国家",
        type: "effectScatter", //散点地图的type
        coordinateSystem: "geo", //该系列使用的坐标系
        mapType: "world",
        data: [{name: ‘中国’，val略： [120.1, 30.1, 30]}],
        legendHoverLink: true,
        itemStyle: {
          normal: {
            opacity: 0.6,
          },
        },
        label: {
          formatter: (params) => {
            const { data = {} } = params;
            return `${data.name}`; // \n${data.value[2]}
          },
          position: "right", //bottom
          offset: [5, 0],
          show: true,
          color: "#666",
        },
        //标记的大小,可以设置数组或者函数返回值的形式，也可以用数组分开表示宽和高，例如 [20, 10] 表示标记宽为20，高为10。
        symbol: "circle",
        zlevel: 1,
        symbolSize: (val, params) => {
          let size = 15;
          return size;
        },
        rippleEffect: {
          //涟漪特效相关配置。
          brushType: "stroke", //波纹的绘制方式
        },
        hoverAnimation: true, //鼠标移入放大圆
      },
    ],
  }

在火狐版本78中报错 Uncaught TypeError: CanvasPattern.setTransform: Argument 1 does not implement interface SVGMatrix. createCanvasPattern webpack-internal:///./node_modules/zrender/esm/canvas/graphic.js:69 brushPath webpack-internal:///./node_modules/zrender/esm/canvas/graphic.js:113 brush webpack-internal:///./node_modules/zrender/esm/canvas/graphic.js:513 _doPaintEl webpack-internal:///./node_modules/zrender/esm/canvas/Painter.js:337 repaint webpack-internal:///./node_modules/zrender/esm/canvas/Painter.js:272 _loop_1 webpack-internal:///./node_modules/zrender/esm/canvas/Painter.js:303 _doPaintList webpack-internal:///./node_modules/zrender/esm/canvas/Painter.js:313 _paintList webpack-internal:///./node_modules/zrender/esm/canvas/Painter.js:189 refresh webpack-internal:///./node_modules/zrender/esm/canvas/Painter.js:130 refreshImmediately webpack-internal:///./node_modules/zrender/esm/zrender.js:147 _flush webpack-internal:///./node_modules/zrender/esm/zrender.js:162 update webpack-internal:///./node_modules/zrender/esm/zrender.js:98 update webpack-internal:///./node_modules/zrender/esm/animation/Animation.js:93 step webpack-internal:///./node_modules/zrender/esm/animation/Animation.js:102

[echarts-bot[bot]]

This issue is not created using issue template so I'm going to close it. 🙊 Sorry for this, but it helps save our maintainers' time so that more developers get helped. Feel free to create another issue using the issue template.

If you think you have already made your point clear without the template, or your problem cannot be covered by it, you may re-open this issue again.

这个 issue 未使用 issue 模板 创建，所以我将关闭此 issue。 为此带来的麻烦我深表歉意，但是请理解这是为了节约社区维护者的时间，以更高效地服务社区的开发者群体。 如果您愿意，请使用 issue 模板重新创建 issue。

如果您认为虽然没有使用模板，但您已经提供了复现问题的充分描述，或者您的问题无法使用模板表达，也可以重新 open 这个 issue。

[plainheart]

这似乎是 firefox 的 bug，建议升级至 79 或以上版本试试。 相关 bug 报告：https://bugzilla.mozilla.org/show_bug.cgi?id=1565997