1. 程式人生 > >實現Echarts折線圖的虛實轉換

實現Echarts折線圖的虛實轉換

2-2 stack echart 上進 col alt wid style pan

技術分享  

需求:醫院的體溫單,在統計體溫時,對於正常情況下統計的體溫數據,需要顯示實線;對於進行物理降溫後統計的體溫數據,需要顯示虛線。

現有的體溫單是運用 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動態數據處理:後臺返回同一個數據。在前臺加一個判斷,當需要用虛線顯示的部分,實線的數據中改為‘-‘。

實現Echarts折線圖的虛實轉換