实现Echarts折线图的虚实转换

  

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

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

 1 {
 2                         name: '温度(°C)',
 3                         type: 'line',
 4                         stack: '温度1',
 5                         itemStyle: {
 6                             normal: {
 7                                 lineStyle: {   //系列级个性化折线样式
 8                                     width: 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                                     width: 2,
23                                     type: 'dashed'
24                                 }
25                             }
26                         },
27                         data: [35, 37, 38, 39, 37, 36, 36, 35]
28                     }

 

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

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

 

     

posted @ 2017-08-22 17:52  在路上20151201  阅读(2427)  评论(0编辑  收藏  举报