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/05/15 07:58:44 UTC
[GitHub] [incubator-echarts] Gacent opened a new issue #12640: 窗口大小变化（或者ctrl 滚轮），地图和散点图会发生错位
Gacent opened a new issue #12640:
URL: https://github.com/apache/incubator-echarts/issues/12640
### Version
4.6.0
### Steps to reproduce
例如这个示例：https://gallery.echartsjs.com/editor.html?c=xCDj68xRo1
示例窗口发生变化之后不会出错。
但是复制了代码到本地使用时候
### What is expected?
窗口大小发生变化之后（或者ctrl 滚轮），散点图和地图应该是紧密相连的
### What is actually happening?
窗口大小发生变化之后（或者ctrl 滚轮），地图和散点图会发生错位
<!-- 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] Gacent edited a comment on issue #12640: 窗口大小变化（或者ctrl 滚轮），地图和散点图会发生错位
Posted by GitBox <gi...@apache.org>.
Gacent edited a comment on issue #12640:
URL: https://github.com/apache/incubator-echarts/issues/12640#issuecomment-629107579
setOptions() {
var series = [];
[
['大庆', this.chinaDatas]
].forEach((item, i) => {
console.log(item)
series.push({
type: 'lines',
zlevel: 2,
effect: {
show: true,
period: 4, // 箭头指向速度，值越小速度越快
trailLength: 0.02, // 特效尾迹长度[0,1]值越大，尾迹越长重
symbol: 'arrow', // 箭头图标
symbolSize: 5 // 图标大小
},
lineStyle: {
normal: {
width: 1, // 尾迹线条宽度
opacity: 1, // 尾迹线条透明度
curveness: 0.3 // 尾迹线条曲直度
}
},
data: this.convertData(item[1])
}, {
type: 'effectScatter',
coordinateSystem: 'geo',
zlevel: 2,
rippleEffect: { // 涟漪特效
period: 4, // 动画时间，值越小速度越快
brushType: 'stroke', // 波纹绘制方式 stroke, fill
scale: 4 // 波纹圆环最大限制，值越大波纹越大
},
label: {
normal: {
show: true,
position: 'right', // 显示位置
offset: [5, 0], // 偏移设置
formatter: function(params) { // 圆环显示文字
return params.data.name
},
fontSize: 13
},
emphasis: {
show: true
}
},
symbol: 'circle',
symbolSize: function(val) {
return 5 + val[2] * 5 // 圆环大小
},
itemStyle: {
normal: {
show: false,
color: '#f00'
}
},
data: item[1].map((dataItem) => {
return {
name: dataItem[0].name,
value: this.chinaGeoCoordMap[dataItem[0].name].concat([dataItem[0].value])
}
})
},
// 被攻击点
{
type: 'scatter',
coordinateSystem: 'geo',
zlevel: 2,
rippleEffect: {
period: 4,
brushType: 'stroke',
scale: 4
},
label: {
normal: {
show: true,
position: 'right',
// offset:[5, 0],
color: '#0f0',
formatter: '{b}',
textStyle: {
color: '#0f0'
}
},
emphasis: {
show: true,
color: '#f60'
}
},
symbol: 'pin',
symbolSize: 50,
data: [{
name: item[0],
value: this.chinaGeoCoordMap[item[0]].concat([10])
}]
}
)
})
this.option = {
tooltip: {
trigger: 'item',
backgroundColor: 'rgba(166, 200, 76, 0.82)',
borderColor: '#FFFFCC',
showDelay: 0,
hideDelay: 0,
enterable: true,
transitionDuration: 0,
extraCssText: 'z-index:100',
formatter: function(params, ticket, callback) {
// 根据业务自己拓展要显示的内容
var res = ''
var name = params.name
var value = params.value[params.seriesIndex + 1]
res = "<span style='color:#fff;'>" + name + '</span><br/>数据：' + value
return res
}
},
backgroundColor: '#013954',
visualMap: { // 图例值控制
min: 0,
max: 1,
calculable: true,
show: true,
color: ['#f44336', '#fc9700', '#ffde00', '#ffde00', '#00eaff'],
textStyle: {
color: '#fff'
}
},
geo: {
map: 'china',
zoom: 1.2,
label: {
emphasis: {
show: false
}
},
roam: true, // 是否允许缩放
layoutCenter: ['50%', '50%'],
layoutSize: 500,
itemStyle: {
normal: {
color: 'rgba(51, 69, 89, .5)', // 地图背景色
borderColor: '#516a89', // 省市边界线00fcff 516a89
borderWidth: 1
},
emphasis: {
color: 'rgba(37, 43, 61, .5)' // 悬浮背景
}
}
},
series: series
}
this.chart = echarts.init(document.getElementById(this.id))
this.chart.setOption(this.option)
}
----------------------------------------------------------------
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] aitexiaoy commented on issue #12640: 窗口大小变化（或者ctrl 滚轮），地图和散点图会发生错位
Posted by GitBox <gi...@apache.org>.
aitexiaoy commented on issue #12640:
URL: https://github.com/apache/incubator-echarts/issues/12640#issuecomment-664192253
我升级到4.8，问题没了
----------------------------------------------------------------
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] Gacent commented on issue #12640: 窗口大小变化（或者ctrl 滚轮），地图和散点图会发生错位
Posted by GitBox <gi...@apache.org>.
Gacent commented on issue #12640:
URL: https://github.com/apache/incubator-echarts/issues/12640#issuecomment-629115579
已经解决了，原来是echarts版本问题，我是4.6的，刚装了4.7之后就没问题了，谢谢大佬们
----------------------------------------------------------------
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] Gacent commented on issue #12640: 窗口大小变化（或者ctrl 滚轮），地图和散点图会发生错位
Posted by GitBox <gi...@apache.org>.
Gacent commented on issue #12640:
URL: https://github.com/apache/incubator-echarts/issues/12640#issuecomment-629099551
已经手动调了resize()方法，无效
----------------------------------------------------------------
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] Gacent edited a comment on issue #12640: 窗口大小变化（或者ctrl 滚轮），地图和散点图会发生错位
Posted by GitBox <gi...@apache.org>.
Gacent edited a comment on issue #12640:
URL: https://github.com/apache/incubator-echarts/issues/12640#issuecomment-629107579
setOptions() {
var series = [];
[
['大庆', this.chinaDatas]
].forEach((item, i) => {
console.log(item)
series.push({
type: 'lines',
zlevel: 2,
effect: {
show: true,
period: 4, // 箭头指向速度，值越小速度越快
trailLength: 0.02, // 特效尾迹长度[0,1]值越大，尾迹越长重
symbol: 'arrow', // 箭头图标
symbolSize: 5 // 图标大小
},
lineStyle: {
normal: {
width: 1, // 尾迹线条宽度
opacity: 1, // 尾迹线条透明度
curveness: 0.3 // 尾迹线条曲直度
}
},
data: this.convertData(item[1])
}, {
type: 'effectScatter',
coordinateSystem: 'geo',
zlevel: 2,
rippleEffect: { // 涟漪特效
period: 4, // 动画时间，值越小速度越快
brushType: 'stroke', // 波纹绘制方式 stroke, fill
scale: 4 // 波纹圆环最大限制，值越大波纹越大
},
label: {
normal: {
show: true,
position: 'right', // 显示位置
offset: [5, 0], // 偏移设置
formatter: function(params) { // 圆环显示文字
return params.data.name
},
fontSize: 13
},
emphasis: {
show: true
}
},
symbol: 'circle',
symbolSize: function(val) {
return 5 + val[2] * 5 // 圆环大小
},
itemStyle: {
normal: {
show: false,
color: '#f00'
}
},
data: item[1].map((dataItem) => {
return {
name: dataItem[0].name,
value: this.chinaGeoCoordMap[dataItem[0].name].concat([dataItem[0].value])
}
})
},
// 被攻击点
{
type: 'scatter',
coordinateSystem: 'geo',
zlevel: 2,
rippleEffect: {
period: 4,
brushType: 'stroke',
scale: 4
},
label: {
normal: {
show: true,
position: 'right',
// offset:[5, 0],
color: '#0f0',
formatter: '{b}',
textStyle: {
color: '#0f0'
}
},
emphasis: {
show: true,
color: '#f60'
}
},
symbol: 'pin',
symbolSize: 50,
data: [{
name: item[0],
value: this.chinaGeoCoordMap[item[0]].concat([10])
}]
}
)
})
this.option = {
tooltip: {
trigger: 'item',
backgroundColor: 'rgba(166, 200, 76, 0.82)',
borderColor: '#FFFFCC',
showDelay: 0,
hideDelay: 0,
enterable: true,
transitionDuration: 0,
extraCssText: 'z-index:100',
formatter: function(params, ticket, callback) {
// 根据业务自己拓展要显示的内容
var res = ''
var name = params.name
var value = params.value[params.seriesIndex + 1]
res = "<span style='color:#fff;'>" + name + '</span><br/>数据：' + value
return res
}
},
backgroundColor: '#013954',
visualMap: { // 图例值控制
min: 0,
max: 1,
calculable: true,
show: true,
color: ['#f44336', '#fc9700', '#ffde00', '#ffde00', '#00eaff'],
textStyle: {
color: '#fff'
}
},
geo: {
map: 'china',
zoom: 1.2,
label: {
emphasis: {
show: false
}
},
roam: true, // 是否允许缩放
layoutCenter: ['50%', '50%'],
layoutSize: 500,
itemStyle: {
normal: {
color: 'rgba(51, 69, 89, .5)', // 地图背景色
borderColor: '#516a89', // 省市边界线00fcff 516a89
borderWidth: 1
},
emphasis: {
color: 'rgba(37, 43, 61, .5)' // 悬浮背景
}
}
},
series: series
}
this.chart = echarts.init(document.getElementById(this.id))
this.chart.setOption(this.option)
}
----------------------------------------------------------------
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] Gacent edited a comment on issue #12640: 窗口大小变化（或者ctrl 滚轮），地图和散点图会发生错位
Posted by GitBox <gi...@apache.org>.
Gacent edited a comment on issue #12640:
URL: https://github.com/apache/incubator-echarts/issues/12640#issuecomment-629107579
setOptions() {
var series = [];
[
['大庆', this.chinaDatas]
].forEach((item, i) => {
console.log(item)
series.push({
type: 'lines',
zlevel: 2,
effect: {
show: true,
period: 4, // 箭头指向速度，值越小速度越快
trailLength: 0.02, // 特效尾迹长度[0,1]值越大，尾迹越长重
symbol: 'arrow', // 箭头图标
symbolSize: 5 // 图标大小
},
lineStyle: {
normal: {
width: 1, // 尾迹线条宽度
opacity: 1, // 尾迹线条透明度
curveness: 0.3 // 尾迹线条曲直度
}
},
data: this.convertData(item[1])
}, {
type: 'effectScatter',
coordinateSystem: 'geo',
zlevel: 2,
rippleEffect: { // 涟漪特效
period: 4, // 动画时间，值越小速度越快
brushType: 'stroke', // 波纹绘制方式 stroke, fill
scale: 4 // 波纹圆环最大限制，值越大波纹越大
},
label: {
normal: {
show: true,
position: 'right', // 显示位置
offset: [5, 0], // 偏移设置
formatter: function(params) { // 圆环显示文字
return params.data.name
},
fontSize: 13
},
emphasis: {
show: true
}
},
symbol: 'circle',
symbolSize: function(val) {
return 5 + val[2] * 5 // 圆环大小
},
itemStyle: {
normal: {
show: false,
color: '#f00'
}
},
data: item[1].map((dataItem) => {
return {
name: dataItem[0].name,
value: this.chinaGeoCoordMap[dataItem[0].name].concat([dataItem[0].value])
}
})
},
// 被攻击点
{
type: 'scatter',
coordinateSystem: 'geo',
zlevel: 2,
rippleEffect: {
period: 4,
brushType: 'stroke',
scale: 4
},
label: {
normal: {
show: true,
position: 'right',
// offset:[5, 0],
color: '#0f0',
formatter: '{b}',
textStyle: {
color: '#0f0'
}
},
emphasis: {
show: true,
color: '#f60'
}
},
symbol: 'pin',
symbolSize: 50,
data: [{
name: item[0],
value: this.chinaGeoCoordMap[item[0]].concat([10])
}]
}
)
})
this.option = {
tooltip: {
trigger: 'item',
backgroundColor: 'rgba(166, 200, 76, 0.82)',
borderColor: '#FFFFCC',
showDelay: 0,
hideDelay: 0,
enterable: true,
transitionDuration: 0,
extraCssText: 'z-index:100',
formatter: function(params, ticket, callback) {
// 根据业务自己拓展要显示的内容
var res = ''
var name = params.name
var value = params.value[params.seriesIndex + 1]
res = "<span style='color:#fff;'>" + name + '</span><br/>数据：' + value
return res
}
},
backgroundColor: '#013954',
visualMap: { // 图例值控制
min: 0,
max: 1,
calculable: true,
show: true,
color: ['#f44336', '#fc9700', '#ffde00', '#ffde00', '#00eaff'],
textStyle: {
color: '#fff'
}
},
geo: {
map: 'china',
zoom: 1.2,
label: {
emphasis: {
show: false
}
},
roam: true, // 是否允许缩放
layoutCenter: ['50%', '50%'],
layoutSize: 500,
itemStyle: {
normal: {
color: 'rgba(51, 69, 89, .5)', // 地图背景色
borderColor: '#516a89', // 省市边界线00fcff 516a89
borderWidth: 1
},
emphasis: {
color: 'rgba(37, 43, 61, .5)' // 悬浮背景
}
}
},
series: series
}
this.chart = echarts.init(document.getElementById(this.id))
this.chart.setOption(this.option)
}
----------------------------------------------------------------
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] Gacent edited a comment on issue #12640: 窗口大小变化（或者ctrl 滚轮），地图和散点图会发生错位
Posted by GitBox <gi...@apache.org>.
Gacent edited a comment on issue #12640:
URL: https://github.com/apache/incubator-echarts/issues/12640#issuecomment-629107579
在vue应用中使用
setOptions() {
var series = [];
[
['大庆', this.chinaDatas]
].forEach((item, i) => {
console.log(item)
series.push({
type: 'lines',
zlevel: 2,
effect: {
show: true,
period: 4, // 箭头指向速度，值越小速度越快
trailLength: 0.02, // 特效尾迹长度[0,1]值越大，尾迹越长重
symbol: 'arrow', // 箭头图标
symbolSize: 5 // 图标大小
},
lineStyle: {
normal: {
width: 1, // 尾迹线条宽度
opacity: 1, // 尾迹线条透明度
curveness: 0.3 // 尾迹线条曲直度
}
},
data: this.convertData(item[1])
}, {
type: 'effectScatter',
coordinateSystem: 'geo',
zlevel: 2,
rippleEffect: { // 涟漪特效
period: 4, // 动画时间，值越小速度越快
brushType: 'stroke', // 波纹绘制方式 stroke, fill
scale: 4 // 波纹圆环最大限制，值越大波纹越大
},
label: {
normal: {
show: true,
position: 'right', // 显示位置
offset: [5, 0], // 偏移设置
formatter: function(params) { // 圆环显示文字
return params.data.name
},
fontSize: 13
},
emphasis: {
show: true
}
},
symbol: 'circle',
symbolSize: function(val) {
return 5 + val[2] * 5 // 圆环大小
},
itemStyle: {
normal: {
show: false,
color: '#f00'
}
},
data: item[1].map((dataItem) => {
return {
name: dataItem[0].name,
value: this.chinaGeoCoordMap[dataItem[0].name].concat([dataItem[0].value])
}
})
},
// 被攻击点
{
type: 'scatter',
coordinateSystem: 'geo',
zlevel: 2,
rippleEffect: {
period: 4,
brushType: 'stroke',
scale: 4
},
label: {
normal: {
show: true,
position: 'right',
// offset:[5, 0],
color: '#0f0',
formatter: '{b}',
textStyle: {
color: '#0f0'
}
},
emphasis: {
show: true,
color: '#f60'
}
},
symbol: 'pin',
symbolSize: 50,
data: [{
name: item[0],
value: this.chinaGeoCoordMap[item[0]].concat([10])
}]
}
)
})
this.option = {
tooltip: {
trigger: 'item',
backgroundColor: 'rgba(166, 200, 76, 0.82)',
borderColor: '#FFFFCC',
showDelay: 0,
hideDelay: 0,
enterable: true,
transitionDuration: 0,
extraCssText: 'z-index:100',
formatter: function(params, ticket, callback) {
// 根据业务自己拓展要显示的内容
var res = ''
var name = params.name
var value = params.value[params.seriesIndex + 1]
res = "<span style='color:#fff;'>" + name + '</span><br/>数据：' + value
return res
}
},
backgroundColor: '#013954',
visualMap: { // 图例值控制
min: 0,
max: 1,
calculable: true,
show: true,
color: ['#f44336', '#fc9700', '#ffde00', '#ffde00', '#00eaff'],
textStyle: {
color: '#fff'
}
},
geo: {
map: 'china',
zoom: 1.2,
label: {
emphasis: {
show: false
}
},
roam: true, // 是否允许缩放
layoutCenter: ['50%', '50%'],
layoutSize: 500,
itemStyle: {
normal: {
color: 'rgba(51, 69, 89, .5)', // 地图背景色
borderColor: '#516a89', // 省市边界线00fcff 516a89
borderWidth: 1
},
emphasis: {
color: 'rgba(37, 43, 61, .5)' // 悬浮背景
}
}
},
series: series
}
this.chart = echarts.init(document.getElementById(this.id))
this.chart.setOption(this.option)
}
----------------------------------------------------------------
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] Gacent edited a comment on issue #12640: 窗口大小变化（或者ctrl 滚轮），地图和散点图会发生错位
Posted by GitBox <gi...@apache.org>.
Gacent edited a comment on issue #12640:
URL: https://github.com/apache/incubator-echarts/issues/12640#issuecomment-629107579
setOptions() {
var series = [];
[
['大庆', this.chinaDatas]
].forEach((item, i) => {
console.log(item)
series.push({
type: 'lines',
zlevel: 2,
effect: {
show: true,
period: 4, // 箭头指向速度，值越小速度越快
trailLength: 0.02, // 特效尾迹长度[0,1]值越大，尾迹越长重
symbol: 'arrow', // 箭头图标
symbolSize: 5 // 图标大小
},
lineStyle: {
normal: {
width: 1, // 尾迹线条宽度
opacity: 1, // 尾迹线条透明度
curveness: 0.3 // 尾迹线条曲直度
}
},
data: this.convertData(item[1])
}, {
type: 'effectScatter',
coordinateSystem: 'geo',
zlevel: 2,
rippleEffect: { // 涟漪特效
period: 4, // 动画时间，值越小速度越快
brushType: 'stroke', // 波纹绘制方式 stroke, fill
scale: 4 // 波纹圆环最大限制，值越大波纹越大
},
label: {
normal: {
show: true,
position: 'right', // 显示位置
offset: [5, 0], // 偏移设置
formatter: function(params) { // 圆环显示文字
return params.data.name
},
fontSize: 13
},
emphasis: {
show: true
}
},
symbol: 'circle',
symbolSize: function(val) {
return 5 + val[2] * 5 // 圆环大小
},
itemStyle: {
normal: {
show: false,
color: '#f00'
}
},
data: item[1].map((dataItem) => {
return {
name: dataItem[0].name,
value: this.chinaGeoCoordMap[dataItem[0].name].concat([dataItem[0].value])
}
})
},
// 被攻击点
{
type: 'scatter',
coordinateSystem: 'geo',
zlevel: 2,
rippleEffect: {
period: 4,
brushType: 'stroke',
scale: 4
},
label: {
normal: {
show: true,
position: 'right',
// offset:[5, 0],
color: '#0f0',
formatter: '{b}',
textStyle: {
color: '#0f0'
}
},
emphasis: {
show: true,
color: '#f60'
}
},
symbol: 'pin',
symbolSize: 50,
data: [{
name: item[0],
value: this.chinaGeoCoordMap[item[0]].concat([10])
}]
}
)
})
this.option = {
tooltip: {
trigger: 'item',
backgroundColor: 'rgba(166, 200, 76, 0.82)',
borderColor: '#FFFFCC',
showDelay: 0,
hideDelay: 0,
enterable: true,
transitionDuration: 0,
extraCssText: 'z-index:100',
formatter: function(params, ticket, callback) {
// 根据业务自己拓展要显示的内容
var res = ''
var name = params.name
var value = params.value[params.seriesIndex + 1]
res = "<span style='color:#fff;'>" + name + '</span><br/>数据：' + value
return res
}
},
backgroundColor: '#013954',
visualMap: { // 图例值控制
min: 0,
max: 1,
calculable: true,
show: true,
color: ['#f44336', '#fc9700', '#ffde00', '#ffde00', '#00eaff'],
textStyle: {
color: '#fff'
}
},
geo: {
map: 'china',
zoom: 1.2,
label: {
emphasis: {
show: false
}
},
roam: true, // 是否允许缩放
layoutCenter: ['50%', '50%'],
layoutSize: 500,
itemStyle: {
normal: {
color: 'rgba(51, 69, 89, .5)', // 地图背景色
borderColor: '#516a89', // 省市边界线00fcff 516a89
borderWidth: 1
},
emphasis: {
color: 'rgba(37, 43, 61, .5)' // 悬浮背景
}
}
},
series: series
}
this.chart = echarts.init(document.getElementById(this.id))
this.chart.setOption(this.option)
}
----------------------------------------------------------------
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] Gacent commented on issue #12640: 窗口大小变化（或者ctrl 滚轮），地图和散点图会发生错位
Posted by GitBox <gi...@apache.org>.
Gacent commented on issue #12640:
URL: https://github.com/apache/incubator-echarts/issues/12640#issuecomment-629107579
setOptions() {
var series = [];
[
['大庆', this.chinaDatas]
].forEach((item, i) => {
console.log(item)
series.push({
type: 'lines',
zlevel: 2,
effect: {
show: true,
period: 4, // 箭头指向速度，值越小速度越快
trailLength: 0.02, // 特效尾迹长度[0,1]值越大，尾迹越长重
symbol: 'arrow', // 箭头图标
symbolSize: 5 // 图标大小
},
lineStyle: {
normal: {
width: 1, // 尾迹线条宽度
opacity: 1, // 尾迹线条透明度
curveness: 0.3 // 尾迹线条曲直度
}
},
data: this.convertData(item[1])
}, {
type: 'effectScatter',
coordinateSystem: 'geo',
zlevel: 2,
rippleEffect: { // 涟漪特效
period: 4, // 动画时间，值越小速度越快
brushType: 'stroke', // 波纹绘制方式 stroke, fill
scale: 4 // 波纹圆环最大限制，值越大波纹越大
},
label: {
normal: {
show: true,
position: 'right', // 显示位置
offset: [5, 0], // 偏移设置
formatter: function(params) { // 圆环显示文字
return params.data.name
},
fontSize: 13
},
emphasis: {
show: true
}
},
symbol: 'circle',
symbolSize: function(val) {
return 5 + val[2] * 5 // 圆环大小
},
itemStyle: {
normal: {
show: false,
color: '#f00'
}
},
data: item[1].map((dataItem) => {
return {
name: dataItem[0].name,
value: this.chinaGeoCoordMap[dataItem[0].name].concat([dataItem[0].value])
}
})
},
// 被攻击点
{
type: 'scatter',
coordinateSystem: 'geo',
zlevel: 2,
rippleEffect: {
period: 4,
brushType: 'stroke',
scale: 4
},
label: {
normal: {
show: true,
position: 'right',
// offset:[5, 0],
color: '#0f0',
formatter: '{b}',
textStyle: {
color: '#0f0'
}
},
emphasis: {
show: true,
color: '#f60'
}
},
symbol: 'pin',
symbolSize: 50,
data: [{
name: item[0],
value: this.chinaGeoCoordMap[item[0]].concat([10])
}]
}
)
})
this.option = {
tooltip: {
trigger: 'item',
backgroundColor: 'rgba(166, 200, 76, 0.82)',
borderColor: '#FFFFCC',
showDelay: 0,
hideDelay: 0,
enterable: true,
transitionDuration: 0,
extraCssText: 'z-index:100',
formatter: function(params, ticket, callback) {
// 根据业务自己拓展要显示的内容
var res = ''
var name = params.name
var value = params.value[params.seriesIndex + 1]
res = "<span style='color:#fff;'>" + name + '</span><br/>数据：' + value
return res
}
},
backgroundColor: '#013954',
visualMap: { // 图例值控制
min: 0,
max: 1,
calculable: true,
show: true,
color: ['#f44336', '#fc9700', '#ffde00', '#ffde00', '#00eaff'],
textStyle: {
color: '#fff'
}
},
geo: {
map: 'china',
zoom: 1.2,
label: {
emphasis: {
show: false
}
},
roam: true, // 是否允许缩放
layoutCenter: ['50%', '50%'],
layoutSize: 500,
itemStyle: {
normal: {
color: 'rgba(51, 69, 89, .5)', // 地图背景色
borderColor: '#516a89', // 省市边界线00fcff 516a89
borderWidth: 1
},
emphasis: {
color: 'rgba(37, 43, 61, .5)' // 悬浮背景
}
}
},
series: series
}
this.chart = echarts.init(document.getElementById(this.id))
this.chart.setOption(this.option)
}
----------------------------------------------------------------
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] Gacent closed issue #12640: 窗口大小变化（或者ctrl 滚轮），地图和散点图会发生错位
Posted by GitBox <gi...@apache.org>.
Gacent closed issue #12640:
URL: https://github.com/apache/incubator-echarts/issues/12640
----------------------------------------------------------------
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] Gacent edited a comment on issue #12640: 窗口大小变化（或者ctrl 滚轮），地图和散点图会发生错位
Posted by GitBox <gi...@apache.org>.
Gacent edited a comment on issue #12640:
URL: https://github.com/apache/incubator-echarts/issues/12640#issuecomment-629107579
`
setOptions() {
var series = [];
[
['大庆', this.chinaDatas]
].forEach((item, i) => {
console.log(item)
series.push({
type: 'lines',
zlevel: 2,
effect: {
show: true,
period: 4, // 箭头指向速度，值越小速度越快
trailLength: 0.02, // 特效尾迹长度[0,1]值越大，尾迹越长重
symbol: 'arrow', // 箭头图标
symbolSize: 5 // 图标大小
},
lineStyle: {
normal: {
width: 1, // 尾迹线条宽度
opacity: 1, // 尾迹线条透明度
curveness: 0.3 // 尾迹线条曲直度
}
},
data: this.convertData(item[1])
}, {
type: 'effectScatter',
coordinateSystem: 'geo',
zlevel: 2,
rippleEffect: { // 涟漪特效
period: 4, // 动画时间，值越小速度越快
brushType: 'stroke', // 波纹绘制方式 stroke, fill
scale: 4 // 波纹圆环最大限制，值越大波纹越大
},
label: {
normal: {
show: true,
position: 'right', // 显示位置
offset: [5, 0], // 偏移设置
formatter: function(params) { // 圆环显示文字
return params.data.name
},
fontSize: 13
},
emphasis: {
show: true
}
},
symbol: 'circle',
symbolSize: function(val) {
return 5 + val[2] * 5 // 圆环大小
},
itemStyle: {
normal: {
show: false,
color: '#f00'
}
},
data: item[1].map((dataItem) => {
return {
name: dataItem[0].name,
value: this.chinaGeoCoordMap[dataItem[0].name].concat([dataItem[0].value])
}
})
},
// 被攻击点
{
type: 'scatter',
coordinateSystem: 'geo',
zlevel: 2,
rippleEffect: {
period: 4,
brushType: 'stroke',
scale: 4
},
label: {
normal: {
show: true,
position: 'right',
// offset:[5, 0],
color: '#0f0',
formatter: '{b}',
textStyle: {
color: '#0f0'
}
},
emphasis: {
show: true,
color: '#f60'
}
},
symbol: 'pin',
symbolSize: 50,
data: [{
name: item[0],
value: this.chinaGeoCoordMap[item[0]].concat([10])
}]
}
)
})
this.option = {
tooltip: {
trigger: 'item',
backgroundColor: 'rgba(166, 200, 76, 0.82)',
borderColor: '#FFFFCC',
showDelay: 0,
hideDelay: 0,
enterable: true,
transitionDuration: 0,
extraCssText: 'z-index:100',
formatter: function(params, ticket, callback) {
// 根据业务自己拓展要显示的内容
var res = ''
var name = params.name
var value = params.value[params.seriesIndex + 1]
res = "<span style='color:#fff;'>" + name + '</span><br/>数据：' + value
return res
}
},
backgroundColor: '#013954',
visualMap: { // 图例值控制
min: 0,
max: 1,
calculable: true,
show: true,
color: ['#f44336', '#fc9700', '#ffde00', '#ffde00', '#00eaff'],
textStyle: {
color: '#fff'
}
},
geo: {
map: 'china',
zoom: 1.2,
label: {
emphasis: {
show: false
}
},
roam: true, // 是否允许缩放
layoutCenter: ['50%', '50%'],
layoutSize: 500,
itemStyle: {
normal: {
color: 'rgba(51, 69, 89, .5)', // 地图背景色
borderColor: '#516a89', // 省市边界线00fcff 516a89
borderWidth: 1
},
emphasis: {
color: 'rgba(37, 43, 61, .5)' // 悬浮背景
}
}
},
series: series
}
this.chart = echarts.init(document.getElementById(this.id))
this.chart.setOption(this.option)
}
`
----------------------------------------------------------------
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] Gacent edited a comment on issue #12640: 窗口大小变化（或者ctrl 滚轮），地图和散点图会发生错位
Posted by GitBox <gi...@apache.org>.
Gacent edited a comment on issue #12640:
URL: https://github.com/apache/incubator-echarts/issues/12640#issuecomment-629107579
`setOptions() {
var series = [];
[
['大庆', this.chinaDatas]
].forEach((item, i) => {
console.log(item)
series.push({
type: 'lines',
zlevel: 2,
effect: {
show: true,
period: 4, // 箭头指向速度，值越小速度越快
trailLength: 0.02, // 特效尾迹长度[0,1]值越大，尾迹越长重
symbol: 'arrow', // 箭头图标
symbolSize: 5 // 图标大小
},
lineStyle: {
normal: {
width: 1, // 尾迹线条宽度
opacity: 1, // 尾迹线条透明度
curveness: 0.3 // 尾迹线条曲直度
}
},
data: this.convertData(item[1])
}, {
type: 'effectScatter',
coordinateSystem: 'geo',
zlevel: 2,
rippleEffect: { // 涟漪特效
period: 4, // 动画时间，值越小速度越快
brushType: 'stroke', // 波纹绘制方式 stroke, fill
scale: 4 // 波纹圆环最大限制，值越大波纹越大
},
label: {
normal: {
show: true,
position: 'right', // 显示位置
offset: [5, 0], // 偏移设置
formatter: function(params) { // 圆环显示文字
return params.data.name
},
fontSize: 13
},
emphasis: {
show: true
}
},
symbol: 'circle',
symbolSize: function(val) {
return 5 + val[2] * 5 // 圆环大小
},
itemStyle: {
normal: {
show: false,
color: '#f00'
}
},
data: item[1].map((dataItem) => {
return {
name: dataItem[0].name,
value: this.chinaGeoCoordMap[dataItem[0].name].concat([dataItem[0].value])
}
})
},
// 被攻击点
{
type: 'scatter',
coordinateSystem: 'geo',
zlevel: 2,
rippleEffect: {
period: 4,
brushType: 'stroke',
scale: 4
},
label: {
normal: {
show: true,
position: 'right',
// offset:[5, 0],
color: '#0f0',
formatter: '{b}',
textStyle: {
color: '#0f0'
}
},
emphasis: {
show: true,
color: '#f60'
}
},
symbol: 'pin',
symbolSize: 50,
data: [{
name: item[0],
value: this.chinaGeoCoordMap[item[0]].concat([10])
}]
}
)
})
this.option = {
tooltip: {
trigger: 'item',
backgroundColor: 'rgba(166, 200, 76, 0.82)',
borderColor: '#FFFFCC',
showDelay: 0,
hideDelay: 0,
enterable: true,
transitionDuration: 0,
extraCssText: 'z-index:100',
formatter: function(params, ticket, callback) {
// 根据业务自己拓展要显示的内容
var res = ''
var name = params.name
var value = params.value[params.seriesIndex + 1]
res = "<span style='color:#fff;'>" + name + '</span><br/>数据：' + value
return res
}
},
backgroundColor: '#013954',
visualMap: { // 图例值控制
min: 0,
max: 1,
calculable: true,
show: true,
color: ['#f44336', '#fc9700', '#ffde00', '#ffde00', '#00eaff'],
textStyle: {
color: '#fff'
}
},
geo: {
map: 'china',
zoom: 1.2,
label: {
emphasis: {
show: false
}
},
roam: true, // 是否允许缩放
layoutCenter: ['50%', '50%'],
layoutSize: 500,
itemStyle: {
normal: {
color: 'rgba(51, 69, 89, .5)', // 地图背景色
borderColor: '#516a89', // 省市边界线00fcff 516a89
borderWidth: 1
},
emphasis: {
color: 'rgba(37, 43, 61, .5)' // 悬浮背景
}
}
},
series: series
}
this.chart = echarts.init(document.getElementById(this.id))
this.chart.setOption(this.option)
}`
----------------------------------------------------------------
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] plainheart commented on issue #12640: 窗口大小变化（或者ctrl 滚轮），地图和散点图会发生错位
Posted by GitBox <gi...@apache.org>.
plainheart commented on issue #12640:
URL: https://github.com/apache/incubator-echarts/issues/12640#issuecomment-629100020
那麻烦给出你在本地的实例代码吧
----------------------------------------------------------------
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] echarts-bot[bot] commented on issue #12640: 窗口大小变化（或者ctrl 滚轮），地图和散点图会发生错位
Posted by GitBox <gi...@apache.org>.
echarts-bot[bot] commented on issue #12640:
URL: https://github.com/apache/incubator-echarts/issues/12640#issuecomment-629091434
Hi! We've received your issue and please be patient to get responded. 🎉
The average response time is expected to be within one day for weekdays.
In the meanwhile, please make sure that **you have posted enough image to demo your request**. You may also check out the [API](http://echarts.apache.org/api.html) and [chart option](http://echarts.apache.org/option.html) to get the answer.
If you don't get helped for a long time (over a week) or have an urgent question to ask, you may also send an email to dev@echarts.apache.org. Please attach the issue link if it's a technical questions.
If you are interested in the project, you may also subscribe our [mail list](https://echarts.apache.org/en/maillist.html).
Have a nice day! 🍵
----------------------------------------------------------------
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] serfend commented on issue #12640: 窗口大小变化（或者ctrl 滚轮），地图和散点图会发生错位
Posted by GitBox <gi...@apache.org>.
serfend commented on issue #12640:
URL: https://github.com/apache/incubator-echarts/issues/12640#issuecomment-629267548
我用的4.7版本，也存在这个问题的
----------------------------------------------------------------
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] plainheart commented on issue #12640: 窗口大小变化（或者ctrl 滚轮），地图和散点图会发生错位
Posted by GitBox <gi...@apache.org>.
plainheart commented on issue #12640:
URL: https://github.com/apache/incubator-echarts/issues/12640#issuecomment-629111433
试着写了一个示例，并无问题，即使不监听resize。(txt改为html)
[index.txt](https://github.com/apache/incubator-echarts/files/4633226/index.txt)
----------------------------------------------------------------
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] plainheart commented on issue #12640: 窗口大小变化（或者ctrl 滚轮），地图和散点图会发生错位
Posted by GitBox <gi...@apache.org>.
plainheart commented on issue #12640:
URL: https://github.com/apache/incubator-echarts/issues/12640#issuecomment-629097250
是否监听了窗口的`resize`事件？当窗口`resize`时，应手动调用 [echartsInstance.resize](https://echarts.apache.org/zh/api.html#echartsInstance.resize)
----------------------------------------------------------------
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] Gacent edited a comment on issue #12640: 窗口大小变化（或者ctrl 滚轮），地图和散点图会发生错位
Posted by GitBox <gi...@apache.org>.
Gacent edited a comment on issue #12640:
URL: https://github.com/apache/incubator-echarts/issues/12640#issuecomment-629107579
在vue应用中使用，可以复制上面示例链接里的配置：https://gallery.echartsjs.com/editor.html?c=xCDj68xRo1
setOptions() {
var series = [];
[
['大庆', this.chinaDatas]
].forEach((item, i) => {
console.log(item)
series.push({
type: 'lines',
zlevel: 2,
effect: {
show: true,
period: 4, // 箭头指向速度，值越小速度越快
trailLength: 0.02, // 特效尾迹长度[0,1]值越大，尾迹越长重
symbol: 'arrow', // 箭头图标
symbolSize: 5 // 图标大小
},
lineStyle: {
normal: {
width: 1, // 尾迹线条宽度
opacity: 1, // 尾迹线条透明度
curveness: 0.3 // 尾迹线条曲直度
}
},
data: this.convertData(item[1])
}, {
type: 'effectScatter',
coordinateSystem: 'geo',
zlevel: 2,
rippleEffect: { // 涟漪特效
period: 4, // 动画时间，值越小速度越快
brushType: 'stroke', // 波纹绘制方式 stroke, fill
scale: 4 // 波纹圆环最大限制，值越大波纹越大
},
label: {
normal: {
show: true,
position: 'right', // 显示位置
offset: [5, 0], // 偏移设置
formatter: function(params) { // 圆环显示文字
return params.data.name
},
fontSize: 13
},
emphasis: {
show: true
}
},
symbol: 'circle',
symbolSize: function(val) {
return 5 + val[2] * 5 // 圆环大小
},
itemStyle: {
normal: {
show: false,
color: '#f00'
}
},
data: item[1].map((dataItem) => {
return {
name: dataItem[0].name,
value: this.chinaGeoCoordMap[dataItem[0].name].concat([dataItem[0].value])
}
})
},
// 被攻击点
{
type: 'scatter',
coordinateSystem: 'geo',
zlevel: 2,
rippleEffect: {
period: 4,
brushType: 'stroke',
scale: 4
},
label: {
normal: {
show: true,
position: 'right',
// offset:[5, 0],
color: '#0f0',
formatter: '{b}',
textStyle: {
color: '#0f0'
}
},
emphasis: {
show: true,
color: '#f60'
}
},
symbol: 'pin',
symbolSize: 50,
data: [{
name: item[0],
value: this.chinaGeoCoordMap[item[0]].concat([10])
}]
}
)
})
this.option = {
tooltip: {
trigger: 'item',
backgroundColor: 'rgba(166, 200, 76, 0.82)',
borderColor: '#FFFFCC',
showDelay: 0,
hideDelay: 0,
enterable: true,
transitionDuration: 0,
extraCssText: 'z-index:100',
formatter: function(params, ticket, callback) {
// 根据业务自己拓展要显示的内容
var res = ''
var name = params.name
var value = params.value[params.seriesIndex + 1]
res = "<span style='color:#fff;'>" + name + '</span><br/>数据：' + value
return res
}
},
backgroundColor: '#013954',
visualMap: { // 图例值控制
min: 0,
max: 1,
calculable: true,
show: true,
color: ['#f44336', '#fc9700', '#ffde00', '#ffde00', '#00eaff'],
textStyle: {
color: '#fff'
}
},
geo: {
map: 'china',
zoom: 1.2,
label: {
emphasis: {
show: false
}
},
roam: true, // 是否允许缩放
layoutCenter: ['50%', '50%'],
layoutSize: 500,
itemStyle: {
normal: {
color: 'rgba(51, 69, 89, .5)', // 地图背景色
borderColor: '#516a89', // 省市边界线00fcff 516a89
borderWidth: 1
},
emphasis: {
color: 'rgba(37, 43, 61, .5)' // 悬浮背景
}
}
},
series: series
}
this.chart = echarts.init(document.getElementById(this.id))
this.chart.setOption(this.option)
}
----------------------------------------------------------------
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