记前端曲线展示小问题解决

问题描述:
开发过程中,我们的前端使用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());
    }
©著作权归作者所有,转载或内容合作请联系作者
  • 序言:七十年代末,一起剥皮案震惊了整个滨河市,随后出现的几起案子,更是在滨河造成了极大的恐慌,老刑警刘岩,带你破解...
    沈念sama阅读 215,794评论 6 498
  • 序言:滨河连续发生了三起死亡事件,死亡现场离奇诡异,居然都是意外死亡,警方通过查阅死者的电脑和手机,发现死者居然都...
    沈念sama阅读 92,050评论 3 391
  • 文/潘晓璐 我一进店门,熙熙楼的掌柜王于贵愁眉苦脸地迎上来,“玉大人,你说我怎么就摊上这事。” “怎么了?”我有些...
    开封第一讲书人阅读 161,587评论 0 351
  • 文/不坏的土叔 我叫张陵,是天一观的道长。 经常有香客问我,道长,这世上最难降的妖魔是什么? 我笑而不...
    开封第一讲书人阅读 57,861评论 1 290
  • 正文 为了忘掉前任,我火速办了婚礼,结果婚礼上,老公的妹妹穿的比我还像新娘。我一直安慰自己,他们只是感情好,可当我...
    茶点故事阅读 66,901评论 6 388
  • 文/花漫 我一把揭开白布。 她就那样静静地躺着,像睡着了一般。 火红的嫁衣衬着肌肤如雪。 梳的纹丝不乱的头发上,一...
    开封第一讲书人阅读 50,898评论 1 295
  • 那天,我揣着相机与录音,去河边找鬼。 笑死,一个胖子当着我的面吹牛,可吹牛的内容都是我干的。 我是一名探鬼主播,决...
    沈念sama阅读 39,832评论 3 416
  • 文/苍兰香墨 我猛地睁开眼,长吁一口气:“原来是场噩梦啊……” “哼!你这毒妇竟也来了?” 一声冷哼从身侧响起,我...
    开封第一讲书人阅读 38,617评论 0 271
  • 序言:老挝万荣一对情侣失踪,失踪者是张志新(化名)和其女友刘颖,没想到半个月后,有当地人在树林里发现了一具尸体,经...
    沈念sama阅读 45,077评论 1 308
  • 正文 独居荒郊野岭守林人离奇死亡,尸身上长有42处带血的脓包…… 初始之章·张勋 以下内容为张勋视角 年9月15日...
    茶点故事阅读 37,349评论 2 331
  • 正文 我和宋清朗相恋三年,在试婚纱的时候发现自己被绿了。 大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
    茶点故事阅读 39,483评论 1 345
  • 序言:一个原本活蹦乱跳的男人离奇死亡,死状恐怖,灵堂内的尸体忽然破棺而出,到底是诈尸还是另有隐情,我是刑警宁泽,带...
    沈念sama阅读 35,199评论 5 341
  • 正文 年R本政府宣布,位于F岛的核电站,受9级特大地震影响,放射性物质发生泄漏。R本人自食恶果不足惜,却给世界环境...
    茶点故事阅读 40,824评论 3 325
  • 文/蒙蒙 一、第九天 我趴在偏房一处隐蔽的房顶上张望。 院中可真热闹,春花似锦、人声如沸。这庄子的主人今日做“春日...
    开封第一讲书人阅读 31,442评论 0 21
  • 文/苍兰香墨 我抬头看了看天上的太阳。三九已至,却和暖如春,着一层夹袄步出监牢的瞬间,已是汗流浃背。 一阵脚步声响...
    开封第一讲书人阅读 32,632评论 1 268
  • 我被黑心中介骗来泰国打工, 没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留,地道东北人。 一个月前我还...
    沈念sama阅读 47,474评论 2 368
  • 正文 我出身青楼,却偏偏与公主长得像,于是被迫代替她去往敌国和亲。 传闻我的和亲对象是个残疾皇子,可洞房花烛夜当晚...
    茶点故事阅读 44,393评论 2 352

推荐阅读更多精彩内容

  • 关于Mongodb的全面总结 MongoDB的内部构造《MongoDB The Definitive Guide》...
    中v中阅读 31,922评论 2 89
  • 一个人一无所有其实一点也不可怕,可怕的是一无所有还有一颗玻璃心,所以别让你所谓的自尊心,断送了你的前程。 最近公司...
    半醒之间阅读 253评论 0 1
  • 自从上了三年级用的钢笔,我的烦恼又增多了,有时墨水太多了滴大本子上字迹就看不清了。写错字时,不能擦,因此书面很乱。...
    d4cb7f3d2051阅读 167评论 0 1
  • 第一天 观察:1.对自己画画很享受,会要求我不准看过程。完成后愿意分享。问我喜欢她画的哪个 2.对写字不太感兴趣,...
    芷凡bonita阅读 740评论 0 0