Echarts 折线图或者其他图表切换数据时,有残留,Echarts二次查询残留上次数据解决办法

23 篇文章 0 订阅
4 篇文章 1 订阅

概述:如果首次查询的折线图有8条,二次查询的只有5条,刚开始还以为是后端传错了,结果查看以后,后端数据返回的数据条目是对的,那问题肯定就是前端的了,本以为每次查询清空所赋值的对象或数组,也不行。结果了解以后是Echarts渲染的问题。
在这里插入图片描述

原因:折线图setOption时,默认对option进行合并,所以即使一次选择一条数据渲染时(除了首次)也会数据重叠显示多条折线

解决方案1:
根据api上说的,notMerge参数默认为false,设置成true,只要不让它合并数据那么问题就解决了
在这里插入图片描述

mychart.setOption(option,true);

方案2:也是我推崇的,获取当前的Echarts实例以后,直接this.myChart.clear();即可

在这里插入图片描述

 loadEchart() {
        this.myChart = Echarts.init(this.$refs.radarChart)
        this.myChart.clear();   //就这一句就可以了
        }
  • 16
    点赞
  • 24
    收藏
    觉得还不错? 一键收藏
  • 4
    评论
要在echarts折线图中显示"暂无数据",可以通过在数据中使用特殊的标记来实现。例如,可以使用"-"或其他符号来表示没有数据的点。然后,通过设置series中的data属性为这些特殊标记,同设置yAxis的axisLabel属性为"暂无数据",就可以在没有数据显示"暂无数据"。以下是一个示例代码: ```javascript import * as echarts from 'echarts'; var chartDom = document.getElementById('main'); var myChart = echarts.init(chartDom, 'dark'); var option; option = { xAxis: { type: 'category', data: \['周一', '周二', '周三', '周四', '周五', '周六', '周日'\] }, yAxis: { type: 'value', axisLabel: { formatter: function (value) { if (value === '-') { return '暂无数据'; } else { return value; } } } }, series: \[{ data: \[90, 100, 110, 100, '-', '-', '-'\], type: 'line', smooth: true }\] }; option && myChart.setOption(option); ``` 在上述代码中,通过设置yAxis的axisLabel的formatter属性,当数值为"-",将显示"暂无数据"。这样,在没有数据的点上,就会显示"暂无数据"。 #### 引用[.reference_title] - *1* *2* *3* [ECharts折线图渲染速度变慢、ECharts折线图数据为0不显示线条](https://blog.csdn.net/weixin_42881768/article/details/117699073)[target="_blank" data-report-click={"spm":"1018.2226.3001.9630","extra":{"utm_source":"vip_chatgpt_common_search_pc_result","utm_medium":"distribute.pc_search_result.none-task-cask-2~all~insert_cask~default-1-null.142^v91^control_2,239^v3^insert_chatgpt"}} ] [.reference_item] [ .reference_list ]

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

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

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值