鄂州网站设计制作,电子行业网站建设,温州建设局网站,wordpress停用react业务需求#xff1a;x轴间隔4个显示#xff0c;并且末尾显示23时 x轴为写死的0时-23时#xff0c;使用Array.from data: Array.from({ length: 24 }).map((_, i) ${i}时) 需要在axisLabel 里使用 interval: 0, // 强制显示所有刻度标签#xff0c;然后通过 formatter … 业务需求x轴间隔4个显示并且末尾显示23时 x轴为写死的0时-23时使用Array.from data: Array.from({ length: 24 }).map((_, i) ${i}时) 需要在axisLabel 里使用 interval: 0, // 强制显示所有刻度标签然后通过 formatter 函数控制只显示每 4 个刻度和最后一个刻度。 formatter(value, index) { if (index % 4 0 || index 23) { // 每 4 个刻度显示一次最后一个刻度始终显示 return value; } else { return ; } } }, 表格的基础项chartOptions.js import * as echarts from echarts;export function chartOption() {return {title: {text: X时间(h) / Y温度(℃),left: center,top: 0,textStyle: {fontSize: 14,fontFamily: MicrosoftYaHei,// color: #1E5DFF,}},replaceMerge: [series],tooltip: {trigger: axis,axisPointer: {crossStyle: {color: #999}},backgroundColor: ,borderColor: ,textStyle: {color: },formatter(params) {return ${params[0].axisValueLabel}${params[0].value} ℃}},grid: {containLabel: true,top: 30,left: 20,right: 20,bottom: 0},xAxis: [{type: category,axisLine: {onZero: false,lineStyle: {color: ,}},axisTick: {show: false},axisLabel: {textStyle: {color: ,fontSize: 12,fontFamily: PingFangSC-Regular, PingFang SC,fontWeight: 400,lineHeight: 17,},interval: 0, // 强制显示所有刻度标签formatter(value, index) {if (index % 4 0 || index 23) { // 控制每 4 个刻度显示一次最后一个刻度始终显示return value;} else {return ;}}},data: Array.from({ length: 24 }).map((_, i) ${i}时),}],yAxis: [{type: value,name: ℃,nameTextStyle: {padding: [0, -40, -23, -5], // 调整Y轴的单位位置color: ,fontSize: 12,fontFamily: PingFangSC-Regular, PingFang SC,fontWeight: 400,lineHeight: 17,},splitLine: {show: false,},axisTick: {show: false},axisLine: {show: true,lineStyle: {color: ,}},axisLabel: {show: true,textStyle: {color: ,fontSize: 12,fontFamily: PingFangSC-Regular, PingFang SC,fontWeight: 400,lineHeight: 17,}},},],series: [{name: ,type: line,smooth: true, //平滑曲线显示symbol: none, // 去掉圆点lineStyle: {color: #00FFB8,width: 2,},data: []},]}
};表格的数据结构 backupTempTableData: [{ timeName1: 0时, tempValue1: 0.00, timeName2: 8时, tempValue2: 0.00, timeName3: 16时, tempValue3: 00.00 },{ timeName1: 1时, tempValue1: 0.00, timeName2: 9时, tempValue2: 0.00, timeName3: 17时, tempValue3: 00.00 },{ timeName1: 2时, tempValue1: 0.00, timeName2: 10时, tempValue2: 0.00, timeName3: 18时, tempValue3: 00.00 },{ timeName1: 3时, tempValue1: 0.00, timeName2: 11时, tempValue2: 0.00, timeName3: 19时, tempValue3: 00.00 },{ timeName1: 4时, tempValue1: 0.00, timeName2: 12时, tempValue2: 0.00, timeName3: 20时, tempValue3: 00.00 },{ timeName1: 5时, tempValue1: 0.00, timeName2: 13时, tempValue2: 0.00, timeName3: 21时, tempValue3: 00.00 },{ timeName1: 6时, tempValue1: 0.00, timeName2: 14时, tempValue2: 0.00, timeName3: 22时, tempValue3: 00.00 },{ timeName1: 7时, tempValue1: 0.00, timeName2: 15时, tempValue2: 0.00, timeName3: 23时, tempValue3: 00.00 },], 后台请求的数据是一个数组[ ],表示0-23时的数据所以需要把数组的值赋值给表格 [ 45.1, 45.11, 45.12, 45.13, 45.14, 45.15, 45.16, 45.17, 45.18, 45.19, 45.2, 45.21, 45.22, 45.23, 45.24, 45.25, 45.26, 45.27, 45.28, 45.29, 45.3, , , ] initData() {// 请求数据库值getCmdInitData().then(res {const varr res?.data; // []state.backupTempTableData.forEach((item, index) {item.tempValue1 Number(varr[index]).toFixed(2) || 0.00item.tempValue2 Number(varr[index 8]).toFixed(2) || 0.00item.tempValue3 Number(varr[index 16]).toFixed(2) || 0.00})}})}, 当表格的数据修改后需要重新把表格数据再提取成数组赋值给Y轴 !-- 表格设置 --vxe-table border stripe :datatimeTempTable :edit-config{ trigger: click, mode: cell }vxe-column fieldtimeName1 title时间 width60 aligncenter/vxe-columnvxe-column fieldtempValue1 title温度℃ width90 aligncenter :edit-render{ autofocus: }template #edit{ row }vxe-input v-modelrow.tempValue1 typefloat digits2 :min-100 :max100placeholder0.00/vxe-input/template/vxe-columnvxe-column fieldtimeName2 title时间 width60 aligncenter/vxe-columnvxe-column fieldtempValue2 title温度℃ width90 aligncenter:edit-render{ autofocus: .vxe-input--inner }template #edit{ row }vxe-input v-modelrow.tempValue2 typefloat digits2 :min-100 :max100placeholder0.00/vxe-input/template/vxe-columnvxe-column fieldtimeName3 title时间 width60 aligncenter/vxe-columnvxe-column fieldtempValue3 title温度℃ width90 aligncenter:edit-render{ autofocus: .vxe-input--inner }template #edit{ row }vxe-input v-modelrow.tempValue3 typefloat digits2 :min-100 :max100placeholder0.00/vxe-input/template/vxe-column/vxe-tableEchart :optionslineChartData refechartRef /import { chartOption } from ./chartOptions
echartRef: null,
lineChartData: {},
backupTempTableData: [{ timeName1: 0时, tempValue1: 0.00, timeName2: 8时, tempValue2: 0.00, timeName3: 16时, tempValue3: 00.00 },{ timeName1: 1时, tempValue1: 0.00, timeName2: 9时, tempValue2: 0.00, timeName3: 17时, tempValue3: 00.00 },{ timeName1: 2时, tempValue1: 0.00, timeName2: 10时, tempValue2: 0.00, timeName3: 18时, tempValue3: 00.00 },{ timeName1: 3时, tempValue1: 0.00, timeName2: 11时, tempValue2: 0.00, timeName3: 19时, tempValue3: 00.00 },{ timeName1: 4时, tempValue1: 0.00, timeName2: 12时, tempValue2: 0.00, timeName3: 20时, tempValue3: 00.00 },{ timeName1: 5时, tempValue1: 0.00, timeName2: 13时, tempValue2: 0.00, timeName3: 21时, tempValue3: 00.00 },{ timeName1: 6时, tempValue1: 0.00, timeName2: 14时, tempValue2: 0.00, timeName3: 22时, tempValue3: 00.00 },{ timeName1: 7时, tempValue1: 0.00, timeName2: 15时, tempValue2: 0.00, timeName3: 23时, tempValue3: 00.00 },],initData() {// 请求数据库值赋值给表格getCmdInitData().then(res {const varr res?.data; // []state.backupTempTableData.forEach((item, index) {item.tempValue1 Number(varr[index]).toFixed(2) || 0.00item.tempValue2 Number(varr[index 8]).toFixed(2) || 0.00item.tempValue3 Number(varr[index 16]).toFixed(2) || 0.00})}})},// Y轴数据转换为数组getYData(data) {let result1 [];let result2 [];let result3 [];let yData []// 循环遍历每个对象for (const obj of data) {const temp1 obj.tempValue1 || 0.00const temp2 obj.tempValue2 || 0.00const temp3 obj.tempValue3 || 0.00result1.push(temp1);result2.push(temp2);result3.push(temp3);}yData [...result1, ...result2, ...result3]return yData;},}// 监听table数据更新刷新下发命令体内容watch(() state.backupTempTableData,() {state.lineChartData chartOption();let yData methods.getYData(state.backupTempTableData)// console.log(yData, --yData--);set(state.lineChartData, series[0].data, yData); // 设置y轴数据}, {deep: true,})
