记前端曲线展示小问题解决
2019-01-21 本文已影响0人
阿武_Accat
问题描述：
开发过程中，我们的前端使用Echarts.js开发时，碰到了一个困扰她的问题。
image.png
上面的曲线的X轴为时间轴， Y轴为数值， 问题在当这几个线返回的X轴数据不一致时， Echarts.js 在那个点会出现断线。
image.png
写了个东西，将缺失的数据补全，
即X轴数据补全，然后Y轴使用临近的两个点的均值补全；
当前后没有点时，使用最近的点的数值进行补全。
package com.loyotech.bigscreenbackend;
import com.loyotech.bigscreenbackend.dto.IceThicknessCurvesDTO;
import com.loyotech.bigscreenbackend.model.IceThicknessCurve;
import com.loyotech.bigscreenbackend.util.ObjectUtil;
import lombok.extern.java.Log;
import org.junit.Test;
import java.util.*;
import java.util.logging.Level;
import java.util.stream.Collectors;
/*
* @program big-screen-backend
* @description
* @author Rudolph Browne
* @create 19-1-15
*/
@Log
public class curveOfIceThicknessTest {
@Test
public void test01() {
List<IceThicknessCurvesDTO> result = prepareTestData();
log.log(Level.INFO, result.toString());
initialFakePoint(result);
log.log(Level.INFO, result.toString());
evaluateFakePoint(result);
log.log(Level.INFO, result.toString());
}
@Test
public void test02() {
IceThicknessCurve a = new IceThicknessCurve() {{
setRecPhase("C相");
setRecIceHeight("1");
setRecBsId("CC2529");
setCreateDate("2019-01-13 21:34:27");
setRecUpdateTime("2019-01-13 04:10:26");
}};
IceThicknessCurve b = new IceThicknessCurve();
ObjectUtil.copyProperties(IceThicknessCurve.class, a, IceThicknessCurve.class, b);
log.log(Level.INFO, b.toString());
}
@Test
public void test03() {
List list = Arrays.asList(1,2,3,2,1,3);
list = (List) list.stream().distinct().collect(Collectors.toList());
log.log(Level.INFO, list.toString());
}
}
private List<IceThicknessCurvesDTO> prepareTestData() {
return new LinkedList<IceThicknessCurvesDTO>() {{
add(new IceThicknessCurvesDTO() {{
setPhrase("A相");
setList(new LinkedList<IceThicknessCurve>(){{
add(new IceThicknessCurve() {{
setRecPhase("A相");
setRecIceHeight("1");
setRecBsId("CC2529");
setCreateDate("2019-01-13 21:34:27");
setRecUpdateTime("2019-01-13 21:10:26");
}});
add(new IceThicknessCurve() {{
setRecPhase("A相");
setRecIceHeight("5");
setRecBsId("CC2529");
setCreateDate("2019-01-13 21:34:27");
setRecUpdateTime("2019-01-13 15:10:26");
}});
add(new IceThicknessCurve() {{
setRecPhase("A相");
setRecIceHeight("1");
setRecBsId("CC2529");
setCreateDate("2019-01-13 21:34:27");
setRecUpdateTime("2019-01-13 05:10:26");
}});
}});
}});
add(new IceThicknessCurvesDTO() {{
setPhrase("B相");
setList(new LinkedList<IceThicknessCurve>(){{
add(new IceThicknessCurve() {{
setRecPhase("B相");
setRecIceHeight("1");
setRecBsId("CC2529");
setCreateDate("2019-01-13 21:34:27");
setRecUpdateTime("2019-01-13 13:10:26");
}});
add(new IceThicknessCurve() {{
setRecPhase("B相");
setRecIceHeight("5");
setRecBsId("CC2529");
setCreateDate("2019-01-13 21:34:27");
setRecUpdateTime("2019-01-13 19:10:26");
}});
add(new IceThicknessCurve() {{
setRecPhase("B相");
setRecIceHeight("1");
setRecBsId("CC2529");
setCreateDate("2019-01-13 21:34:27");
setRecUpdateTime("2019-01-13 01:10:26");
}});
}});
}});
add(new IceThicknessCurvesDTO() {{
setPhrase("B相");
setList(new LinkedList<IceThicknessCurve>(){{
add(new IceThicknessCurve() {{
setRecPhase("C相");
setRecIceHeight("1");
setRecBsId("CC2529");
setCreateDate("2019-01-13 02:34:27");
setRecUpdateTime("2019-01-13 13:10:26");
}});
add(new IceThicknessCurve() {{
setRecPhase("C相");
setRecIceHeight("5");
setRecBsId("CC2529");
setCreateDate("2019-01-13 21:34:27");
setRecUpdateTime("2019-01-13 03:10:26");
}});
add(new IceThicknessCurve() {{
setRecPhase("C相");
setRecIceHeight("1");
setRecBsId("CC2529");
setCreateDate("2019-01-13 21:34:27");
setRecUpdateTime("2019-01-13 04:10:26");
}});
}});
}});
}};
}
private void initialFakePoint(List<IceThicknessCurvesDTO> result) {
List<IceThicknessCurve> iceThicknessCurves = new LinkedList<>();
result.stream().forEach(
iceThicknessCurvesDTO -> {
iceThicknessCurves.addAll(iceThicknessCurvesDTO.getList());
}
);
iceThicknessCurves.stream().forEach(
iceThicknessCurve -> {
for (IceThicknessCurvesDTO iceThicknessCurvesDTO : result) {
if (!iceThicknessCurvesDTO.getPhrase().equalsIgnoreCase(iceThicknessCurve.getRecPhase())) {
iceThicknessCurvesDTO.getList().add(new IceThicknessCurve() {{ //为每条曲线设置空点, 适配X时间轴
setRecUpdateTime(iceThicknessCurve.getRecUpdateTime());
}});
}
}
}
);
}
private void evaluateFakePoint(List<IceThicknessCurvesDTO> result) {
// 每一条曲线需要为虚点附上数值
for (IceThicknessCurvesDTO iceThicknessCurvesDTO : result) {
List<IceThicknessCurve> list = iceThicknessCurvesDTO.getList();
list.sort((o1, o2) -> (o1.getRecUpdateTime().compareTo(o2.getRecUpdateTime())));
Iterator iterator = list.listIterator();
IceThicknessCurve prevRealPoint = null;
IceThicknessCurve nextRealPoint = null;
IceThicknessCurve currentPoint;
// 循环执行每个点, 作为当前点
while (iterator.hasNext()) {
// 拿到当前点
currentPoint = (IceThicknessCurve) iterator.next();
// 如果当前点为实点
if (isRealPoint(currentPoint)){
prevRealPoint = currentPoint;
continue;
} else { // 如果当前点为虚点
// 如果当前点既是虚点, 又是第一个点
((ListIterator) iterator).previous();
boolean isFirstPoint = !((ListIterator) iterator).hasPrevious();
if (isFirstPoint) {
nextRealPoint = findNextRealPoint(iterator);
// 需要实现不想克隆的部分, 要不然会出现覆盖时间点的情况
// ObjectUtil.copyProperties(IceThicknessCurve.class, nextRealPoint,
// IceThicknessCurve.class, currentPoint);
currentPoint.setRecIceHeight(nextRealPoint.getRecIceHeight());
currentPoint.setCreateDate(nextRealPoint.getCreateDate());
currentPoint.setRecBsId(nextRealPoint.getRecBsId());
currentPoint.setRecPhase(nextRealPoint.getRecPhase());
prevRealPoint = currentPoint;
backToCurrentPoint(iterator, currentPoint, currentPoint.getClass());
continue;
}
nextRealPoint = findNextRealPoint(iterator);
if (!isRealPoint(nextRealPoint)) {
// 如果最后不存在实点
// ObjectUtil.copyProperties(IceThicknessCurve.class, prevRealPoint,
// IceThicknessCurve.class, currentPoint);
currentPoint.setRecIceHeight(prevRealPoint.getRecIceHeight());
currentPoint.setCreateDate(prevRealPoint.getCreateDate());
currentPoint.setRecBsId(prevRealPoint.getRecBsId());
currentPoint.setRecPhase(prevRealPoint.getRecPhase());
} else {
// 当找到左右两个实点, 将当前虚点转为实点
currentPoint.setRecIceHeight(String.valueOf((Double.valueOf(prevRealPoint.getRecIceHeight())
+ Double.valueOf(nextRealPoint.getRecIceHeight()))/2)) ;
currentPoint.setCreateDate(prevRealPoint.getCreateDate());
currentPoint.setRecBsId(prevRealPoint.getRecBsId());
currentPoint.setRecPhase(prevRealPoint.getRecPhase());
}
prevRealPoint = currentPoint;
backToCurrentPoint(iterator, currentPoint, currentPoint.getClass());
}
}
}
}
/**
* 指针重新回到当前点
* @param iterator
* @param currentPoint
* @param currentPointType
*/
private void backToCurrentPoint(Iterator iterator, Object currentPoint, Class currentPointType) {
while (((ListIterator) iterator).hasPrevious()) {
if (((ListIterator) iterator).previous().equals(currentPointType.cast(currentPoint)))
break;
}
}
/**
* 寻找下一个实点
* @param iterator
* @param <T>
* @return
*/
private <T extends IceThicknessCurve> IceThicknessCurve findNextRealPoint(Iterator iterator) {
T nextRealPoint = null;
while (iterator.hasNext()) {
nextRealPoint = (T) iterator.next();
if ((nextRealPoint).getRecIceHeight() == null || "".equals(nextRealPoint.getRecIceHeight())) {
continue;
} else {
break;
}
}
return nextRealPoint;
}
/**
* 判断传入点是实点还是虚点
* @param point
* @param <T>
* @return
*/
private <T extends IceThicknessCurve> boolean isRealPoint(T point) {
return point.getRecIceHeight() != null && !"".equals(point.getRecIceHeight());
}
