VisActor/VTable - 快速搭建表格

        VTable源于VisActor体系，该体系是从字节跳动大量可视化场景沉淀而来，旨在提供面向叙事的智能可视化解决方案。VisActor包括渲染引擎、可视化语法、数据分析组件、图表组件、表格组件、GIS组件、图可视化组件、智能组件等多个模块，以及周边生态组成的可视化解决方案。VTable作为其中的表格组件库，基于可视化渲染引擎VRender进行封装，专为处理复杂的多维数据分析而设计。

一、应用场景与优势

        VTable广泛应用于各种需要数据分析和展示的场景中，如企业报表、数据分析平台、商业智能（BI）工具等。通过VTable，用户可以轻松构建出复杂的多维表格，实现数据的快速分析和可视化展示。其优势在于高性能、多维分析能力以及灵活的配置与定制选项，这些特点使得VTable成为数据分析师和开发人员在进行复杂数据分析时的有力工具。

二、表格构成与配置

        VTable的表格由五部分组成，分别是行表头、列表头、角表头、body数据单元格和框架。不同形态的表格在构成上可能有所差异，但基本结构相似。

  • 行表头：显示在表格左侧，主要显示行维度信息的描述。
  • 列表头：位于表格顶部，主要展示列维度信息的描述。
  • 角表头：位于表格的左上角，用于显示行表头和列表头的交集信息。
  • body数据单元格：表格最主要的显示数据的部分，展示了表格内的详细数据。
  • 框架：表格的整体外边框，可以通过配置来改变其样式。

        在使用VTable构建多维表格时，用户需要配置相应的参数。例如，通过“rows”定义行维度的字段，通过“columns”定义列维度的字段，通过“indicators”定义要展示的指标（如销售额、成本等），通过“dataConfig”配置数据处理的相关参数（如聚合规则、排序规则、过滤规则等），以及通过“theme”配置表格的整体样式（包括边框、颜色、字体等）。

三、快速上手

        VTable 是一款简单易用、高性能、可视化类型丰富的前端可视化表格库。本章将介绍如何使用 VTable 绘制一个简单的基本表格。

3.1 获取VTable

1）使用NPM包

        首先，需要在项目根目录下使用以下命令安装 VTable，代码如下：

# 使用 npm 安装
npm install @visactor/vtable# 使用 yarn 安装
yarn add @visactor/vtable

2）使用CDN

        可以通过 CDN 获取构建好的 VTable 文件。代码如下：

<script src="https://unpkg.com/@visactor/vtable/dist/vtable.min.js"></script>
<script>const tableInstance = new VTable.ListTable(option);
</script>

3.2 引入VTable

1）通过 NPM 包引入

        在 JavaScript 文件顶部使用 import 引入 VTable，代码如下：

import * as VTable from '@visactor/vtable';or;import { ListTable, PivotTable, TYPES, themes } from '@visactor/vtable';

2）使用 script 标签引入

        直接在 HTML 文件中添加 <script> 标签，引入构建好的 vtable 文件，代码如下：

<script src="https://unpkg.com/@visactor/vtable/dist/vtable.min.js"></script>
<script>const tableInstance = new VTable.ListTable(option);
</script>

四、绘制表格

        在绘图前需要注意 VTable 的 DOM 容器，保证容器的宽高值为整数，VTable 内部逻辑中会用到容器的 offsetWidth、offsetHeight、clientWidth、clientHeight 属性，如果容器的 width 和 height 为小数会造成取值有误差，可能产生表格抖动问题。

4.1 绘制基本表格

        这里使用的是Vue2的开发环境，要使用npm包安装和引入VTable，可以按照上述的NPM方式进行操作。

4.1.1 模拟数据

        在Vue项目中创建data.json文件，用于存储表格的模拟数据。代码如下：

