格式化Echarts的X轴显示，设置显示间隔

业务需求：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.00'item.tempValue2 = Number(varr[index + 8]).toFixed(2) || '0.00'item.tempValue3 = Number(varr[index + 16]).toFixed(2) || '0.00'})}})},

当表格的数据修改后，需要重新把表格数据再提取成数组，赋值给Y轴

     <!-- 表格设置 --><vxe-table border stripe :data="timeTempTable" :edit-config="{ trigger: 'click', mode: 'cell' }"><vxe-column field="timeName1" title="时间" width="60" align="center"></vxe-column><vxe-column field="tempValue1" title="温度℃" width="90" align="center" :edit-render="{ autofocus: '' }"><template #edit="{ row }"><vxe-input v-model="row.tempValue1" type="float" digits="2" :min="-100" :max="100"placeholder="0.00"></vxe-input></template></vxe-column><vxe-column field="timeName2" title="时间" width="60" align="center"></vxe-column><vxe-column field="tempValue2" title="温度℃" width="90" align="center":edit-render="{ autofocus: '.vxe-input--inner' }"><template #edit="{ row }"><vxe-input v-model="row.tempValue2" type="float" digits="2" :min="-100" :max="100"placeholder="0.00"></vxe-input></template></vxe-column><vxe-column field="timeName3" title="时间" width="60" align="center"></vxe-column><vxe-column field="tempValue3" title="温度℃" width="90" align="center":edit-render="{ autofocus: '.vxe-input--inner' }"><template #edit="{ row }"><vxe-input v-model="row.tempValue3" type="float" digits="2" :min="-100" :max="100"placeholder="0.00"></vxe-input></template></vxe-column></vxe-table><Echart :options="lineChartData" ref="echartRef" />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.00'item.tempValue2 = Number(varr[index + 8]).toFixed(2) || '0.00'item.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.00'const temp2 = obj.tempValue2 || '0.00'const temp3 = obj.tempValue3 || '0.00'result1.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,})

本文来自互联网用户投稿，该文观点仅代表作者本人，不代表本站立场。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如若转载，请注明出处：http://www.mzph.cn/news/228337.shtml

如若内容造成侵权/违法违规/事实不符，请联系多彩编程网进行投诉反馈email:809451989@qq.com，一经查实，立即删除！

相关文章

分面中添加不同表格

分面中添加不同表格

简介 关于分面的推文&#xff0c;小编根据实际科研需求&#xff0c;已经分享了很多技巧。例如&#xff1a; 分面一页多图 基于分面的面积图绘制 分面中的细节调整汇总 分面中添加不同的直线 基于分面的折线图绘制 最近遇到了另一个需求&#xff1a;在分面中添加不同的表…
阅读更多...
k8s 安装firewalld导致的网络疑难问题处理

k8s 安装firewalld导致的网络疑难问题处理

