echart折线图异常多出一条连接线
开发背景:vue3父传子,父中调子组件echarts图表
问题:第一次进入数据图表正常,再次进入不更新图表数据的情况下,图表异常多出来一条开始到结尾的连接线
原因:上次数据没清空
解决:请求完接口后先清空数据,在往父传子push图表值
date.value = [];//图表X轴日期
arr1.value.length = 0;//图表数据1
arr2.value.length = 0;//图表数据2
<!-- 父组件传给子传值 -->
<fundEcharts v-if="$utils.getVarType.isObjEmpty(fatherToSonData.trendObj)" :dataObj="fatherToSonData.trendObj" id="trendEcharts"></fundEcharts>子
子组件接收
const props = defineProps({
dataObj: { type: Object},
id: { type: String},
});
watch(
props.dataObj,(n, o) => {
//重新绘制echarts
charts.value.clear();
console.log('props.dataObj:', props.dataObj);
nextTick(() => {
showChart(true);
});
},
{ deep: true },
);
把watch接收到的数据打出来看看,发现数据叠加了,
所以得到结论,主要这句话:
date.value = [];//图表X轴日期
arr1.value.length = 0;//图表数据1
arr2.value.length = 0;//图表数据2
echart折线图异常多出一条连接线的更多相关文章
- 微信小程序echart 折线图legend不显示的问题
最近使用小程序echart折线图,遇到表头一直不显示问题,查询之后解决方案:
- echart折线图,柱状图,饼图设置颜色
转载: 之前在做报表的时候用过echart 用完也就完了,而这次在用的时候已经忘了,所以这里简单记录一下,好记性不如烂笔头!!! 1.折线图修改颜色: xAxis: { type: 'category ...
- echart 折线图、柱状图、饼图、环形图颜色修改
之前在做报表的时候用过echart 用完也就完了,而这次在用的时候已经忘了,所以这里简单记录一下,好记性不如烂笔头!!! 1.折线图修改颜色: xAxis: { type: 'category', b ...
- echart折线图小知识
1)在折线图中,有时我们不想让太多折线显示,那么就隐藏,点击legend区域文字再显示. 比如我们要隐藏的折线叫"联盟广告",代码如下 var selected = {}; sel ...
- echart折线图系列一:折线图基本配置
引入echart插件 页面上准备一个容器:<div id="box" style="height:400px;width: 800px;padding: 20px& ...
- react-echarts之折线图的显示
react中想要实现折线图和饼图的功能,需要引入react-echarts包,然后再实现折线图的功能.我这里引用的版本是:0.1.1.其他的写法参echarts官网即可.下面详细讲解的是我在react ...
- 又快又好!巧用ChartJS打造你的实用折线图
又快又好!巧用ChartJS打造你的实用折线图 最终效果 本示例利用官方示例改造而成,生成带图示的折线图,标出各折线的名称,可以筛选想要显示的折线. 要实现最终效果,我们要分三步走: 生成折线图: 生 ...
- WPF 饼状图,柱形图,折线图 (2 折线图)
折线图在柱形图的基础上,做了一些修改.大概效果和用法如下. X轴和Y轴的刻度,使用用了Path的Figures属性,绘制多条Figure+LineSegment完成. 同时,由于折线图很可能会画多条线 ...
- ECharts折线图多个折线每次只显示一条
echart 两条折线图如何默认只显示一条,另一条隐藏呢 只需要在legend后加上, selectedMode: 'single', selectedMode [ default: true ] 图 ...
- achartengine画出动态折线图
achartengine画出动态折线图的效果最近有个项目需要用到实时曲线图,我也上网搜索了一下,最后还是选择使用achartengine这个现成的东西,毕竟自己再canvas一下实在是太麻烦,而且项目 ...
随机推荐
- Apache手动安装教程及报错解决梳理
操作参考教程:https://www.cnblogs.com/haw2106/p/9839655.html 下载地址(例):wget https://dlcdn.apache.org/httpd/ht ...
- 【SQL进阶】【CASE/IF、COUNT/SUM、多条记录拼接为一个内容】Day03:聚合分组查询
〇.今日内容概述 一.聚合函数 1.SQL类别高难度试卷得分的截断平均值[去最高最低分求平均] 自己的想法 SELECT tag, difficulty, ROUND((SUM(score)-MIN( ...
- pandas中groupby的使用
一.缘由 在爬取大量的数据之后,需要对数据进行分组的处理,于是就使用了groupby,但是我需要的并不是分组之后数据的聚合分析,我需要的是原生的某些数据.但是却找不到网上的相关案例.于是,我就自己尝试 ...
- 监控Kubernetes集群证书过期时间的三种方案
前言 Kubernetes 中大量用到了证书, 比如 ca证书.以及 kubelet.apiserver.proxy.etcd等组件,还有 kubeconfig 文件. 如果证书过期,轻则无法登录 K ...
- week_7
Andrew Ng 机器学习笔记 ---By Orangestar Week_7 This week, you will be learning about the support vector ma ...
- js逆向到加密解密入口的多种方法
一.hook hook又称钩子. 可以在调用系统函数之前, 先执行我们的函数. 例如, hook eval eval_ = eval; // 先保存系统的eval函数 eval = function( ...
- 前端h5适配刘海屏和滴水屏
前端适配苹果刘海屏,安卓刘海屏水滴瓶 其实w3c早就为我们提供了解决方法(CSS3新特性viewport-fit) 在w3c.org官方给出的关于圆形展示(Round display)的标准中, 提到 ...
- 【WPF】自定义一个自删除的多功能ListBox
原文地址 https://www.cnblogs.com/younShieh/p/17008534.html 如果本文对你有所帮助,不妨点个关注和推荐呀,这是对笔者最大的支持~ 我需要一个ListBo ...
- 从Spring中学到的【2】--容器类
容器类 我们在实际编码中,常常会遇到各种容器类,他们有时叫做POJO,有时又叫做DTO,VO, DO等,这些类只具有容器的作用,具有完全的get,set方法,作为信息载体,作数据传输用. 其实,很多地 ...
- 结构型模式 - 组合模式Composite Pattern
学习而来,代码是自己敲的.也有些自己的理解在里边,有问题希望大家指出. 组合模式的定义与特点 组合(Composite Pattern)模式的定义:有时又叫作整体-部分(Part-Whole)模式, ...