8
4.6.0
例如这个示例:https://gallery.echartsjs.com/editor.html?c=xCDj68xRo1 示例窗口发生变化之后不会出错。 但是复制了代码到本地使用时候
窗口大小发生变化之后(或者ctrl 滚轮),散点图和地图应该是紧密相连的
窗口大小发生变化之后(或者ctrl 滚轮),地图和散点图会发生错位
4.6.0
例如这个示例:https://gallery.echartsjs.com/editor.html?c=xCDj68xRo1 示例窗口发生变化之后不会出错。 但是复制了代码到本地使用时候
窗口大小发生变化之后(或者ctrl 滚轮),散点图和地图应该是紧密相连的
窗口大小发生变化之后(或者ctrl 滚轮),地图和散点图会发生错位
是否监听了窗口的resize
事件?当窗口resize
时,应手动调用 echartsInstance.resize
已经手动调了resize()方法,无效
那麻烦给出你在本地的实例代码吧
在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)
}
试着写了一个示例,并无问题,即使不监听resize。(txt改为html) index.txt
已经解决了,原来是echarts版本问题,我是4.6的,刚装了4.7之后就没问题了,谢谢大佬们
我用的4.7版本,也存在这个问题的
我升级到4.8,问题没了
4.6确实存在这个问题, 加上
animation: false
可以解决这个问题