场景 ubuntu 操作系统，部署了k8s集群，n 台 机器，某些机器之间 telnet ip 10250不通。 ufw 是关闭的，然后抓包会看到如下错误 04:43:09.154362 IP 192.168.1.3.56608 > 192.168.1.183.8000: Flags [S], seq 3664350430, win 64240, options [mss 1460,sackOK,TS val 281…
阅读更多...
计算机网络（四）

计算机网络（四）

九、网络安全 &#xff08;一&#xff09;什么是网络安全&#xff1f; A、网络安全状况 分布式反射攻击逐渐成为拒绝攻击的重要形式 涉及重要行业和政府部门的高危漏洞事件增多。 基础应用和通用软硬件漏洞风险凸显&#xff08;“心脏出血”&#xff0c;“破壳”等&#x…
阅读更多...
Content-Type是什么

Content-Type是什么

目录 Content-Type是什么 获取方式 设置方式 常见类型 application/x-www-form-urlencoded multipart/form-data application/json text/xml text/html text/plain Content-Type是什么 Content-Type出现在请求标头和响应标头中&#xff0c;意思是内容类型&#xff0…
阅读更多...
LOF基金跟股票一样吗？

LOF基金跟股票一样吗？

LOF基金&#xff0c;全称为"上市型开放式基金"&#xff0c;是一种可以在上海证券交易所认购、申购、赎回及交易的开放式证券投资基金。投资者可以通过上海证券交易所场内证券经营机构或场外基金销售机构进行认购、申购和赎回基金份额。 LOF基金的特点是既可以像股票…
阅读更多...
论文阅读——GroupViT

论文阅读——GroupViT

GroupViT: Semantic Segmentation Emerges from Text Supervision 一、思想 把Transformer层分为多个组阶段grouping stages&#xff0c;每个stage通过自注意力机制学习一组tokens&#xff0c;然后使用学习到的组tokens通过分组模块Grouping Block融合相似的图片tokens。通过这…
阅读更多...
2.5【渲染】Blitting

2.5【渲染】Blitting

一，Blit的概念 Blit是一种计算机图形学中常用的数据操作，基础原理是使多个位图通过布尔函数（boolean function）组合成一个新位图。在U3D中，常说的Blit其实是渲染后期的一个概念，它将摄像机渲染好的一个图的所有像素点，通过各种形式的运算，然后重新绘制到屏幕。这种达到…
阅读更多...
【docker 】基于Dockerfile创建镜像

【docker 】基于Dockerfile创建镜像

Dockerfile文档 Dockerfile文档地址 Dockerfile 是一个用来构建镜像的文本文件&#xff0c;文本内容包含了一条条构建镜像所需的指令和说明。 DockerFile 可以说是一种可以被 Docker 程序解释的脚本&#xff0c;DockerFile 是由一条条的命令组成的&#xff0c;每条命令对应 …
阅读更多...
LCR 181. 字符串中的单词反转

LCR 181. 字符串中的单词反转

解题思路&#xff1a; class Solution {public String reverseMessage(String message) {message message.trim(); // 删除首尾空格int j message.length() - 1, i j;StringBuilder res new StringBuilder();while (i > 0) {while (i >…
阅读更多...
极智一周 | 两系列汇总、MI300X、H100、特供芯片、GPT-4、火灾检测、酷睿Ultra And so on

极智一周 | 两系列汇总、MI300X、H100、特供芯片、GPT-4、火灾检测、酷睿Ultra And so on

欢迎关注我的公众号 [极智视界]&#xff0c;获取我的更多技术分享 大家好&#xff0c;我是极智视界&#xff0c;带来本周的 [极智一周]&#xff0c;关键词&#xff1a;两系列汇总、MI300X、H100、特供芯片、GPT-4、火灾检测、酷睿Ultra And so on。 邀您加入我的知识星球「极智…
阅读更多...
数据分析为何要学统计学（2）——如何估计总体概率分布

数据分析为何要学统计学（2）——如何估计总体概率分布

明确总体的概率分布类型及参数是进行数据分析的基础&#xff0c;这项工作称为分布推断与参数估计。在总体分布及其参数不明确的情况下&#xff0c;我们可以利用手头掌握的样本来完成这项工作。具体过程由以下步骤组成。 第一步&#xff0c;样本统计特性直观估计 我们采用Seab…
阅读更多...
在ViewPager下面加圆点指示（使用selector方式）

在ViewPager下面加圆点指示（使用selector方式）

前面讲了如何使用ViewPager来做多个可滑动的页面。今天在页面的下面加上一排小圆点&#xff0c;用于指示当前在第几页。效果如下&#xff08;请忽略颜色和图案&#xff09;&#xff1a; 一、产生一个小圆点的视图 1、在drawable下产生一个选中和不选中颜色不同的小圆点形状&am…
阅读更多...
1- Electron 创建项目、初始化项目

1- Electron 创建项目、初始化项目

Electron官网 Build cross-platform desktop apps with JavaScript, HTML, and CSS | Electron Electron 初始化 初始化项目 - 构造package.json npm init -y 安装Electron模块包 npm i electron -D // 注意&#xff01;如果报错查看node包是否太高 配置启动脚本 {&quo…
阅读更多...
SQL、Jdbc、JdbcTemplate、Mybatics

SQL、Jdbc、JdbcTemplate、Mybatics

数据库&#xff1a;查询&#xff08;show、select&#xff09;、创建&#xff08;create)、使用(use)、删除(drop)数据库 表&#xff1a;创建&#xff08;【字段】约束、数据类型&#xff09;、查询、修改&#xff08;alter *add&#xff09;、删除 DML&#xff1a;增加(inse…
阅读更多...
MySql的增、删、改、查（MySql数据库学习——五）

MySql的增、删、改、查（MySql数据库学习——五）

增&#xff08;数据添加/插入数据&#xff09; 使用 INSERT INTO SQL 语句来插入数据。我们可以通过 mysql> 命令提示窗口中向数据表中插入数据&#xff0c;或者 通过PHP 脚本来插入数据。 sql语句&#xff1a; INSERT INTO table_name ( field1, field2,...fieldN ) …
阅读更多...
AC843. n皇后问题--60

AC843. n皇后问题--60

我们只需要把蓝色的往上移动就行了 if(!col[i][j]&&!dg[ui]&&!udg[])//1y&#xff08;i&#xff09;向下&#xff0c;x&#xff08;u&#xff09;向右为正。yxb的by-x一定>0,y-xb的bxy可能>0,这个不考虑&#xff0c;只看-bxy. 为什么for里面只有一个if呢…
阅读更多...
操作系统期末复习-内存管理

操作系统期末复习-内存管理

一、内存管理 分页存储管理&#xff0c;是将一个进程的逻辑地址空间分成若干个大小相等的片&#xff0c;称为页面或页&#xff0c;并为各页加以编号&#xff0c;从0开始&#xff0c;如第0页、第1页等。相应地&#xff0c;也把内存空间分成与页面相同大小的若干个存储块&#xf…
阅读更多...
QT最大线程并发

QT最大线程并发

声明一个处理函数;int timeTask(); 头文件&#xff1a; #include <QtConcurrent> #include <QFuture> 并发处理改函数的任务&#xff0c;直到处理完成&#xff1a; QFuture<int> ft QtConcurrent::run(this, &ch72_concurrent::timeTask);while (!f…
阅读更多...
Vue学习计划-Vue2--VueCLi（八）vuex统一状态管理实现数据共享

Vue学习计划-Vue2--VueCLi（八）vuex统一状态管理实现数据共享

1. vuex是什么 概念&#xff1a;专门在Vue中实现集中式状态&#xff08;数据&#xff09;管理的一个Vue插件&#xff0c;对Vue应用中多个组件的共享状态进行集中式的管理&#xff08;读/写&#xff09;&#xff0c;也是一种组件间通信的方式&#xff0c;且适用于任意组件间通信…
阅读更多...
【Unity入门】物体5种移动方法

【Unity入门】物体5种移动方法

目录 一、通过修改位置来实现移动二、通过物理系统实现位移三、通过CharacterController组件四、通过输入控制物体移动 一、通过修改位置来实现移动 利用修改Transform组件的position的两种常用方法。 使用Translate&#xff08;&#xff09;函数 /*物体将向x方向移动1.5单位…
阅读更多...
最新文章

Copyright @ 2022~2023