[{"id": 1,"orderId": "CA-2018-156720","customer": "JM-15580","productName": "Bagged Rubber Bands"},{"id": 2,"orderId": "CA-2018-115427","customer": "EB-13975","productName": "GBC Binding covers"},{"id": 3,"orderId": "CA-2018-115427","customer": "EB-13975","productName": "Cardinal Slant-D Ring Binder, Heavy Gauge Vinyl"},{"id": 4,"orderId": "CA-2018-123259","customer": "PO-18865","productName": "Wilson Jones Legal Size Ring Binders"},{"id": 5,"orderId": "CA-2018-113259","customer": "PO-18865","productName": "Gear Head AU3700S Headset"},{"id": 6,"orderId": "CA-2018-103259","customer": "PO-18865","productName": "Bush Westfield Collection Bookcases, Fully Assembled"},{"id": 7,"orderId": "CA-2018-126221","customer": "CC-12430","productName": "Eureka The Boss Plus 12-Amp Hard Box Upright Vacuum, Red"},{"id": 8,"orderId": "CA-2018-158526","customer": "KH-16360","productName": "Harbour Creations Steel Folding Chair"},{"id": 9,"orderId": "CA-2018-148526","customer": "KH-16360","productName": "Global Leather and Oak Executive Chair, Black"}
]

4.1.2 创建Vue模板

        在HTML中，为VTable准备一个具备宽高的DOM容器。代码如下：

<template><div class="container" ref="vtable"></div>
</template>
<script>
export default {data () {return {}}
}
</script>
<style lang="less" scoped>
.container {width: 800px;height: 500px;
}
</style>

4.1.3 VTable实例

        在Script中，引入VTable和data.json模拟数据，并在mounted周期函数中，创建VTable实例，并传入表格的配置项。代码如下：

<template><div class="container" ref="vtable"></div>
</template>
<script>
import * as VTable from '@visactor/vtable'
import TestData from './data/data.json'
export default {data () {return {tableInstance: null,options: {records: TestData,columns: [{field: 'orderId', title: '订单ID', width: 'auto'},{field: 'customer', title: '客户ID', width: 'auto'},{field: 'productName', title: '产品名称', width: 'auto'}],widthMode: 'standard'}}},mounted () {this.tableInstance = new VTable.ListTable(this.$refs['vtable'], this.options)}
}
</script>
<style lang="less" scoped>
.container {width: 800px;height: 500px;
}
</style>

        页面效果如下图：

4.2 widthMode

        表格列宽度的计算模式，可以是 'standard'（标准模式）、'adaptive'（自适应容器宽度模式）或 'autoWidth'（自动宽度模式），默认为 'standard'。

  • 'standard'：使用 width 属性指定的宽度作为列宽度。
  • 'adaptive'：使用表格容器的宽度分配列宽度。
  • 'autoWidth'：根据列头和 body 单元格中内容的宽度自动计算列宽度，忽略 width 属性的设置。

4.2.1 autoWidth模式

        开启自动列宽 widthMode:'autoWidth'或者 columns 中设置了 width:'auto'，如刚“4.1.3 VTable实例”中配置项中通过columns设置width: 'auto'，这里修改为widthMode: 'autoWidth'，代码如下：

<template><div class="container" ref="vtable"></div>
</template>
<script>
import * as VTable from '@visactor/vtable'
import TestData from './data/data.json'
export default {data () {return {tableInstance: null,options: {records: TestData,columns: [{field: 'orderId', title: '订单ID'},{field: 'customer', title: '客户ID'},{field: 'productName', title: '产品名称'}],widthMode: 'autoWidth'}}},mounted () {this.tableInstance = new VTable.ListTable(this.$refs['vtable'], this.options)}
}
</script>
<style lang="less" scoped>
.container {width: 800px;height: 500px;
}
</style>

        效果如下图：

4.2.2 adaptive模式

        如上图可见，虽然列的宽度开启了自适应，但是并未根据容器的宽度进行分配。所以，这里将widthMode设置为adaptive，代码如下：

<template><div class="container" ref="vtable"></div>
</template>
<script>
import * as VTable from '@visactor/vtable'
import TestData from './data/data.json'
export default {data () {return {tableInstance: null,options: {records: TestData,columns: [{field: 'orderId', title: '订单ID'},{field: 'customer', title: '客户ID'},{field: 'productName', title: '产品名称'}],widthMode: 'adaptive'}}},mounted () {this.tableInstance = new VTable.ListTable(this.$refs['vtable'], this.options)}
}
</script>
<style lang="less" scoped>
.container {width: 800px;height: 500px;
}
</style>

        效果如下图：

