echarts icon indicating copy to clipboard operation
echarts copied to clipboard

[Bug] IE10下ehcarts绘制tree时,graphic.js (227,9)报错: ctx.drawImage(image, x, y, width, height);

Open yatingFeng opened this issue 3 years ago • 2 comments

Version

5.1.2

Link to Minimal Reproduction

No response

Steps to Reproduce

IE10: image IE11: image

     this.treeObj = this.$echarts.init(this.$refs.treeChart);
      // 画布自适应高度
      let calcHeight = 50;
      for (let i = 0; i < this.treeChartData[0].children.length; i++) {
        if (
          Array.isArray(this.treeChartData[0].children[i].value) &&
          this.treeChartData[0].children[i].value.length > 0
        ) {
          let height = this.getHeight(this.treeChartData[0].children[i].value);
          calcHeight += height;
        } else {
          calcHeight += 30;
        }
      }
      this.treeObj.resize({ height: calcHeight });
      var option = {
        tooltip: {
          trigger: "item",
          triggerOn: "mousemove",
          extraCssText: "white-space: pre-wrap;max-width:400px",
          formatter: function (params) {
            return `<div >${params.data.name}</div>`;
          },
        },
        series: [
          {
            type: "tree",
            top: 0,
            bottom: 0,
            left: 150,
            right: 350,
            layout: "orthogonal",
            edgeShape: "polyline",
            edgeForkPosition: "20%",
            expandAndCollapse: true,
            // 可支持的树状层级
            initialTreeDepth: 14,
            symbol: "image://../../../images/tree.png",
            symbolSize: 14,
            label: {
              position: "left",
              align: "right",
              color: "#fff",
              overflow: "breakAll",
              formatter: function (params) {
                var val;
                val = params.name;
                if (params.data.index === 0) {
                  return "{a|" + val + "}";
                } else if (params.data.index === 1) {
                  return "{b|" + val + "}";
                } else if (params.data.index === 2) {
                  return "{c|" + val + "}";
                } else if (params.data.index === 3) {
                  return "{d|" + val + "}";
                } else if (params.data.index === -1) {
                  return;
                } else {
                  return "{e|" + val + "}";
                }
              },
              rich: {
                a: {
                  fontSize: "16",
                  width: "100",
                  height: "30",
                  padding: [10, 10, 10, 10],
                  backgroundColor: "#50aac1",
                },
                b: {
                  fontSize: "14",
                  padding: [10, 10, 10, 10],
                  backgroundColor: "#827dbd",
                },
                c: {
                  fontSize: "14",
                  padding: [10, 10, 10, 10],
                  backgroundColor: "#f2d107",
                },
                d: {
                  fontSize: "14",
                  padding: [10, 10, 10, 10],
                  backgroundColor: "#a7e0c7",
                },
                e: {
                  fontSize: "14",
                  padding: [10, 10, 10, 10],
                  backgroundColor: "#a7e0c7",
                },
              },
            },
            leaves: {
              // 最后一级的文字样式
              label: {
                position: "right",
                verticalAlign: "middle",
                align: "left",
                overflow: "breakAll",
                color: "#333",
                fontSize: "14",
                lineHeight: "18",
              },
              lineStyle: {
                width: 1.5,
              },
              symbol: "none",
            },
            emphasis: {
              label: {
                fontWeight: "bold",
              },
            },
            data: this.treeChartData,
          },
        ],
      };
      this.treeObj.setOption(option);`

Current Behavior

IE10下绘图有问题,但tooltip能正常展示 image

Expected Behavior

期望绘图正常

Environment

- OS:
- Browser:
- Framework:

Any additional comments?

No response

yatingFeng avatar Apr 28 '22 02:04 yatingFeng

@yatingFeng It seems you are not using English, I've helped translate the content automatically. To make your issue understood by more people and get helped, we'd like to suggest using English next time. 🤗

TRANSLATED

TITLE

[Bug] When eHCarts draws tree under IE10, graphic .js (227,9) error: ctx.drawImage(image, x, y, width, height);

echarts-bot[bot] avatar Apr 28 '22 02:04 echarts-bot[bot]

This issue has been automatically marked as stale because it did not have recent activity. It will be closed in 7 days if no further activity occurs. If you wish not to mark it as stale, please leave a comment in this issue.

github-actions[bot] avatar Apr 27 '24 21:04 github-actions[bot]

This issue has been automatically closed because it did not have recent activity. If this remains to be a problem with the latest version of Apache ECharts, please open a new issue and link this to it. Thanks!

github-actions[bot] avatar May 04 '24 21:05 github-actions[bot]