实现Echarts折线图的虚实转换

2022-12-23,,,

  

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

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

 {
name: '温度(°C)',
type: 'line',
stack: '温度1',
itemStyle: {
normal: {
lineStyle: { //系列级个性化折线样式
width: 5,
type:'solid'
}
}
},
data: [35, 37, 38, '-', 37, 36, 36, 35] },
{
name: '温度(°C)',
type: 'line',
stack: '温度2',
itemStyle: {
normal: {
lineStyle: { //系列级个性化折线样式
width: 2,
type: 'dashed'
}
}
},
data: [35, 37, 38, 39, 37, 36, 36, 35]
}

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

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

实现Echarts折线图的虚实转换的相关教程结束。

《实现Echarts折线图的虚实转换.doc》

下载本文的Word格式文档,以方便收藏与打印。