医疗做网站,免费域名注册工具,大连网页制作wordpress,网站后台更新无法在网页显示需求背景解决效果ISQQW代码地址energyChart.vue 需求背景
需要实现同x轴#xff0c;4个图表的的多图表联动效果#xff0c;且滑动会触发各个图表的tooltip#xff0c;即一个图表拥有4个tooltip(目前echarts不支持#xff0c;我这里绕过了这个问题)
解决效果
ISQQW代码地… 需求背景解决效果ISQQW代码地址energyChart.vue 需求背景
需要实现同x轴4个图表的的多图表联动效果且滑动会触发各个图表的tooltip即一个图表拥有4个tooltip(目前echarts不支持我这里绕过了这个问题)
解决效果
ISQQW代码地址
由于ISQQW只能上传一个option对象的图表故未上传
energyChart.vue
!--/**
* author: liuk
* date: 2023/11/21
* describe: 能耗分析图表
* email:https://blog.csdn.net/hr_beginner?spm1018.2226.3001.5343
*/--
templatediv refchatDom1 classenergyChart/divdiv refchatDom2 classenergyChart/divdiv refchatDom3 classenergyChart/divdiv refchatDom4 classenergyChart/div
/templatescript langts setup
import {ref, onMounted, watch, nextTick} from vue
import * as echarts from echarts
import {formatToFixed} from /utils/dictionary;// Props
const props defineProps([data])
const myCharts {// Vue3 使用 proxy 对象代理而 echarts 则使用了大量的全等, 对比失败从而导致了bug。myChart1: null,myChart2: null,myChart3: null,myChart4: null
}const chatDom1 ref(null)
const chatDom2 ref(null)
const chatDom3 ref(null)
const chatDom4 ref(null)watch(() props.data, (data) {nextTick(() {renderFn(myCharts.myChart1, {xData: data.heatRateHistory.map(item item.time),yName: 度日数单耗 W/m²·℃,sData: data.heatRateHistory.map(item formatToFixed(item.heatRate)),markLineVal: data.heatRateHistory[0]?.heatRate3 || 0,color: #EB8F4A})renderFn(myCharts.myChart2, {xData: data.flowPowerHistory.map(item item.time),yName: 电单耗 W/m²,sData: data.flowPowerHistory.map(item formatToFixed(item.power1)),markLineVal: data.flowPowerHistory[0]?.power3 || 0,color: #BF97FF})renderFn(myCharts.myChart3, {xData: data.flowPowerHistory.map(item item.time),yName: 水单耗 W/m²,sData: data.flowPowerHistory.map(item formatToFixed(item.flow1)),markLineVal: data.flowPowerHistory[0]?.flow3 || 0,color: #5690FF})renderFn(myCharts.myChart4, {xData: data.energyAnalysisData.time,yName: 室外温度 °C,sData: data.energyAnalysisData.tt301_value_val_arr,markLineVal: false,color: #00CCA3})})
})onMounted(() {drawChart(chatDom1.value, 1)drawChart(chatDom2.value, 2)drawChart(chatDom3.value, 3)drawChart(chatDom4.value, 4)echarts.connect(sameControls); // **相同操作window.addEventListener(resize, () {renderFn(myCharts.myChart1, {xData: props.data.heatRateHistory.map(item item.time),yName: 度日数单耗 W/m²·℃,sData: props.data.heatRateHistory.map(item formatToFixed(item.heatRate)),markLineVal: props.data.heatRateHistory[0]?.heatRate3 || 0,color: #EB8F4A})renderFn(myCharts.myChart2, {xData: props.data.flowPowerHistory.map(item item.time),yName: 电单耗 W/m²,sData: props.data.flowPowerHistory.map(item formatToFixed(item.power1)),markLineVal: props.data.flowPowerHistory[0]?.power3 || 0,color: #BF97FF})renderFn(myCharts.myChart3, {xData: props.data.flowPowerHistory.map(item item.time),yName: 水单耗 W/m²,sData: props.data.flowPowerHistory.map(item formatToFixed(item.flow1)),markLineVal: props.data.flowPowerHistory[0]?.flow3 || 0,color: #5690FF})renderFn(myCharts.myChart4, {xData: props.data.energyAnalysisData.time,yName: 室外温度 °C,sData: props.data.energyAnalysisData.tt301_value_val_arr,markLineVal: false,color: #00CCA3})}, {passive: true});
})const renderFn (myChart, {xData, yName, sData, markLineVal, color}) {const option myChart.getOption()option.xAxis[0].data xDataoption.xAxis[0].min nulloption.yAxis[0].name yNameoption.series[0].name yNameoption.series[0].data sDataoption.series[0].color coloroption.series[0].markLine.data[0].yAxis markLineValoption.series[0].markLine.data[0].label.color colorif (markLineVal false) delete option.series[0].markLineoption.tooltip[0].formatter (param) {const data param[0] || {}const temp data.data - markLineValconst [name, unit] yName.split( )const nameArr [{name,num: data.data},{name: 基准年 name,num: markLineVal},{name: 对比基准年,num: temp}]return ${nameArr.map((item, i) {return p classenergyChart-itemi classicon stylecolor:${i 3 ? #fff : data.color}${new Array(1).fill().map(() {switch (i) {case 0:return 一case 1:return ···case 2:return temp 0 ? ↑ : ↓}})[0]}/ispan classname${item.name}/spanspan${formatToFixed(item.num)}/spanspan${unit}/span/p}).join()}}myChart.clear()myChart.setOption(option)
}const drawChart (chatDom, n) {let chartDom chatDomif (chartDom null) {return}echarts.dispose(chartDom)myCharts[myChart n] echarts.init(chartDom)myCharts[myChart n].group sameControls;const option {grid: [{top: 29,left: 90,right: 90,height: 100},],axisPointer: {type: shadow,link: {xAxisIndex: all},},tooltip: {trigger: axis,backgroundColor: rgba(61,57,48,0.8),borderColor: rgba(149,149,149,0.8),textStyle: {color: #fff},},xAxis: [{data: [08:00, 09:00, 10:00, 11:00, 12:00, 13:00, 14:00, 15:00, 16:00, 17:00, 18:00, 19:00, 20:00, 21:00, 22:00, 23:00, 00:00, 01:00, 02:00, 03:00, 04:00, 05:00, 06:00, 07:00, 08:00],boundaryGap: false,axisLine: {show: true,onZero: false,},min: dataMin,axisTick: {show: true,alignWithLabel: true,},axisLabel: {show: true,color: rgba(165,166,166,1),fontSize: 12,},}],yAxis: [{name: 度日数单耗 W/m²·℃,offset: 20,nameTextStyle: {padding: [0, 0, 0, -10],color: #fff,fontSize: 14,opacity: 0.7,align: left,fontWeight: normal},nameLocation: end,position: left,axisTick: {show: false},splitLine: {show: true,lineStyle: {type: dashed,color: rgba(52,52,52,1)}},axisLine: {show: false,},axisLabel: {show: true,align: left,showMinLabel: false,color: rgba(165,166,166,1),fontSize: 14,formatter: (val) {switch (true) {case val 1000:return valcase val 1e3 val 1e4:return (val / 1e3).toFixed(1) kdefault:return (val / 1e4).toFixed(1) w}}},},],series: [{name: 度日数单耗,type: line,symbol: image://,data: [-1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, -12, 13, 14, 15, 16, 17, 18, 19, -20, 21, 22, -23, 24],markLine: {symbol: none,silent: true,data: [{yAxis: 5,label: {show: true,position: start,color: rgba(238,145,75,1),}}]},lineStyle: {type: solid}},]}option myCharts[myChart n].setOption(option)
}
/scriptstyle langscss scoped
.energyChart {width: 100%;height: 175px;margin-top: 5px;
}
/style
style langscss
.energyChart-item {display: flex;align-items: center;margin: 10px 0;:last-child {margin-bottom: 0;}.icon {display: inline-block;width: 12px;text-align: center;margin-right: 10px;}.name {display: inline-block;width: 120px;margin-right: 20px;}
}
/style
