You are viewing a plain text version of this content. The canonical link for it is here.
Posted to commits@echarts.apache.org by GitBox <gi...@apache.org> on 2019/10/29 07:37:40 UTC
[GitHub] [incubator-echarts] zhouchunyi opened a new issue #7348: force图 更新数据时，旧边打印在背景中
zhouchunyi opened a new issue #7348: force图 更新数据时，旧边打印在背景中
URL: https://github.com/apache/incubator-echarts/issues/7348
<!--
为了方便我们能够复现和修复 bug，请遵从下面的规范描述您的问题。
-->
### One-line summary [问题简述]
使用的graph类型：是echart的力导向图（force）
应用的需求：每次从服务器获取数据更新当前graph
问题：在**数据更新或图像刷新**（echartInstance.resize(w,h)）的过程中会出现过去边的打印在背景中，且若不clear无法清除，其中数据更新的问题经常但非总是，resize的问题每次都会出现。
通过查阅资料和分析问题，应该和series更新问题类似 https://github.com/ecomfe/echarts/issues/3976 ，现利用了很简单的方法解决，但是效果并不是我最理想的状态。
### Version & Environment [版本及环境]
+ ECharts version [ECharts 版本]: 3.8.4
+ Browser version [浏览器类型和版本]: Chrome
+ OS Version [操作系统类型和版本]:windows10
### Expected behaviour [期望结果]
1、更新后没有旧边打印到背景，且像正常情况一样merge，而非当前先clear，两次graph即便类似也强制刷新
2、resize过程中不出现边打印到背景的情况
别人的回答中原本series更新是merge的，所以会有动态添加的感觉，我现在为了不出现边停留的问题，在更新前echartInstance.clear()了，这使得每次强制重新绘制，没有动态连续的效果。且希望可以使graph响应式的根据浏览器大小变化，由于resize的效果会使得边停留在背景中，也只得放弃。
### ECharts option [ECharts配置项]
<!-- Copy and paste your 'echarts option' here. -->
<!-- [下方贴你的option，注意不要删掉下方 ```javascript 和 尾部的 ``` 字样。最好是我们能够直接运行的 option。如何得到能运行的 option 参见上方的 guidelines for contributing] -->
```javascript
var option = {
// title: {//graph标题
// text: 'Show-Test',
// x: 'right',
// y: 'bottom'
// },
// tooltip: {},
legend: {//图例
x: 'left',
data: legendList,
orient: 'vertical'//'horizontal'
},
// animation: false,
series: [
{
type: 'graph',
layout: 'force',
clickable: true,
radius: '100%',
// name: "UserKG",
ribbonType: false,
categories: categories,//node类型
itemStyle: {
normal: {
label: {
show: true,
textStyle: {
color: '#000307'
}
},
nodeStyle: {
brushType: 'both',
borderColor: 'rgba(255,215,0,0.4)',
borderWidth: 1
}
},
emphasis: {
label: {
show: true
// textStyle: null // 默认使用全局文本样式，详见TEXTSTYLE
}
}
},
lineStyle: {
normal: {
label: {show: true},
width: 1,
show: true//,
// color: 'target'//决定边的颜色是与起点相同还是与终点相同
// curveness: 0.3//边的曲度，支持从 0 到 1 的值，值越大曲度越大。
}
},
// edgeSymbol: ['arrow'],
edgeLabel: {
normal: {
show: true,
formatter: function (edge) {
// console.log("formatter edge", edge);
return edge.data.name;
},
textStyle: {
fontSize: 12
}
}
},
// useWorker: false,
// focusNodeAdjacency: true,
minRadius: 15,
maxRadius: 25,
draggable: true,
scaling: 1.1,
roam: "move",
nodes: nodes,
links: links,
force: {
repulsion: 100,
gravity: 0.03,
edgeLength: [100, 200]
}
,
label: {
normal: {
show: true,
position: 'bottom'
}
}
}
]
};
myChart.setOption(option);
```
###Echart 为了防止更新时打印旧边的临时方法
这只是没有找到合适方法的临时方法
```javascript
var dom = document.getElementById('graph-main'); //容纳graph的div的id是'graph-main'
var myChart = echarts.getInstanceByDom(dom);
if (!myChart) {
myChart = echarts.init(dom);
} else {
myChart.clear();
}
```
###Echart graph响应式修改大小
写在静态网页（html）里面，现已注释
```html
window.onresize = function () {
var div_row = document.getElementById("div-row");//获取外层div的大小
var width = div_row.offsetWidth, height = div_row.offsetHeight * 0.91;
var dom = document.getElementById('graph-main');//容纳graph的div
var myChart = echarts.getInstanceByDom(dom);
if (myChart) {
myChart.resize(width, height);
}
};
```
### Other comments [其他信息]
<!-- For example: Screenshot or Online demo -->
<!-- [例如，截图或线上实例 (JSFiddle/JSBin/Codepen)] -->
执行resize的效果：
update的数据的效果：
----------------------------------------------------------------
This is an automated message from the Apache Git Service.
To respond to the message, please log on to GitHub and use the
URL above to go to the specific comment.
For queries about this service, please contact Infrastructure at:
users@infra.apache.org
With regards,
Apache Git Services
---------------------------------------------------------------------
To unsubscribe, e-mail: commits-unsubscribe@echarts.apache.org
For additional commands, e-mail: commits-help@echarts.apache.org