【已解决】echarts有残留的连线

echarts有残留的连线

前言

今天做好了一个图,每次查询显示对应数据的echarts图,发现了bug,当我第一次查询时应该有5条线,第二次查询时应该有4条线,但第二次显示在页面中的却有5条线,应当不存在的那条线是第一次查询时残留下来的。

解决方法

在每一次绘制前我的数据都有先置空再填充,但依旧会残留一条线,后来发现,在设置option的时候加上true即可解决:

this.myChart.setOption(this.option, true)

解释

先看一下echarts的官方文档中的setOption:
setOption
可以看到setOption方法一共有三个参数:

  • 第一个参数不用解释,就是传我们的 option (图表的配置项和数据)。

  • 第二个参数就是我们上面进行修改的参数,代表是否不合并,默认值为 false ,即和之前设置的 option 进行合并,所以在我第二次查询的时候,会显示出上一次残留的连线。
    当设置为 true 时,即不合并,表示所有组件都进行删除,根据新的 option 创建新的组件

  • 第三个参数表示在设置完 option 后是否不立即更新图表,默认为 false,即同步立即更新。如果为 true,则会在下一个 animation frame 中,才更新图表。

。。。当然还不止这些,建议去看看官方文档对这里的解释哦,还可以配置其他参数,替换组件等等~

戳!setOption的官方文档

(上面不是发过一遍了蛮?)

加油!




更于2021.7.21

  • 2
    点赞
  • 2
    收藏
    觉得还不错? 一键收藏
  • 9
    评论
要在 echarts 中绘制地图连线,你可以使用 echarts 的 geo 组件和 lines 这个系列类型。下面是一个简单的示例代码,展示了如何绘制两个城市之间的连线: ```javascript // 初始化echarts实例 var myChart = echarts.init(document.getElementById('chart')); // 地图数据 var geoData = [ { name: '城市A', coord: [lon1, lat1] }, { name: '城市B', coord: [lon2, lat2] } ]; // 连线数据 var lineData = [ { from: '城市A', to: '城市B' } ]; // 绘制地图 myChart.setOption({ geo: { map: 'china', roam: true, label: { emphasis: { show: false } }, itemStyle: { normal: { areaColor: '#323c48', borderColor: '#111' }, emphasis: { areaColor: '#2a333d' } } }, series: [{ type: 'lines', zlevel: 2, symbolSize: 10, effect: { show: true, period: 4, trailLength: 0.5, symbolSize: 5 }, lineStyle: { color: '#fff', width: 1, opacity: 0.6, curveness: 0.2 }, data: lineData.map(function (dataItem) { var fromCoord = geoData.find(function (geoItem) { return geoItem.name === dataItem.from; }).coord; var toCoord = geoData.find(function (geoItem) { return geoItem.name === dataItem.to; }).coord; return { fromCoord, toCoord }; }) }, { type: 'effectScatter', coordinateSystem: 'geo', zlevel: 2, rippleEffect: { brushType: 'stroke' }, label: { emphasis: { show: true, position: 'right', formatter: '{b}' } }, symbolSize: 10, itemStyle: { normal: { color: '#fff' } }, data: geoData.map(function (geoItem) { return { name: geoItem.name, value: geoItem.coord.concat(10) }; }) }] }); ``` 你需要将 `chart` 替换为你的 HTML 元素 ID,`lon1`、`lat1`、`lon2`、`lat2` 替换为城市 A 和城市 B 的经纬度。这样就可以在地图上绘制出两个城市之间的连线了。你可以根据自己的需求修改样式和数据

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 9
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值