4.3 heightMode

        表格行高的计算模式，可以是 'standard'（标准模式）、'adaptive'（自适应容器高度模式）或 'autoHeight'（自动行高模式），默认为 'standard'。

  • 'standard'：采用 defaultRowHeight 及 defaultHeaderRowHeight 作为行高。
  • 'adaptive'：使用容器的高度分配每行高度，基于每行内容计算后的高度比例来分配。
  • 'autoHeight'：根据内容自动计算行高，计算依据 fontSize 和 lineHeight(文字行高)，以及 padding。相关搭配设置项autoWrapText自动换行，可以根据换行后的多行文本内容来计算行高。

4.3.1 adaptive模式

        同样，将heightMode设置为adaptive，表格的行高也会根据容器的调度进行分配。代码如下：

<template><div class="container" ref="vtable"></div>
</template>
<script>
import * as VTable from '@visactor/vtable'
import TestData from './data/data.json'
export default {data () {return {tableInstance: null,options: {records: TestData,columns: [{field: 'orderId', title: '订单ID'},{field: 'customer', title: '客户ID'},{field: 'productName', title: '产品名称'}],widthMode: 'adaptive',heightMode: 'adaptive'}}},mounted () {this.tableInstance = new VTable.ListTable(this.$refs['vtable'], this.options)}
}
</script>
<style lang="less" scoped>
.container {width: 800px;height: 500px;
}
</style>

        效果如下图：

五、theme主题

        表格主题，其中内置主题名称有 DEFAULT, ARCO, BRIGHT, DARK, SIMPLIFY，具体配置方式可用内置类型或者直接使用字符串名称配置：       

    VTable.themes.DEFAULTVTable.themes.ARCO;VTable.themes.BRIGHTVTable.themes.DARKVTable.themes.SIMPLIFYor'default''arco''bright''dark''simplify' 

5.1 修改主题

        为适应数据大屏的暗黑模式，也可以满足用户在性能、可读性和定制化方面的需求。故可以使用VTable中内置主题，将表格修改为暗黑模式。代码如下：

<template><div class="container" ref="vtable"></div>
</template>
<script>
import * as VTable from '@visactor/vtable'
import TestData from './data/data.json'
export default {data () {return {tableInstance: null,options: {records: TestData,columns: [{field: 'orderId', title: '订单ID'},{field: 'customer', title: '客户ID'},{field: 'productName', title: '产品名称'}],widthMode: 'adaptive',heightMode: 'adaptive',theme: VTable.themes.DARK}}},mounted () {this.tableInstance = new VTable.ListTable(this.$refs['vtable'], this.options)}
}
</script>
<style lang="less" scoped>
.container {width: 800px;height: 500px;
}
</style>

        效果如下图：

5.2 主题的扩展

        同时可以基于内置主题进行扩展，例如想基于 DARK 主题将表格圆角去除，以及外边框设置为虚线。

        在 VTable 中，可以通过 borderLineDash 属性来设置表格线条为虚线。borderLineDash 是一个数组，用于定义虚线的样式，其中包含两个值：第一个值表示虚线的长度，第二个值表示虚线之间的间隔。代码如下：

