• 实现Echarts折线图的虚实转换


      

    需求:医院的体温单,在统计体温时,对于正常情况下统计的体温数据,需要显示实线;对于进行物理降温后统计的体温数据,需要显示虚线。

    现有的体温单是运用 Echarts 折线图,统一用实线显示。因此在这基础上进行的优化。主要的解决思路是:实线和虚线重叠,需要用虚线显示的部分,实线的data设置为 '-'。      

     1 {
     2                         name: '温度(°C)',
     3                         type: 'line',
     4                         stack: '温度1',
     5                         itemStyle: {
     6                             normal: {
     7                                 lineStyle: {   //系列级个性化折线样式
     8                                      5,
     9                                     type:'solid'
    10                                 }
    11                             }
    12                         },
    13                         data: [35, 37, 38, '-', 37, 36, 36, 35]14                     },
    15                     {
    16                         name: '温度(°C)',
    17                         type: 'line',
    18                         stack: '温度2',
    19                         itemStyle: {
    20                             normal: {
    21                                 lineStyle: {   //系列级个性化折线样式
    22                                      2,
    23                                     type: 'dashed'
    24                                 }
    25                             }
    26                         },
    27                         data: [35, 37, 38, 39, 37, 36, 36, 35]
    28                     }

    注意:当name值一样时,stack 的值不同,两条线就会重叠。

    关于data动态数据处理:后台返回同一个数据。在前台加一个判断,当需要用虚线显示的部分,实线的数据中改为'-'。

         

  • 相关阅读:
    简单工厂模式_C#_设计模式
    单例模式_C#设计模式
    快速排序_排序算法_算法
    关于缓存C#
    网络编程的4种IO模型
    一些自己总结
    驱动漏洞中的__try和ProbeForRead
    poj2318
    poj1113
    poj 1904
  • 原文地址:https://www.cnblogs.com/yimi8426/p/7412745.html
Copyright © 2020-2023  润新知