Echarts 树图无法在 Chrome 和 Safari 上呈现

Question

我正在尝试在 echarts 上生成一棵树。该树在 Firefox 上加载良好。生成树的JS代码如下：

        var blastResults = JSON.parse(result);
        console.log(JSON.stringify(blastResults, null, 2));

        var blastResultsDiv = document.getElementById("blastResults");
        for (var i = 0; i < blastResults.length; i++) {
            var description = document.createElement("p");
            description.className = "h5";
            description.innerHTML = blastResults[i].description;
            blastResultsDiv.appendChild(description);

            var chart = document.createElement("div");
            chart.className = "chart";
            var resultChart = echarts.init(chart);
            var data = blastResults[i].tree;

            resultChart.setOption(option = {
                tooltip: {
                    trigger: 'item',
                    triggerOn: 'mousemove'
                },
                series: [
                    {
                        type: 'tree',

                        data: [data],

                        top: '1%',
                        left: '7%',
                        bottom: '1%',
                        right: '20%',

                        symbolSize: 7,
                        initialTreeDepth: 9,

                        label: {
                            normal: {
                                position: 'left',
                                verticalAlign: 'middle',
                                align: 'right',
                                fontSize: 9
                            }
                        },

                        leaves: {
                            label: {
                                normal: {
                                    position: 'right',
                                    verticalAlign: 'middle',
                                    align: 'left'
                                }
                            }
                        },

                        expandAndCollapse: true,
                        animationDuration: 550,
                        animationDurationUpdate: 750
                    }
                ]
            });
            blastResultsDiv.appendChild(chart);

图形生成的示例JSON结果如下：

[{"tree":{"children":[{"children":[{"children":[{"children":[{"children":[{"children":[{"name":"Escherichia coli"},{"name":"Escherichia sp. MOD1-EC6300"}],"name":"Escherichia"},{"children":[{"name":"Shigella boydii"},{"name":"Shigella sonnei"},{"name":"Shigella dysenteriae"},{"name":"Shigella flexneri"}],"name":"Shigella"},{"children":[{"name":"Salmonella enterica"}],"name":"Salmonella"}],"name":"Enterobacteriaceae"}],"name":"Enterobacterales"}],"name":"Gammaproteobacteria"}],"name":"Proteobacteria"}],"name":"Bacteria"},"description":" bacteriophage N4 receptor, outer membrane subunit [Escherichia coli str. K-12 substr. MG1655]"},{"tree":{"children":[{"children":[{"children":[{"children":[{"children":[{"children":[{"name":"Escherichia coli"}],"name":"Escherichia"},{"children":[{"name":"Shigella sonnei"}],"name":"Shigella"},{"children":[{"name":"Kluyvera intermedia"}],"name":"Kluyvera"},{"children":[{"name":"Citrobacter sedlakii"}],"name":"Citrobacter"}],"name":"Enterobacteriaceae"},{"children":[{"name":"Phytobacter ursingii"}],"name":"Phytobacter"}],"name":"Enterobacterales"}],"name":"Gammaproteobacteria"}],"name":"Proteobacteria"}],"name":"Bacteria"},"description":" toxic membrane protein [Escherichia coli str. K-12 substr. MG1655]"},{"tree":{"children":[{"children":[{"children":[{"children":[{"children":[{"children":[{"name":"Escherichia coli"}],"name":"Escherichia"}],"name":"Enterobacteriaceae"}],"name":"Enterobacterales"}],"name":"Gammaproteobacteria"}],"name":"Proteobacteria"}],"name":"Bacteria"},"description":" thr operon leader peptide [Escherichia coli str. K-12 substr. MG1655]"}]

如果需要更多信息，请告诉我。提前致谢。

Answer 1

先尝试附加 DOM，然后再附加 echarts.init(DOM)

因为如果 DOM 没有实际渲染，这个 DOM 的 clientWidth , clientHeight 等于 0，用于初始化 canvas 来自 echarts.

查看此演示：

         var result = '[{"tree":{"children":[{"children":[{"children":[{"children":[{"children":[{"children":[{"name":"Escherichia coli"},{"name":"Escherichia sp. MOD1-EC6300"}],"name":"Escherichia"},{"children":[{"name":"Shigella boydii"},{"name":"Shigella sonnei"},{"name":"Shigella dysenteriae"},{"name":"Shigella flexneri"}],"name":"Shigella"},{"children":[{"name":"Salmonella enterica"}],"name":"Salmonella"}],"name":"Enterobacteriaceae"}],"name":"Enterobacterales"}],"name":"Gammaproteobacteria"}],"name":"Proteobacteria"}],"name":"Bacteria"},"description":" bacteriophage N4 receptor, outer membrane subunit [Escherichia coli str. K-12 substr. MG1655]"},{"tree":{"children":[{"children":[{"children":[{"children":[{"children":[{"children":[{"name":"Escherichia coli"}],"name":"Escherichia"},{"children":[{"name":"Shigella sonnei"}],"name":"Shigella"},{"children":[{"name":"Kluyvera intermedia"}],"name":"Kluyvera"},{"children":[{"name":"Citrobacter sedlakii"}],"name":"Citrobacter"}],"name":"Enterobacteriaceae"},{"children":[{"name":"Phytobacter ursingii"}],"name":"Phytobacter"}],"name":"Enterobacterales"}],"name":"Gammaproteobacteria"}],"name":"Proteobacteria"}],"name":"Bacteria"},"description":" toxic membrane protein [Escherichia coli str. K-12 substr. MG1655]"},{"tree":{"children":[{"children":[{"children":[{"children":[{"children":[{"children":[{"name":"Escherichia coli"}],"name":"Escherichia"}],"name":"Enterobacteriaceae"}],"name":"Enterobacterales"}],"name":"Gammaproteobacteria"}],"name":"Proteobacteria"}],"name":"Bacteria"},"description":" thr operon leader peptide [Escherichia coli str. K-12 substr. MG1655]"}]' ;

    var blastResults = JSON.parse(result);
    var blastResultsDiv = document.querySelector('#blastResultsDiv');
   
    for (var i = 0; i < blastResults.length; i++) {
        var description = document.createElement("p");
        description.className = "h5";
        description.innerHTML = blastResults[i].description;
       blastResultsDiv.appendChild(description);

        var chart = document.createElement("div");
        chart.className = "chart";
        blastResultsDiv.appendChild(chart);
        var resultChart = echarts.init(chart);
        var data = blastResults[i].tree;
        let option = {
            tooltip: {
                trigger: 'item',
                triggerOn: 'mousemove'
            },
            series: [
                {
                    type: 'tree',

                    data: [data],

                    top: '1%',
                    left: '7%',
                    bottom: '1%',
                    right: '20%',

                    symbolSize: 7,
                    initialTreeDepth: 9,

                    label: {
                        normal: {
                            position: 'left',
                            verticalAlign: 'middle',
                            align: 'right',
                            fontSize: 9
                        }
                    },

                    leaves: {
                        label: {
                            normal: {
                                position: 'right',
                                verticalAlign: 'middle',
                                align: 'left'
                            }
                        }
                    },

                    expandAndCollapse: true,
                    animationDuration: 550,
                    animationDurationUpdate: 750
                }
            ]
        };
        
        resultChart.setOption(option);
         
 }

.chart {
  width: 100%;
  height: 200px;
}

<html>
      <header>
        <script src="https://cdn.bootcss.com/echarts/4.1.0.rc2/echarts-en.min.js"></script>
      </header>
      <body>
        <div id="blastResultsDiv" ></div>
      </body>
    </html>

Echarts 树图无法在 Chrome 和 Safari 上呈现

Echarts tree graph not rendering on Chrome and Safari

javascript

google-chrome

firefox

safari

echarts