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 2020/06/02 10:47:52 UTC
[GitHub] [incubator-echarts] lly0414 opened a new issue #12735: series配置路径图和关系图生成echtars实例后通过setOption再配置graphic导致路径图消失了
lly0414 opened a new issue #12735:
URL: https://github.com/apache/incubator-echarts/issues/12735
### Version
4.8.0
### Steps to reproduce
```javascript
var myChart = echarts.init(document.getElementById('Id'));
var path= 'M30.9,53.2C16.8,53.2,5.3,41.7,5.3,27.6S16.8,2,30.9,2C45,2,56.4,13.5,56.4,27.6S45,53.2,30.9,53.2z M30.9,3.5C17.6,3.5,6.8,14.4,6.8,27.6c0,13.3,10.8,24.1,24.101,24.1C44.2,51.7,55,40.9,55,27.6C54.9,14.4,44.1,3.5,30.9,3.5z M36.9,35.8c0,0.601-0.4,1-0.9,1h-1.3c-0.5,0-0.9-0.399-0.9-1V19.5c0-0.6,0.4-1,0.9-1H36c0.5,0,0.9,0.4,0.9,1V35.8z M27.8,35.8 c0,0.601-0.4,1-0.9,1h-1.3c-0.5,0-0.9-0.399-0.9-1V19.5c0-0.6,0.4-1,0.9-1H27c0.5,0,0.9,0.4,0.9,1L27.8,35.8L27.8,35.8z'
var graphData = [{
x: 200,
y: 500,
nodeName: '应用',
svgPath: path,
symbolSize: 22,
},{
x: 400,
y: 500,
nodeName: '应用',
svgPath: path,
symbolSize: 22,
}]
var charts = {
nodes: [],
linesData: [{
coords: [
[200, 500],
[400, 500],
]
}, {
coords: [
[400, 500],
[600, 500],
]
}]
}
for (var j = 0; j < graphData.length; j ) {
const {
x,
y,
nodeName,
svgPath,
symbolSize
} = graphData[j];
var node = {
nodeName,
value: [x, y],
symbolSize: symbolSize || 50,
symbol: 'path://' svgPath,
itemStyle: {
color: 'orange',
}
}
charts.nodes.push(node)
}
option = {
backgroundColor: "#0B1321",
xAxis: {
min: 0,
max: 1000,
show: false,
type: 'value'
},
yAxis: {
min: 0,
max: 1000,
show: false,
type: 'value'
},
series: [{
type: 'graph',
coordinateSystem: 'cartesian2d',
label: {
show: true,
position: 'top',
color: 'orange',
formatter: function(item) {
return item.data.nodeName
}
},
data: charts.nodes,
}, {
type: 'lines',
polyline: true,
coordinateSystem: 'cartesian2d',
symbol: 'arrow',
lineStyle: {
type: 'solid',
width: 3,
color: '#f00',
curveness: 0,
},
effect: {
show: true,
color: '#000',
symbolSize: 8,
period: 4,
trailLength: 0.5,
},
data: charts.linesData
}]
};
myChart.setOption(option);
setTimeout(function () {
// Add shadow circles (which is not visible) to enable drag.
myChart.setOption({
graphic: echarts.util.map(graphData, function (dataItem, dataIndex) {
return {
type: 'circle',
shape: {
r: 11,
},
// 用 transform 的方式对圆点进行定位。position: [x, y] 表示将圆点平移到 [x, y] 位置。
// 这里使用了 convertToPixel 这个 API 来得到每个圆点的位置，下面介绍。
position: myChart.convertToPixel({seriesIndex: 0}, [dataItem.x, dataItem.y]),
invisible: true,
z: 9999,
};
}),
})
}, 3000);
```
### What is expected?
在关系图的节点标记上生成一个重合的原点，类似官方示例里的拖拽
### What is actually happening?
圆点确实生成了但是路径图却不现实了
<!-- This issue is generated by echarts-issue-helper. DO NOT REMOVE -->
----------------------------------------------------------------
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
---------------------------------------------------------------------
To unsubscribe, e-mail: commits-unsubscribe@echarts.apache.org
For additional commands, e-mail: commits-help@echarts.apache.org
[GitHub] [incubator-echarts] lly0414 closed issue #12735: series配置路径图和关系图生成echtars实例后通过setOption再配置graphic导致路径图消失了
Posted by GitBox <gi...@apache.org>.
lly0414 closed issue #12735:
URL: https://github.com/apache/incubator-echarts/issues/12735
----------------------------------------------------------------
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
---------------------------------------------------------------------
To unsubscribe, e-mail: commits-unsubscribe@echarts.apache.org
For additional commands, e-mail: commits-help@echarts.apache.org