echarts折线图默认显示最后一个点的数据

想要达到这种效果图如下：

如果你给折线图设置数据显示，那么要不就全部隐藏，要不就全部显示在折线上。实现指定点的显示就需要你自己去处理这个数据了。

方式有两种：

方法1：利用formatter函数(推荐)

在echarts的series里面的formatter ,可以给每一根你要渲染的折线加上这个函数，打印事件源参数你就可以发现每一项数据和折线的关系：

personnelIndex:[34,54,6,34,5,34,45,56,56]
data: personnelIndex
itemStyle: {normal: {color: '#F6547F',lineStyle: {color: "#F6547F",width: 3},label: {show: true,position: 'right',textStyle: {fontSize: 12,color: "green"},formatter: (params) => {console.log(params)console.log(personnelIndex.length)if (personnelIndex.length - 1 == params.dataIndex) {return params.value} else {return ""}},},}
},

打印params可以发现每一个项数据，里面有一个参数dataIndex就是记录循环的是哪一个数的位置。

然后就可以根据这个规律去做判断了，其余点return " ",找到最后一个点return params.value 就可以只显示最后一个数据了。多条线也是一样的。

方法2：利用for循环去处理你得到的数据

判断条件也是索引和循环到第几个数的位置时。顺带把他的value和label都设置一遍

personnelIndex.push({ value: (trendList[i].personnelIndex).toFixed(2), label: { show: true, position: 'right' } })

echarts折线图默认显示最后一个点的数据相关推荐

echarts折线图分段显示颜色
echarts折线图分段显示颜色 - vue技术交流群(864583465) 1.直接上代码 option = {xAxis: {type: 'category',data: ['Mon', 'Tue ...
echarts折线图不显示y轴值_Echarts 折线图y轴标签值太长时显示不全的解决办法
问题先看一下正常的情况再看一下显示不全的情况所有的数据都是从后台取的,也就是说动态变化的,一开始的时候数据量不大不会出现问题,后面y轴的值越来越大的时候就出现了这个显示不全的情况. 分析先贴一 ...
ui曲线谁是横坐标_vue项目引入echarts折线图横坐标显示问题
1:问题描述用vue的elmentui做后台系统!利用echarts展示数据(折线图)!发现在数据正常的情况下引入更新横坐标显示有问题!横坐标数组为空则显示正常! 2:相关代码 axios.get( ...
Echarts 折线图间隔显示数据
var option = {// 主要用来控制图表四周留白grid: {left: '15%',top: '20%',right: '5%'},// 提示框组件tooltip: {trigger: ' ...
echarts 折线图设置y轴最小刻度_数据可视化—Echarts图表应用
<错误>郑愁予我打江南走过, 那等在季节里的容颜如莲花的开落,东风不来,三月的柳絮不飞.你的心如小小寂寞的城,恰若青石的街道向晚.蛩音不响,三月的春帷不揭,你的心是小小的窗扉紧掩.我达达 ...
Echarts折线图的平移假动画
Echarts折线图的平移假动画 #可视化项目中经常用图表的方式来展示数据,折线图是经常出现的,但是在echarts折线图中正常情况是通过删除数据的第一个,添加一个新数据在数组的末尾来实现动画,此动画 ...
Echarts折线图案例
问题:重置echarts折线图时,总会出现多个数据的拐点,与实际渲染的数据拐点不符合. 解决: 在实例化echarts后 clear 上一次的图. myEcharts.clear() 案例 impor ...
echarts折线图最后一位不显示的问题及重影问题
1.echarts折线图最后一位无法显示数据的问题,将xAxis: boundaryGap: false,改成true就解决了. 2.在某些安卓盒子上使用echarts会有重影的问题,将animat ...
echarts 折线图折线从头开始
在echarts折线图中,默认折线从刻度中心开始,我们为了图标的美观有时需要折线从头开始显示,一个配置项就可以轻松搞定. boundaryGap:false

echarts折线图默认显示最后一个点的数据

echarts折线图默认显示最后一个点的数据

方法1：利用formatter函数(推荐)

方法2：利用for循环去处理你得到的数据

echarts折线图默认显示最后一个点的数据相关推荐

最新文章

热门文章