You are viewing a plain text version of this content. The canonical link for it is here.
Posted to dev@echarts.apache.org by GitBox <gi...@apache.org> on 2018/07/17 03:11:18 UTC
[GitHub] gakkifans opened a new issue #8704: markline多个点连城多条线的时候，缩放浏览器或者datazoom会导致线位置错乱
gakkifans opened a new issue #8704: markline多个点连城多条线的时候，缩放浏览器或者datazoom会导致线位置错乱
URL: https://github.com/apache/incubator-echarts/issues/8704
<!--
为了方便我们能够复现和修复 bug，请遵从下面的规范描述您的问题。
-->
### One-line summary [问题简述]
我尝试在图形中绘制通过markline的coord构建多个点去绘制了三条线，
但是实际使用过程中发现缩放浏览器，datazoom缩放等操作，
都会导致线段位移到错误的位置，如果销毁实例再重新创建图形就可以恢复，
echarts的api里面没有找到方法可以规避这个问题，有其他解决办法吗？
### Version & Environment [版本及环境]
+ ECharts version [ECharts 版本]: 4.0.1
+ Browser version [浏览器类型和版本]: 67.0.3396.99
+ OS Version [操作系统类型和版本]:
### Expected behaviour [期望结果]
### ECharts option [ECharts配置项]
<!-- Copy and paste your 'echarts option' here. -->
<!-- [下方贴你的option，注意不要删掉下方 ```javascript 和 尾部的 ``` 字样。最好是我们能够直接运行的 option。如何得到能运行的 option 参见上方的 guidelines for contributing] -->
```javascript
option = {
"xAxis": [{
"type": "category",
"gridIndex": 0,
"_name": "CREATE_TIME_年",
"_$id": "-279189881",
"show": true,
"axisLine": {
"show": true,
"lineStyle": {
"type": "solid",
"color": "rgba(159, 157, 157, 1)",
"width": 1,
"opacity": 1
}
},
"splitLine": {
"show": false,
"lineStyle": {
"type": "solid",
"color": "rgba(159, 157, 157, 1)",
"width": 1,
"opacity": 1
}
},
"axisLabel": {
"show": true,
"color": "rgba(51, 51, 51, 1)",
"fontWeight": "normal",
"fontSize": 12,
"rotate": 0,
"__maxLength": 20
},
"axisPointer": {
"show": true,
"triggerTooltip": true
}
}, {
"type": "category",
"gridIndex": 0,
"_name": "CREATE_TIME_年",
"show": false,
"axisLine": {
"show": true,
"lineStyle": {
"type": "solid",
"color": "rgba(159, 157, 157, 1)",
"width": 1,
"opacity": 1
}
},
"splitLine": {
"show": false,
"lineStyle": {
"type": "solid",
"color": "rgba(159, 157, 157, 1)",
"width": 1,
"opacity": 1
}
},
"axisLabel": {
"show": true,
"color": "rgba(54,56,60,1)",
"fontWeight": "normal",
"fontSize": 12,
"rotate": 0,
"__maxLength": 20
},
"axisPointer": {
"show": false,
"triggerTooltip": true
}
}],
"yAxis": [{
"gridIndex": 0,
"show": true,
"axisLine": {
"show": true,
"lineStyle": {
"type": "solid",
"color": "rgba(159, 157, 157, 1)",
"width": 1,
"opacity": 1
}
},
"splitLine": {
"show": false,
"lineStyle": {
"type": "solid",
"color": "rgba(159, 157, 157, 1)",
"width": 1,
"opacity": 1
}
},
"axisLabel": {
"show": true,
"color": "rgba(51, 51, 51, 1)",
"fontWeight": "normal",
"fontSize": 12,
"rotate": 0,
"__maxLength": 20
}
}, {
"gridIndex": 0,
"show": false,
"axisLine": {
"show": true,
"lineStyle": {
"type": "solid",
"color": "rgba(159, 157, 157, 1)",
"width": 1,
"opacity": 1
}
},
"splitLine": {
"show": false,
"lineStyle": {
"type": "solid",
"color": "rgba(159, 157, 157, 1)",
"width": 1,
"opacity": 1
}
},
"axisLabel": {
"show": true,
"color": "rgba(54,56,60,1)",
"fontWeight": "normal",
"fontSize": "12",
"rotate": 0,
"__maxLength": 20
}
}],
"series": [{
"type": "bar",
"xAxisIndex": 0,
"yAxisIndex": 0,
"encode": {
"x": "CREATE_TIME_年",
"y": "SUB_TYPE"
},
"_$id": "-844073207",
"name": "SUB_TYPE",
"markLine": {
"data": [
[{
"id": "f789412e-98fe-0cb8-d64e-81b4a68dcc3b",
"componentType": "exp1-line",
"columnName": "SUB_TYPE",
"lineStyle": {
"color": "#808080",
"width": "1",
"type": "solid"
},
"symbol": "pin",
"coord": [0, 0]
}, {
"id": "f789412e-98fe-0cb8-d64e-81b4a68dcc3b",
"componentType": "exp1-line",
"columnName": "SUB_TYPE",
"lineStyle": {
"color": "#808080",
"width": "1",
"type": "solid"
},
"symbol": "pin",
"coord": [1, 1057139]
}],
[{
"id": "f789412e-98fe-0cb8-d64e-81b4a68dcc3b",
"componentType": "exp1-line",
"columnName": "SUB_TYPE",
"lineStyle": {
"color": "#808080",
"width": "1",
"type": "solid"
},
"symbol": "pin",
"coord": [1, 1057139]
}, {
"id": "f789412e-98fe-0cb8-d64e-81b4a68dcc3b",
"componentType": "exp1-line",
"columnName": "SUB_TYPE",
"lineStyle": {
"color": "#808080",
"width": "1",
"type": "solid"
},
"symbol": "pin",
"coord": [2, 1448633]
}],
[{
"id": "f789412e-98fe-0cb8-d64e-81b4a68dcc3b",
"componentType": "exp1-line",
"columnName": "SUB_TYPE",
"lineStyle": {
"color": "#808080",
"width": "1",
"type": "solid"
},
"symbol": "pin",
"coord": [2, 1448633]
}, {
"id": "f789412e-98fe-0cb8-d64e-81b4a68dcc3b",
"componentType": "exp1-line",
"columnName": "SUB_TYPE",
"lineStyle": {
"color": "#808080",
"width": "1",
"type": "solid"
},
"symbol": "pin",
"coord": [3, 1621481]
}],
[{
"id": "f789412e-98fe-0cb8-d64e-81b4a68dcc3b",
"componentType": "exp1-line",
"columnName": "SUB_TYPE",
"lineStyle": {
"color": "#808080",
"width": "1",
"type": "solid"
},
"symbol": "pin",
"coord": [3, 1621481]
}, {
"id": "f789412e-98fe-0cb8-d64e-81b4a68dcc3b",
"componentType": "exp1-line",
"columnName": "SUB_TYPE",
"lineStyle": {
"color": "#808080",
"width": "1",
"type": "solid"
},
"symbol": "pin",
"coord": [4, 921375]
}],
[{
"id": "7b290ec1-5e17-f1ac-018a-40e891897174",
"componentType": "exp2-line",
"columnName": "SUB_TYPE",
"lineStyle": {
"color": "#808080",
"width": "1",
"type": "solid"
},
"symbol": "pin",
"coord": [0, 0]
}, {
"id": "7b290ec1-5e17-f1ac-018a-40e891897174",
"componentType": "exp2-line",
"columnName": "SUB_TYPE",
"lineStyle": {
"color": "#808080",
"width": "1",
"type": "solid"
},
"symbol": "pin",
"coord": [1, 0]
}],
[{
"id": "7b290ec1-5e17-f1ac-018a-40e891897174",
"componentType": "exp2-line",
"columnName": "SUB_TYPE",
"lineStyle": {
"color": "#808080",
"width": "1",
"type": "solid"
},
"symbol": "pin",
"coord": [1, 0]
}, {
"id": "7b290ec1-5e17-f1ac-018a-40e891897174",
"componentType": "exp2-line",
"columnName": "SUB_TYPE",
"lineStyle": {
"color": "#808080",
"width": "1",
"type": "solid"
},
"symbol": "pin",
"coord": [2, 1057139]
}],
[{
"id": "7b290ec1-5e17-f1ac-018a-40e891897174",
"componentType": "exp2-line",
"columnName": "SUB_TYPE",
"lineStyle": {
"color": "#808080",
"width": "1",
"type": "solid"
},
"symbol": "pin",
"coord": [2, 1057139]
}, {
"id": "7b290ec1-5e17-f1ac-018a-40e891897174",
"componentType": "exp2-line",
"columnName": "SUB_TYPE",
"lineStyle": {
"color": "#808080",
"width": "1",
"type": "solid"
},
"symbol": "pin",
"coord": [3, 1252886]
}],
[{
"id": "7b290ec1-5e17-f1ac-018a-40e891897174",
"componentType": "exp2-line",
"columnName": "SUB_TYPE",
"lineStyle": {
"color": "#808080",
"width": "1",
"type": "solid"
},
"symbol": "pin",
"coord": [3, 1252886]
}, {
"id": "7b290ec1-5e17-f1ac-018a-40e891897174",
"componentType": "exp2-line",
"columnName": "SUB_TYPE",
"lineStyle": {
"color": "#808080",
"width": "1",
"type": "solid"
},
"symbol": "pin",
"coord": [4, 1437183.5]
}],
[{
"id": "7b290ec1-5e17-f1ac-018a-40e891897174",
"componentType": "exp2-line",
"columnName": "SUB_TYPE",
"lineStyle": {
"color": "#808080",
"width": "1",
"type": "solid"
},
"symbol": "pin",
"coord": [4, 1437183.5]
}, {
"id": "7b290ec1-5e17-f1ac-018a-40e891897174",
"componentType": "exp2-line",
"columnName": "SUB_TYPE",
"lineStyle": {
"color": "#808080",
"width": "1",
"type": "solid"
},
"symbol": "pin",
"coord": [5, 1179279.25]
}],
[{
"id": "f6cd7889-7a77-f152-8306-67a6dd715039",
"componentType": "exp3-line",
"columnName": "SUB_TYPE",
"lineStyle": {
"color": "#808080",
"width": "1",
"type": "solid"
},
"symbol": "pin",
"coord": [0, 0]
}, {
"id": "f6cd7889-7a77-f152-8306-67a6dd715039",
"componentType": "exp3-line",
"columnName": "SUB_TYPE",
"lineStyle": {
"color": "#808080",
"width": "1",
"type": "solid"
},
"symbol": "pin",
"coord": [1, 0]
}],
[{
"id": "f6cd7889-7a77-f152-8306-67a6dd715039",
"componentType": "exp3-line",
"columnName": "SUB_TYPE",
"lineStyle": {
"color": "#808080",
"width": "1",
"type": "solid"
},
"symbol": "pin",
"coord": [1, 0]
}, {
"id": "f6cd7889-7a77-f152-8306-67a6dd715039",
"componentType": "exp3-line",
"columnName": "SUB_TYPE",
"lineStyle": {
"color": "#808080",
"width": "1",
"type": "solid"
},
"symbol": "pin",
"coord": [2, 0]
}],
[{
"id": "f6cd7889-7a77-f152-8306-67a6dd715039",
"componentType": "exp3-line",
"columnName": "SUB_TYPE",
"lineStyle": {
"color": "#808080",
"width": "1",
"type": "solid"
},
"symbol": "pin",
"coord": [2, 0]
}, {
"id": "f6cd7889-7a77-f152-8306-67a6dd715039",
"componentType": "exp3-line",
"columnName": "SUB_TYPE",
"lineStyle": {
"color": "#808080",
"width": "1",
"type": "solid"
},
"symbol": "pin",
"coord": [3, 1057139]
}],
[{
"id": "f6cd7889-7a77-f152-8306-67a6dd715039",
"componentType": "exp3-line",
"columnName": "SUB_TYPE",
"lineStyle": {
"color": "#808080",
"width": "1",
"type": "solid"
},
"symbol": "pin",
"coord": [3, 1057139]
}, {
"id": "f6cd7889-7a77-f152-8306-67a6dd715039",
"componentType": "exp3-line",
"columnName": "SUB_TYPE",
"lineStyle": {
"color": "#808080",
"width": "1",
"type": "solid"
},
"symbol": "pin",
"coord": [4, 1155012.5]
}],
[{
"id": "f6cd7889-7a77-f152-8306-67a6dd715039",
"componentType": "exp3-line",
"columnName": "SUB_TYPE",
"lineStyle": {
"color": "#808080",
"width": "1",
"type": "solid"
},
"symbol": "pin",
"coord": [4, 1155012.5]
}, {
"id": "f6cd7889-7a77-f152-8306-67a6dd715039",
"componentType": "exp3-line",
"columnName": "SUB_TYPE",
"lineStyle": {
"color": "#808080",
"width": "1",
"type": "solid"
},
"symbol": "pin",
"coord": [5, 1296098]
}],
[{
"id": "f6cd7889-7a77-f152-8306-67a6dd715039",
"componentType": "exp3-line",
"columnName": "SUB_TYPE",
"lineStyle": {
"color": "#808080",
"width": "1",
"type": "solid"
},
"symbol": "pin",
"coord": [5, 1296098]
}, {
"id": "f6cd7889-7a77-f152-8306-67a6dd715039",
"componentType": "exp3-line",
"columnName": "SUB_TYPE",
"lineStyle": {
"color": "#808080",
"width": "1",
"type": "solid"
},
"symbol": "pin",
"coord": [6, 1237688.625]
}]
],
"symbolSize": 0,
"precision": 5,
"label": {
"position": "middle",
"color": "#808080",
"fontSize": 12
}
},
"tooltip": {}
}],
"axisPointer": {
"show": false,
"triggerTooltip": false
},
"tooltip": {
"show": true,
"trigger": "axis"
},
"color": ["#44bd89", "#4db7c8", "#eaad56", "#9fbd74", "#82cda4", "#ff942b", "#17988d", "#4e6783", "#bababa", "#bed38b", "#3eadb5", "#f75700", "#8f5989"],
"dataset": {
"source": [
["CREATE_TIME_年", "SUB_TYPE"],
["2018", 1057139],
["2019", 1840127],
["2020", 1794329],
["2021", 221269],
["analysis1", 1155012.5],
["analysis2", 1296098],
["analysis3", 1237688.625]
],
"dimensions": ["CREATE_TIME_年", "SUB_TYPE"]
},
"grid": [{
"top": "5%",
"right": "20%",
"left": "10%",
"bottom": "14%",
"width": "75%",
"height": "80%",
"show": false,
"backgroundColor": "rgba(255, 255, 255, 1)",
"borderWidth": 1,
"borderColor": "rgba(159, 157, 157, 1)",
"tooltip": {}
}],
"animation": true,
"textStyle": {
"fontFamily": "sans-serif"
},
"legend": {
"show": true,
"disabled": true,
"orient": "vertical",
"top": "5%",
"right": "5%",
"type": "scroll",
"position": "right",
"pageButtonItemGap": 10,
"itemWidth": 18,
"itemHeight": 12,
"textStyle": {
"fontSize": 12,
"fontWeight": "normal"
},
"tooltip": {
"show": true
}
}
}
```
### Other comments [其他信息]
<!-- For example: Screenshot or Online demo -->
<!-- [例如，截图或线上实例 (JSFiddle/JSBin/Codepen)] -->
----------------------------------------------------------------
This is an automated message from the Apache Git Service.
To respond to the message, please log on 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: dev-unsubscribe@echarts.apache.org
For additional commands, e-mail: dev-help@echarts.apache.org