<template><div class="container" ref="vtable"></div>
</template>
<script>
import * as VTable from '@visactor/vtable'
import TestData from './data/data.json'
export default {data () {return {tableInstance: null,options: {records: TestData,columns: [{field: 'orderId', title: '订单ID'},{field: 'customer', title: '客户ID'},{field: 'productName', title: '产品名称'}],widthMode: 'adaptive',heightMode: 'adaptive',theme: VTable.themes.DARK.extends({frameStyle: {cornerRadius: 0,borderLineDash: [5, 5] // 虚线样式，表示虚线长度为5，间隔为5}})}}},mounted () {this.tableInstance = new VTable.ListTable(this.$refs['vtable'], this.options)}
}
</script>
<style lang="less" scoped>
.container {width: 800px;height: 500px;
}
</style>

        通过borderLineDash这种方式，可以轻松地将 VTable 的表格线条设置为虚线。如下图：

六、列的层级结构

        在 VTable 中设置合并列头，可以通过定义列的层级结构来实现。具体方法是在columns列数据中增加 columns 子数组属性来定义子列，从而实现多级表头的合并效果。

6.1 更新数据

        在模拟数据中添加用户名称，并且将姓名分为姓和名两部分。数据如下：

[{"id": 1,"orderId": "CA-2018-156720","customer": "JM-15580","productName": "Bagged Rubber Bands","firstName": "王","lastName": "小明"},{"id": 2,"orderId": "CA-2018-115427","customer": "EB-13975","productName": "GBC Binding covers","firstName": "李","lastName": "红光"},{"id": 3,"orderId": "CA-2018-115427","customer": "EB-13975","productName": "Cardinal Slant-D Ring Binder, Heavy Gauge Vinyl","firstName": "孙","lastName": "旺"},{"id": 4,"orderId": "CA-2018-123259","customer": "PO-18865","productName": "Wilson Jones Legal Size Ring Binders","firstName": "童","lastName": "大牛"},{"id": 5,"orderId": "CA-2018-113259","customer": "PO-18865","productName": "Gear Head AU3700S Headset","firstName": "杨","lastName": "红"},{"id": 6,"orderId": "CA-2018-103259","customer": "PO-18865","productName": "Bush Westfield Collection Bookcases, Fully Assembled","firstName": "王","lastName": "順"},{"id": 7,"orderId": "CA-2018-126221","customer": "CC-12430","productName": "Eureka The Boss Plus 12-Amp Hard Box Upright Vacuum, Red","firstName": "刘","lastName": "大年"},{"id": 8,"orderId": "CA-2018-158526","customer": "KH-16360","productName": "Harbour Creations Steel Folding Chair","firstName": "朱","lastName": "棣"},{"id": 9,"orderId": "CA-2018-148526","customer": "KH-16360","productName": "Global Leather and Oak Executive Chair, Black","firstName": "章","lastName": "红光"}
]

6.2 合并列头

        以下示例代码，展示如何设置合并列头：

<template><div class="container" ref="vtable"></div>
</template>
<script>
import * as VTable from '@visactor/vtable'
import TestData from './data/data.json'
export default {data () {return {tableInstance: null,options: {records: TestData,columns: [{field: 'orderId', title: '订单ID'},{field: 'customer', title: '客户ID'},{title: '姓名',columns: [{field: 'firstName', title: '姓', width: '50px'},{field: 'lastName', title: '名'}]},{field: 'productName', title: '产品名称', width: '200px'}],widthMode: 'adaptive',heightMode: 'adaptive',theme: VTable.themes.DARK.extends({frameStyle: {cornerRadius: 0,borderLineDash: [5, 5]}})}}},mounted () {this.tableInstance = new VTable.ListTable(this.$refs['vtable'], this.options)}
}
</script>
<style lang="less" scoped>
.container {width: 800px;height: 500px;
}
</style>

        效果如下图：

说明：

  • 多级表头结构：通过在 columns 中定义 columns 属性，可以创建多级表头。
  • 字段绑定：子列的 field 属性需要与数据源中的字段对应，以确保数据能够正确显示。
  • 通过这种方式，可以灵活地实现表头的合并和分组效果。

        注意：VTable的API和用法可能会随着版本的更新而发生变化，因此，建议查阅最新的VTable官方文档 ，地址：VTable —— 不只是高性能的多维数据分析表格，更是行列间创作的方格艺术家，以获取最准备的信息。

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

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

相关文章

c++第一课（基础c）

c++第一课（基础c）

目录 1.开场白 2.char&#xff08;字符&#xff09; 3.字符数组 4.ASCII码 1.开场白 OK&#xff0c;咱们也是亿&#xff08;不是作者故意的&#xff09;天没见&#xff0c;话不多说&#xff0c;直接开始&#xff01; 2.char&#xff08;字符&#xff09; 众所不周知&…
阅读更多...
2025年02月21日Github流行趋势

2025年02月21日Github流行趋势

项目名称&#xff1a;source-sdk-2013 项目地址url&#xff1a;https://github.com/ValveSoftware/source-sdk-2013项目语言&#xff1a;C历史star数&#xff1a;7343今日star数&#xff1a;929项目维护者&#xff1a;JoeLudwig, jorgenpt, narendraumate, sortie, alanedwarde…
阅读更多...
【简单】209.长度最小的子数组

【简单】209.长度最小的子数组

题目描述 给定一个含有 n 个正整数的数组和一个正整数 target 。 找出该数组中满足其总和大于等于 target 的长度最小的 子数组 [numsl, numsl1, …, numsr-1, numsr] &#xff0c;并返回其长度。如果不存在符合条件的子数组&#xff0c;返回0。 示例 1&#xff1a; 输入&am…
阅读更多...
【STM32】内存管理

【STM32】内存管理

【STM32】内存管理 文章目录 【STM32】内存管理1、内存管理简介疑问&#xff1a;为啥不用标准的 C 库自带的内存管理算法&#xff1f;2、分块式内存管理&#xff08;掌握&#xff09;分配方向分配原理释放原理分块内存管理 管理内存情况 3、内存管理使用&#xff08;掌握&#…
阅读更多...
Linux 命令大全完整版（14）

Linux 命令大全完整版（14）

5. 文件管理命令 chgrp(change group) 功能说明&#xff1a;变更文件或目录的所属群组。语　　法&#xff1a;chgrp [-cfhRv][–help][–version][所属群组][文件或目录…] 或 chgrp [-cfhRv][–help][–version][–reference<参考文件或目录>][文件或目录…]补充说明&…
阅读更多...
[数据结构]顺序表详解

[数据结构]顺序表详解

目录 一.线性表 二.顺序表 2.1概念及结构 1. 静态顺序表&#xff1a;使用定长数组存储元素。 2. 动态顺序表&#xff1a;使用动态开辟的数组存储。 2.1按需申请 2.2 接口实现&#xff1a;增删查改 SeqList.h: SeqList.c: test.c 一.线性表 线性表 &#xff08; line…
阅读更多...
綫性與非綫性泛函分析與應用_2.賦范向量空間-母本

綫性與非綫性泛函分析與應用_2.賦范向量空間-母本

第2章 賦范向量空間 1.向量空間；哈默爾基；向量空間的維數 - 定義與性質 - 向量空間的定義：設\mathbb{K}為數域，集合X是\mathbb{K}上的向量空間，若在X上定義了加法(x,y)\in X\times X\to x + y\in X和數乘(\alpha,x)\in\mathbb{K}\times X\to\alpha x\in X兩種運算，且滿足…
阅读更多...
2025年- G17-Lc91-409.最长回文-java版

2025年- G17-Lc91-409.最长回文-java版

1.题目描述 2.思路 思路1: 判断一个字符串中的字母个数是否是偶数个。 遍历字符串&#xff0c;检查每个字符是否是字母&#xff08;可以通过 Character.isLetter() 来判断&#xff09;。 累加字母的个数。 最后判断字母的个数是否是偶数。 思路2: 这段 Java 代码的作用是 统…
阅读更多...
SpringBoot+Mybatis-Plus实现动态数据源

SpringBoot+Mybatis-Plus实现动态数据源

目录 一、前言二、代码实现1&#xff09;工程结构2&#xff09;相关依赖3&#xff09;数据源拦截切面4&#xff09;动态数据源切换5&#xff09;核心配置类6&#xff09;使用 三、原理分析1&#xff09;mapper接口注入流程2&#xff09;动态数据源切换执行流程 四、声明式事务导…
阅读更多...
玩转 Java 与 Python 交互，JEP 库来助力

玩转 Java 与 Python 交互，JEP 库来助力

文章目录 玩转 Java 与 Python 交互&#xff0c;JEP 库来助力一、背景介绍二、JEP 库是什么&#xff1f;三、如何安装 JEP 库&#xff1f;四、JEP 库的简单使用方法五、JEP 库的实际应用场景场景 1&#xff1a;数据处理场景 2&#xff1a;机器学习场景 3&#xff1a;科学计算场…
阅读更多...
Qt常用控件之日历QCalendarWidget

Qt常用控件之日历QCalendarWidget

日历QCalendarWidget QCalendarWidget 是一个日历控件。 QCalendarWidget属性 属性说明selectDate当前选中日期。minimumDate最小日期。maximumDate最大日期。firstDayOfWeek设置每周的第一天是周几&#xff08;影响日历的第一列是周几&#xff09;。gridVisible是否显示日历…
阅读更多...
三数之和：经典问题的多种优化策略

三数之和：经典问题的多种优化策略

三数之和&#xff1a;经典问题的多种优化策略 大家好&#xff0c;我是Echo_Wish。今天我们来聊一个经典的算法问题——三数之和&#xff08;3Sum&#xff09;。它是许多面试和算法竞赛中常见的问题之一&#xff0c;也常常考察我们对算法优化的理解和技巧。我们不仅要解决问题&…
阅读更多...
Go 语言中的协程

Go 语言中的协程

概念 Go语言中的协程&#xff08;Goroutine&#xff09;是一种由Go运行时管理的轻量级线程。它是Go语言并发模型的核心&#xff0c;旨在通过简单、易用的方式支持高并发的程序设计。 创建协程 协程的创建非常简单&#xff0c;只需要使用go关键字&#xff0c;后面跟着一个函数…
阅读更多...
JAVA最新版本详细安装教程（附安装包）

JAVA最新版本详细安装教程（附安装包）

目录 文章自述 一、JAVA下载 二、JAVA安装 1.首先在D盘创建【java/jdk-23】文件夹 2.把下载的压缩包移动到【jdk-23】文件夹内&#xff0c;右键点击【解压到当前文件夹】 3.如图解压会有【jdk-23.0.1】文件 4.右键桌面此电脑&#xff0c;点击【属性】 5.下滑滚动条&…
阅读更多...
基于javaweb的SpringBoot个人博客系统设计和实现(源码+文档+部署讲解）

基于javaweb的SpringBoot个人博客系统设计和实现(源码+文档+部署讲解）

技术范围&#xff1a;SpringBoot、Vue、SSM、HLMT、Jsp、PHP、Nodejs、Python、爬虫、数据可视化、小程序、安卓app、大数据、物联网、机器学习等设计与开发。 主要内容&#xff1a;免费功能设计、开题报告、任务书、中期检查PPT、系统功能实现、代码编写、论文编写和辅导、论…
阅读更多...
三、linux字符驱动详解

三、linux字符驱动详解

在上一节完成NFS开发环境的搭建后&#xff0c;本节将探讨Linux字符设备驱动的开发。字符设备驱动作为Linux内核的重要组成部分&#xff0c;主要负责管理与字符设备&#xff08;如串口、键盘等&#xff09;的交互&#xff0c;并为用户空间程序提供统一的读写操作接口。 驱动代码…
阅读更多...
Python爬虫处理网页中的动态内容

Python爬虫处理网页中的动态内容

文章目录 前言一、Python环境搭建1.Python安装2.选择Python开发环境 二、Python爬虫处理网页中的动态内容1. 使用 Selenium 库2. 使用 Pyppeteer 库3. 分析 API 请求 前言 在网页中&#xff0c;动态内容通常是指那些通过 JavaScript 在页面加载后动态生成或更新的内容&#xf…
阅读更多...
重学SpringBoot3-Spring Retry实践

重学SpringBoot3-Spring Retry实践

更多SpringBoot3内容请关注我的专栏&#xff1a;《SpringBoot3》 期待您的点赞??收藏评论 重学SpringBoot3-Spring Retry实践 1. 简介2. 环境准备3. 使用方式 3.1 注解方式 基础使用自定义重试策略失败恢复机制重试和失败恢复效果注意事项 3.2 编程式使用3.3 监听重试过程 监…
阅读更多...
vue3中解决组件间 css 层级问题最佳实践（Teleport的使用）

vue3中解决组件间 css 层级问题最佳实践（Teleport的使用）

定义&#xff1a; <Teleport> 是 Vue 3 中引入的一个内置组件&#xff0c;用于将组件的内容渲染到 DOM 中的指定位置&#xff0c;而不受组件层级结构的限制。这在处理模态框、通知、下拉菜单等需要脱离当前组件层级的情况下非常有用。 通俗来说&#xff0c;Teleport的功…
阅读更多...
密度提升30％！Intel 18A工艺正式开放代工

密度提升30％！Intel 18A工艺正式开放代工

快科技2月23日消息&#xff0c;Intel官方网站悄然更新了对于18A(1.8nm级)工艺节点的描述&#xff0c;称已经做好了迎接客户项目的准备&#xff0c;将在今年上半年开始流片&#xff0c;有需求的客户可以随时联系。 Intel宣称&#xff0c;这是在北美地区率先量产的2nm以下工艺节…
阅读更多...
最新文章

Copyright @ 2022~2023