javascript - Echarts 树图未在 Chrome 和 Safari 上呈现
问题描述
我正在尝试在 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 结果如下:
Proteobacteria"}],"name":"Bacteria"},"description":"噬菌体 N4 受体,外膜亚基 [Escherichia coli str. K-12 substr。MG1655]"},{"tree":{"children":[{"children":[{"children":[{"children":[{"children":[{"children":[{"name" :"大肠杆菌"}],"name":"大肠杆菌"},{"children":[{"name":"Shigella sonnei"}],"name":"志贺氏菌"},{"children":[ {"name":"Kluyvera intermedia"}],"name":"Kluyvera"},{"children":[{"name":"Citrobacter sedlakii"}],"name":"Citrobacter"}],"名称":"肠杆菌科"},{"儿童": Bacteria"},"description":"thr 操纵子前导肽 [Escherichia coli str. K-12 substr。MG1655]"}]
如果需要更多信息,请告诉我。提前致谢。
解决方案
然后先尝试附加DOMecharts.init(DOM)
因为如果 DOM 没有实际渲染,clientWidth
,clientHeight
这个 DOM 就等于0
, 用于初始化画布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>
推荐阅读
- php - Homestead vagrant up 解析错误
- google-classroom - 新模块和单元会成为 Google Classroom API 的一部分吗?
- javascript - 我如何创建一个可以提供 v-model 属性的自定义组件
- php - MySQL REST API 服务器上的连接太多(PHP Yii2)
- ruby-on-rails - 如何在 ruby on rails 上运行服务器?
- opencv - 使用最近的邻域与 cuda 调整图像大小
- php - Wordpress:为没有访问 wp-admin 的用户登录
- scala - com.couchbase.client.java.error.InvalidPasswordException:存储桶“beer-sample”的密码不匹配
- python - 用powershell替换字符串后Python脚本不运行
- android - 如何从android studio中的设备文件资源管理器查看sqlite数据库而不将其保存到系统