|  |  |  | 
|---|
|  |  |  | src="@/assets/images/ic_up.webp" alt="" /> | 
|---|
|  |  |  | <img v-else class="icon" src="@/assets/images/ic_down.webp" alt="" /> | 
|---|
|  |  |  | <span class="val" | 
|---|
|  |  |  | v-if="data1.electricityQuantity.totalNum && data1.electricityQuantity.totalNum != 0">{{ | 
|---|
|  |  |  | v-if="data1.electricityQuantity.sameNum && data1.electricityQuantity.sameNum != 0">{{ | 
|---|
|  |  |  | Math.abs(((data1.electricityQuantity.totalNum - | 
|---|
|  |  |  | data1.electricityQuantity.sameNum) / data1.electricityQuantity.totalNum * 100).toFixed(1)) | 
|---|
|  |  |  | data1.electricityQuantity.sameNum) / data1.electricityQuantity.sameNum * 100).toFixed(1)) | 
|---|
|  |  |  | }}%</span> | 
|---|
|  |  |  | <span class="val" v-else style="margin-left: 4px;"> -</span> | 
|---|
|  |  |  | <span class="lab">环比</span> | 
|---|
|  |  |  | 
|---|
|  |  |  | src="@/assets/images/ic_up.webp" alt="" /> | 
|---|
|  |  |  | <img v-else class="icon" src="@/assets/images/ic_down.webp" alt="" /> | 
|---|
|  |  |  | <span class="val" | 
|---|
|  |  |  | v-if="data1.electricityQuantity.totalNum && data1.electricityQuantity.totalNum != 0">{{ | 
|---|
|  |  |  | v-if="data1.electricityQuantity.ringNum && data1.electricityQuantity.ringNum != 0">{{ | 
|---|
|  |  |  | Math.abs(((data1.electricityQuantity.totalNum - | 
|---|
|  |  |  | data1.electricityQuantity.ringNum) / data1.electricityQuantity.totalNum * 100).toFixed(1)) | 
|---|
|  |  |  | data1.electricityQuantity.ringNum) / data1.electricityQuantity.ringNum * 100).toFixed(1)) | 
|---|
|  |  |  | }}%</span> | 
|---|
|  |  |  | <span class="val" v-else style="margin-left: 4px;"> -</span> | 
|---|
|  |  |  | </div> | 
|---|
|  |  |  | 
|---|
|  |  |  | <img v-if="data1.gasQuantity.totalNum > data1.gasQuantity.sameNum" class="icon" | 
|---|
|  |  |  | src="@/assets/images/ic_up.webp" alt="" /> | 
|---|
|  |  |  | <img v-else class="icon" src="@/assets/images/ic_down.webp" alt="" /> | 
|---|
|  |  |  | <span class="val" v-if="data1.gasQuantity.totalNum && data1.gasQuantity.totalNum != 0">{{ | 
|---|
|  |  |  | Math.abs(((data1.gasQuantity.totalNum - data1.gasQuantity.sameNum) / data1.gasQuantity.totalNum | 
|---|
|  |  |  | <span class="val" v-if="data1.gasQuantity.sameNum && data1.gasQuantity.sameNum != 0">{{ | 
|---|
|  |  |  | Math.abs(((data1.gasQuantity.totalNum - data1.gasQuantity.sameNum) / data1.gasQuantity.sameNum | 
|---|
|  |  |  | * 100).toFixed(1)) | 
|---|
|  |  |  | }}%</span> | 
|---|
|  |  |  | <span class="val" v-else style="margin-left: 4px;">-</span> | 
|---|
|  |  |  | 
|---|
|  |  |  | <img v-if="data1.gasQuantity.totalNum > data1.gasQuantity.ringNum" class="icon" | 
|---|
|  |  |  | src="@/assets/images/ic_up.webp" alt="" /> | 
|---|
|  |  |  | <img v-else class="icon" src="@/assets/images/ic_down.webp" alt="" /> | 
|---|
|  |  |  | <span class="val" v-if="data1.gasQuantity.totalNum && data1.gasQuantity.totalNum != 0">{{ | 
|---|
|  |  |  | Math.abs(((data1.gasQuantity.totalNum - data1.gasQuantity.ringNum) / data1.gasQuantity.totalNum | 
|---|
|  |  |  | <span class="val" v-if="data1.gasQuantity.ringNum && data1.gasQuantity.ringNum != 0">{{ | 
|---|
|  |  |  | Math.abs(((data1.gasQuantity.totalNum - data1.gasQuantity.ringNum) / data1.gasQuantity.ringNum | 
|---|
|  |  |  | * 100).toFixed(1)) | 
|---|
|  |  |  | }}%</span> | 
|---|
|  |  |  | <span class="val" v-else style="margin-left: 4px;">-</span> | 
|---|
|  |  |  | 
|---|
|  |  |  | }, | 
|---|
|  |  |  | data: data5.value.map(i => dayjs(i.timeData).format('M')) | 
|---|
|  |  |  | }, | 
|---|
|  |  |  | // tooltip: { | 
|---|
|  |  |  | //   trigger: 'axis', | 
|---|
|  |  |  | //   axisPointer: { | 
|---|
|  |  |  | //     type: 'line' | 
|---|
|  |  |  | //   }, | 
|---|
|  |  |  | // }, | 
|---|
|  |  |  | tooltip: { | 
|---|
|  |  |  | trigger: 'axis', | 
|---|
|  |  |  | axisPointer: { | 
|---|
|  |  |  | type: 'line' | 
|---|
|  |  |  | }, | 
|---|
|  |  |  | formatter: function (params) { | 
|---|
|  |  |  | // 遍历悬浮时的所有点,定制化显示内容 | 
|---|
|  |  |  | let result = `<div> | 
|---|
|  |  |  | <div style="width: 120px">${params[0].name}月</div> | 
|---|
|  |  |  | <div style="display: flex;align-items: center;;margin-top: 2px;"> | 
|---|
|  |  |  | <div style="display: flex;align-items: center;"><div style="width: 10px;height: 10px; border-radius: 50%;background-color: #f6d047;margin-right: 6px;"></div></div> | 
|---|
|  |  |  | <div><strong>${params[0].value} L</strong></div> | 
|---|
|  |  |  | </div> | 
|---|
|  |  |  | </div>` | 
|---|
|  |  |  | return result | 
|---|
|  |  |  | } | 
|---|
|  |  |  | }, | 
|---|
|  |  |  | yAxis: { | 
|---|
|  |  |  | type: 'value', | 
|---|
|  |  |  | 
|---|
|  |  |  | }, | 
|---|
|  |  |  | tooltip: { | 
|---|
|  |  |  | trigger: 'axis', | 
|---|
|  |  |  | axisPointer: { | 
|---|
|  |  |  | type: 'line' | 
|---|
|  |  |  | }, | 
|---|
|  |  |  | formatter: function (params) { | 
|---|
|  |  |  | // 遍历悬浮时的所有点,定制化显示内容 | 
|---|
|  |  |  | let result = `<div> | 
|---|
|  |  |  | <div style="width: 120px">${params[0].name}月</div> | 
|---|
|  |  |  | <div style="display: flex;align-items: center;;margin-top: 2px;"> | 
|---|
|  |  |  | <div style="display: flex;align-items: center;"><div style="width: 10px;height: 10px; border-radius: 50%;background-color: #61a1c4;margin-right: 6px;"></div></div> | 
|---|
|  |  |  | <div><strong>${params[0].value} </strong></div> | 
|---|
|  |  |  | </div> | 
|---|
|  |  |  | </div>` | 
|---|
|  |  |  | return result | 
|---|
|  |  |  | } | 
|---|
|  |  |  | }, | 
|---|
|  |  |  | xAxis: { | 
|---|
|  |  |  | type: 'category', | 
|---|