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一下实在是太麻烦,而且项目 ...
随机推荐
- 【每日一题】【DFS】2022年1月5日-543. 二叉树的直径
给定一棵二叉树,你需要计算它的直径长度.一棵二叉树的直径长度是任意两个结点路径长度中的最大值.这条路径可能穿过也可能不穿过根结点. 答案: /** * Definition for a binary ...
- 出现报错:The field admin.LogEntry.user was declared with a lazy reference to 'api.user', but app 'api' isn't installed.解决方法
- week_2
Andrew Ng 机器学习笔记 ---by OrangeStar Week_2 1.Multiple Features 更有效的线性回归形式 此时,h函数已经不是二阶了. \[ X = \begin ...
- Potree 001 Potree介绍
1.Potree是什么 Potree是一种基于WebGL的点云数据可视化解决方案,包含点云数据转化,以及进行可视化的源码.该解决方案的主要优势在于对点云数据进行了多尺度的管理,在数据传输和可视化上都做 ...
- Base58算法加密解密(Python实现)
def b58encode(tmp:str) -> str: tmp = list(map(ord,tmp)) temp = tmp[0] base58 = "123456789ABC ...
- toastr.js 便捷弹框怎么用?怎么本地化?
〇.简介 toastr.js 是一个非常简洁的弹窗消息插件,主要原因就是其脚本和样式文件较小. 并且可以根据自己的需求,修改样式文件,可以应用在多种不同的场景. https://codeseven.g ...
- Educational Codeforces Round 141 (Rated for Div. 2) A-E
比赛链接 A 题意 给一个数组 \(a\) ,要求重排列以后 \(a[i] \neq a[1,i-1]\) ,其中 \(a[1,i-1]\) 是前 \(i-1\) 项和. 如果无解则输出 NO :否则 ...
- ac自动姬
字符串 ac自动姬 前言 省选临近,不能再颓了! 说着开始研究起moonlight串流.真香 本期博客之所以在csdn上发了一份,因为没有图床!如果有图床我一定会自力更生的! 好像和字符串没有毛关系 ...
- Linux C 用GPS时间更新系统时间的方法。
思路: 1.GPS模块会自动收到带时间信息的消息. GPS模块会收到很多的协议消息带时间信息的.我们选择"$GPRMC"这条协议.其中的时间格式有的是hhmmss(时分秒) 有的是 ...
- AI换脸实战教学(FaceSwap的使用)---------第二步Tools:处理输入数据集。
续上篇:https://www.cnblogs.com/techs-wenzhe/p/12936809.html 第一步中已经提取出了源视频的人脸照片以及对应人脸遮罩(landmark以及其他自选遮罩 ...