当前位置：首页 > news >正文

从零开始：使用 Vue-ECharts 实现数据可视化图表功能

news 来源：原创 2025/7/14 14:50:56

前言

你好，小二！很高兴你愿意分享关于 Vue-ECharts 的使用经验。

📊 Vue-ECharts：让你在 Vue 项目中轻松绘制图表

在前端开发中，经常会遇到需要展示数据可视化的需求，比如柱状图、折线图、饼图等。这类需求不仅要求我们准确地将数据呈现出来，还需要兼顾美观与交互体验。这时候，一个强大的图表库就显得尤为重要。

今天我们就来聊聊——Vue-ECharts，它是一个基于 Apache ECharts 和 Vue.js 的封装库，能够帮助我们在 Vue 项目中更高效地实现各种类型的图表展示。

🌟 为什么选择 Vue-ECharts？

1. 基于 ECharts，功能强大

ECharts 是由百度开源的一款非常流行的可视化图表库，支持丰富的图表类型（如柱状图、饼图、地图、雷达图等）以及强大的交互功能。Vue-ECharts 正是基于 ECharts 构建，因此继承了它的全部能力。

2. 更符合 Vue 开发习惯

Vue-ECharts 对 ECharts 进行了组件化封装，使得开发者可以像使用普通 Vue 组件一样使用图表，代码结构更加清晰，也更容易维护。

3. 支持响应式数据绑定

借助 Vue 的响应式系统，当你的数据发生变化时，图表会自动更新，无需手动调用 setOption 等方法，大大提升了开发效率。

4. 易于集成与动态更新

你可以将图表作为组件嵌入到任意页面或模块中，并通过 props 动态传递数据或配置项，实现图表的实时更新和交互控制。

🧱 实战示例：快速上手 Vue-ECharts

为了让大家更好地理解 Vue-ECharts 的使用方式，我们以一个简单的柱状图为例，带你一步步实现。

✅ 安装依赖

npm install vue-echarts echarts

✅ 引入并注册组件

// main.js 或组件内引入均可
import { defineComponent } from 'vue'
import { BarChart } from 'vue-echarts'export default defineComponent({components: {BarChart}
})

✅ 在模板中使用

<template><bar-chart :data="chartData" :settings="chartSettings" />
</template>

✅ 准备数据和配置

<script setup>
import { ref } from 'vue'const chartData = ref({columns: ['月份', '销售额'],rows: [{ 月份: '一月', 销售额: 120 },{ 月份: '二月', 销售额: 200 },{ 月份: '三月', 销售额: 180 },{ 月份: '四月', 销售额: 250 },{ 月份: '五月', 销售额: 300 }]
})const chartSettings = ref({})
</script>

通过以上步骤，你就可以在 Vue 项目中快速渲染出一个柱状图了。是不是比原生写法简单很多？而且代码逻辑更清晰，维护起来也更方便！

📌 小结

相比直接使用 ECharts，Vue-ECharts 提供了更好的组件化体验和更自然的响应式数据绑定机制，尤其适合在 Vue 项目中进行图表开发。虽然语法上与原版略有不同，但掌握之后能显著提升开发效率。

如果你正在寻找一种在 Vue 中快速构建图表的方式，不妨试试 Vue-ECharts。它不仅能满足你的基本需求，还能支持高级定制和交互功能。

案例：Vue-Echart开发一个分组柱状图

安装依赖

首先，我们需要在 Vue 项目中安装 Vue-ECharts 以及 ECharts：

npm install vue-echarts echarts

注意，这两个都要安装，只安装vue-echarts是不行的。

引入

全局引入

你可以在 main.js中，进行全局引入。

如果你是 Echarts 4.x，可以这样写：

// 引入 Echarts 4.x
import echarts from 'echarts'
Vue.prototype.$echarts = echarts

如果是 5.x，可以这样写：

// 引入 Echarts 5.x
import * as echarts from 'echarts'
Vue.prototype.$echarts = echarts

// 引入vue-echarts
import ECharts from 'vue-echarts'
Vue.component('v-chart', ECharts)

按需引入

你也可以在单个页面或者组件中，局部引入你所需要的组件。比方说这里的案例是柱状图，我可以这样写：

// 从 echarts/core 导入必要的函数和组件
import { use, graphic } from 'echarts/core'// 导入用于在画布上渲染图表的渲染器
import { CanvasRenderer } from 'echarts/renderers'// 导入你想要使用的图表类型，在这里是柱状图
import { BarChart } from 'echarts/charts'// 导入图表的各种组件，如标题、提示和图例
import { TitleComponent, TooltipComponent, LegendComponent } from 'echarts/components'// 从 vue-echarts 导入 VChart 组件用于 Vue 集成
import VChart from 'vue-echarts'// 注册导入的组件到 echarts 中
use([CanvasRenderer, BarChart, TitleComponent, TooltipComponent, LegendComponent])

按需引入需要你对每个模块有一定的了解，比方说柱状图是属于BarChart，需要用到标题、图例组件等，如果是其他类型的图表，引入的组件会有所不同。

编写组件

除了上面的引入，其他的写法跟 Echarts 大差不差，一个简单的组件示例如下：

<v-chart autoresize :data="data" :option="defaultOption" />

data代表传入的数据，option 表示配置项，:auto-resize="true"代表图表自适应宽度。

我根据实际业务需求，开发了一个支持分组显示的柱状图组件，传入的数据可以是单柱，也可以是多柱。组件代码如下：

<!-- 纵向柱状图多柱 -->
<template><div class="vChartVerticalBar"><v-chart :auto-resize="true" :data="data" :option="defaultOption" /></div>
</template><script>
import { use, graphic } from 'echarts/core'
import { CanvasRenderer } from 'echarts/renderers'
import { BarChart } from 'echarts/charts'
import { TitleComponent, TooltipComponent, LegendComponent } from 'echarts/components'
import VChart from 'vue-echarts'
use([CanvasRenderer, BarChart, TitleComponent, TooltipComponent, LegendComponent])export default {name: 'vChartVerticalBar',components: { VChart },props: {option: {type: Object,default: function () {return {}},},data: {type: Object,default: function () {return {categories: ['被删', '哈士奇', '杨不易呀', '三掌柜', '花花', '喵喵侠'],series: [{name: '2023',data: [233, 340, 666, 100, 340, 30],},{name: '2024',data: [233, 566, 666, 200, 300, 330],},],}},},},data() {return {}},created() {},mounted() {},computed: {defaultOption() {let that = thisconst colorGradients = [this.generateGradient('#188df0', '#83bff6'),this.generateGradient('#f08d1a', '#ffaf7b'),this.generateGradient('#0d1a4f', '#4a69bd'),this.generateGradient('#83bff6', '#188df0'),this.generateGradient('#ffaf7b', '#f08d1a'),]const series = this.data?.series?.map((serie, index) => {return {type: 'bar',// showBackground: true,name: serie.name,itemStyle: {barBorderRadius: [20, 20, 0, 0],color: new graphic.LinearGradient(0, 1, 0, 0, colorGradients[index % 5]),},label: {show: false,position: 'top',},barWidth: '20%',data: serie.data,}})return {grid: {left: '3%',right: '4%',top: '25%',bottom: '1%',containLabel: true,},tooltip: {formatter: function (params) {const unit = that.option.unit ?? '' // 设置单位，可以根据需求修改let res = params[0].name + '<br/>'for (let i = 0; i < params.length; i++) {res += params[i].marker + params[i].seriesName + ' : ' + params[i].value + unit + '<br/>'}return res},trigger: 'axis',axisPointer: {type: 'shadow',},},legend: {icon: 'circle',textStyle: {padding: [0, 0, 0, -8], // 设置图例文字与图例符号之间的间距，[上, 右, 下, 左]},itemGap: 20, // 设置图例和图例之间间距},yAxis: [{type: 'value',name: that.option.yAxisName || '',minInterval: this.option.minInterval || '', // 坐标轴最小间隔大小。nameTextStyle: {padding: [0, 24, 0, 0],},axisLine: {show: false,},axisTick: {show: false,},splitLine: {show: true,lineStyle: {//分割线color: '#DCDFE6',width: 1,type: 'dashed', //dotted：虚线 solid:实线},},axisLabel: {textStyle: {color: '#556677',},formatter: '{value}',},},],xAxis: [{type: 'category',axisLabel: {color: '#858B9C',fontSize: '12',formatter: function (params) {let newParamsName = '' // 最终拼接成的字符串const paramsNameNumber = params.length // 实际标签的个数const provideNumber = that.option.provideNumber ||  6 // 每行能显示的字的个数const rowNumber = Math.ceil(paramsNameNumber / provideNumber) // 换行的话，需要显示几行，向上取整/*** 判断标签的个数是否大于规定的个数， 如果大于，则进行换行处理 如果不大于，即等于或小于，就返回原标签*/// 条件等同于rowNumber>1if (paramsNameNumber > provideNumber) {/** 循环每一行,p表示行 */for (let p = 0; p < rowNumber; p++) {let tempStr = '' // 表示每一次截取的字符串const start = p * provideNumber // 开始截取的位置const end = start + provideNumber // 结束截取的位置// 此处特殊处理最后一行的索引值if (p == rowNumber - 1) {// 最后一次不换行tempStr = params.substring(start, paramsNameNumber)} else {// 每一次拼接字符串并换行tempStr = params.substring(start, end) + '\n'}newParamsName += tempStr // 最终拼成的字符串}} else {// 将旧标签的值赋给新标签newParamsName = params}//将最终的字符串返回return newParamsName},},splitLine: {show: false,},axisTick: {show: false,},axisLine: {show: false,},data: that.data.categories,},],series: series || [],}},},watch: {},methods: {// 生成渐变颜色的方法generateGradient(startColor, endColor) {return [{ offset: 0, color: startColor },{ offset: 0.5, color: startColor },{ offset: 1, color: endColor },]},},
}
</script>
<style lang="less" scoped>
.vChartVerticalBar {width: 100%;height: 100%;
}
</style>

效果图如下：

非常棒的总结！你已经很好地概括了 Vue-ECharts 的灵活性和实用性。

🛠️ 配置灵活，高度定制

在前面的示例中，我们通过 this.option 来配置图表的各项参数。实际上，这些配置项是完全开放且高度可定制的。你可以根据业务需求自由调整 ECharts 提供的任何支持配置项。

✅ 常见自定义场景举例：

X 轴标签文字显示优化：比如设置单行显示的最大字符数，防止标签过长导致显示混乱。
多柱状图颜色配置：可以使用渐变色数组实现视觉上的丰富效果，也可以简单替换为纯色数组，只需修改配色逻辑即可。
响应式布局：适配不同屏幕尺寸，让图表在移动端也能良好展示。
交互行为控制：如 tooltip 显示格式、点击事件绑定等。

因为 Vue-ECharts 是对原生 ECharts 的封装，所以凡是 ECharts 支持的配置项，基本都可以在 Vue-ECharts 中使用，几乎没有功能限制。

🧩 组件化 + 响应式 = 开发效率翻倍

使用 Vue-ECharts 最大的优势在于它将 ECharts 强大的功能与 Vue 的组件化、响应式机制完美结合：

组件化开发：图表即组件，易于复用、组合和维护；
响应式更新：数据变化自动触发视图刷新，无需手动调用 setOption；
良好的生态支持：基于 Vue 和 ECharts 两大活跃开源社区，文档完善，插件丰富。

🔧 官方维护，持续迭代

值得一提的是，Vue-ECharts 是由官方团队维护的项目，在我撰写本文时查看了其 GitHub 仓库，发现最近一次提交仅在三周前，说明该项目仍在积极更新和优化中。遇到问题时，开发者社区和官方响应都较为及时，这对项目的长期稳定运行非常重要。

📝 总结

通过本文的介绍，相信你已经掌握了 Vue-ECharts 的基本使用方法，并了解了它在 Vue 项目中所带来的便利和优势。相比直接引入 ECharts，Vue-ECharts 在语法简洁性、组件化程度以及响应式更新方面表现更出色。

无论你是需要快速搭建一个可视化页面，还是希望实现复杂的动态图表交互，Vue-ECharts 都是一个非常值得推荐的选择。

📢 如果你在使用过程中有任何疑问，欢迎在评论区留言交流。也欢迎分享你的实战经验和优化技巧，让更多人受益！

从零开始：使用 Vue-ECharts 实现数据可视化图表功能

目录前言为什么选择 Vue-ECharts案例：Vue-Echart开发一个分组柱状图安装依赖引入全局引入按需引入编写组件总结前言你好，小二！很高兴你愿意分享关于 Vue-ECharts 的使用经验。 📊 Vue-ECharts：让你在 Vue 项…...

编程日记 2025/7/14 14:50:56

Antd中Form详解:

1.获取Form表单值的方式: ① 使用Form.useForm()钩子（推荐方式） const [form] Form.useForm();const getFormValues () > {const values form.getFieldsValue();};<Form form{form}>...<Form.Item label{null}><Button onClick{ge…...

编程日记 2025/6/29 0:21:56

（2）python开发经验

文章目录 1 pyside6加载ui文件2 使用pyinstaller打包更多精彩内容👉内容导航 👈👉Qt开发 👈👉python开发 👈 1 pyside6加载ui文件方法1： 直接加载ui文件 from PySide6.QtWidgets import QAp…...

编程日记 2025/7/14 14:44:17

Landsat 5介绍

USGS Landsat 5 Level 2, Collection 2, Tier 1 数据集可用性：1984-03-16T16:18:01Z–2012-05-05T17:54:06Z 数据集提供程序 USGS Earth Engine 代码段 ee.ImageCollection("LANDSAT/LT05/C02/T1_L2") open_in_new 重新访问间隔：16 天说…...

编程日记 2025/6/29 0:50:45

PowerShell 实现 conda 懒加载

问题执行命令conda init powershell会在 profile.ps1中添加conda初始化的命令。即使用户不需要用到conda，也会初始化conda环境，拖慢PowerShell的启动速度。解决方案本文展示了如何实现conda的懒加载，默认不加载conda环境，只…...

编程日记 2025/7/14 14:15:26

解锁ozon运营新路径：自养号测评技术如何实现降本增效

OZON测评自养号技术在跨境电商运营中具有显著的技术优势，主要体现在环境安全、账号控制、成本效率及风险规避等方面。以下是具体分析： 一：安全可控的测评环境搭建通过模拟俄罗斯本地物理环境和家庭住宅IP，自养号测评可规避平台风…...

编程日记 2025/7/14 14:11:33

算法第十七天｜654. 最大二叉树、617.合并二叉树、700.二叉搜索树中的搜索、98.验证二叉搜索树

654. 最大二叉树题目思路与解法 # Definition for a binary tree node. # class TreeNode: # def __init__(self, val0, leftNone, rightNone): # self.val val # self.left left # self.right right class Solution:def constructMaximumB…...

编程日记 2025/6/29 1:05:29

Spring Boot 的自动配置为 Spring MVC 做了哪些事情？

Spring Boot 的自动配置为 Spring MVC 做了大量的工作，极大的简化了我们开发时的配置负担，我们可以快速启动并运行一个基于 Spring MVC 的 Web 应用。以下是 Spring Boot 自动配置为 Spring MVC 所做的主要事情： DispatcherServlet 的自动注册…...

编程日记 2025/7/8 10:12:58

【python】—conda新建python3.11的环境报错

1.报错 conda create -n py3.11 python3.11 --channel https://mirrors.tuna.tsinghua.edu.cn/anaconda/pkgs/main/ Collecting package metadata: done Solving environment: failed PackagesNotFoundError: The following packages are not available from current channel…...

编程日记 2025/7/14 14:24:40

桑德拉精神与开源链动2+1模式AI智能名片S2B2C商城小程序的协同价值研究

摘要：本文深入剖析桑德拉无私奉献精神在商业领域的映射价值，结合开源链动21模式、AI智能名片及S2B2C商城小程序的技术特性，系统探讨其在用户赋能、资源协同与价值共创中的协同效应。研究表明，该技术组合通过去中心化激励、智能需求…...

编程日记 2025/7/14 14:34:02

JavaEE--初识网络

目录一、IP地址二、端口号三、认识协议四、五元组五、协议分层 1. OSI七层模型 2. TCP/IP五层（或四层）模型 3. 网络设备所在分层 4. 封装和分用一、IP地址 IP地址（Internet Protocol Address）是用于标识设备在网络…...

编程日记 2025/7/14 13:49:00

2.7/Q2，Charls最新文章解读

文章题目：Climate risks, multi-tier medical insurance systems, and health inequality: evidence from Chinas middle-aged and elderly populations DOI：10.1186/s12913-025-12648-2 中文标题：气候风险、多层次医疗保险制度和健康不平等—…...

编程日记 2025/7/14 14:49:53

Mac显卡的工作原理及特殊之处

目录 🧠 一、显卡的基本工作原理（适用于所有平台） 🍏 二、Mac 显卡的工作机制 1. Mac 使用的显卡类型 Intel 架构时代（Intel CPU Intel/AMD 显卡） Apple Silicon 时代（M1/M2/M3 芯片&…...

编程日记 2025/7/13 15:56:43

MUSE Pi Pro 编译kernel内核及创建自动化脚本进行环境配置

视频讲解： MUSE Pi Pro 编译kernel内核及创建自动化脚本进行环境配置今天分享的主题为创建自动化脚本编译MUSE Pi Pro的kernel内核，脚本已经上传到中 GitHub - LitchiCheng/MUSE-Pi-Pro-Learning: MUSE-Pi-Pro-Learning ，有需要可以自行clon…...

编程日记 2025/7/14 14:18:57

flink的TaskManager 内存模型

Flink TaskManager 的内存模型是一个多层管理体系，从 JVM 进程到具体任务的内存分配均有明确的逻辑划分和配置策略。以下是其核心构成及运行机制： 一、内存模型总览‌ TaskManager 内存整体分为 ‌JVM 特有内存‌ 和 ‌Flink 管理内存‌ 两大层级&…...

编程日记 2025/7/14 13:53:55

【NLP 72、Prompt、Agent、MCP、function calling】

命运把我们带到哪里，就是哪里 —— 25.5.13 一、Prompt 1.User Prompt 用户提示词当我们与大模型进行对话时，我们向大模型发送的消息，称作User Prompt，也就是用户提示词，一般就是我们提出的问题或者想说的话但是我们…...

编程日记 2025/7/14 14:26:16

无人机俯视风光摄影Lr调色预设，手机滤镜PS+Lightroom预设下载！

调色详情无人机俯视风光摄影 Lr 调色是利用 Adobe Lightroom 软件，对无人机从俯视角度拍摄的风光照片进行后期处理的调色方式。通过调整色彩、对比度、光影等多种参数，能够充分挖掘并强化画面独特视角下的壮美与细节之美，让原本平凡的航拍风…...

编程日记 2025/6/28 23:19:56

【HTML5】【AJAX的几种封装方法详解】

【HTML5】【AJAX的几种封装方法详解】 AJAX (Asynchronous JavaScript and XML) 封装是为了简化重复的异步请求代码，提高开发效率和代码复用性。下面我将介绍几种常见的 AJAX 封装方式。方法1. 基于原生 XMLHttpRequest 的封装 XMLHttpRequest。其主要特点如下…...

编程日记 2025/7/6 10:00:41

STM32 __rt_entry

STM32中__rt_entry函数的深度解析在STM32的启动流程中，__rt_entry是一个由ARM C库提供的核心函数，负责在__main完成基础初始化后，搭建完整的C语言运行环境。以下是其核心功能及工作机制的详细分析： 一、__rt_entry的核心作用 …...

编程日记 2025/6/28 23:26:07

YOLOv11融合[AAAI2025]的PConv模块

YOLOv11v10v8使用教程： YOLOv11入门到入土使用教程 YOLOv11改进汇总贴：YOLOv11及自研模型更新汇总《Pinwheel-shaped Convolution and Scale-based Dynamic Loss for Infrared Small Target Detection》一、模块介绍论文链接：https://…...

编程日记 2025/7/4 14:38:02

point3d 视野朝向设置

这里写自定义目录标题 point3d 视野朝向设置三维相机朝向的直观理解 point3d 视野朝向设置 open3d.visualization.Visualizer 中的 get_view_control() 方法返回一个 ViewControl 对象，用来控制 3D 可视化窗口中的相机视角。通过这个对象可以设置视角朝向&#xff…...

编程日记 2025/6/28 23:38:35

基于大模型的腰椎管狭窄术前、术中、术后全流程预测与治疗方案研究报告

目录一、引言 1.1 研究背景与意义 1.2 研究目的与创新点二、腰椎管狭窄概述 2.1 定义与分类 2.2 发病原因与机制 2.3 临床表现与诊断方法三、大模型技术原理与应用现状 3.1 大模型的基本原理 3.2 在医疗领域的应用案例 3.3 选择大模型预测腰椎管狭窄的依据四、…...

编程日记 2025/6/29 0:58:08

Matlab基于SSA-MVMD麻雀算法优化多元变分模态分解

Matlab基于SSA-MVMD麻雀算法优化多元变分模态分解目录 Matlab基于SSA-MVMD麻雀算法优化多元变分模态分解效果一览基本介绍程序设计参考资料效果一览基本介绍 Matlab基于SSA-MVMD麻雀算法优化多元变分模态分解可直接运行分解效果好适合作为创新点（Matlab完整源码和数据)，…...

编程日记 2025/6/29 0:10:05

工程师必读！ 3 个最常被忽略的 TDR 测试关键细节与原理

TDR真的是一个用来看阻抗跟Delay的好工具，通过一个Port的测试就可以看到通道各个位置的阻抗变化。可是使用上其实没这么单纯，有很多细节需要非常地小心，才可以真正地看到您想看的信息！ 就让我们整理3个极为重要的TDR使用小细节&…...

编程日记 2025/7/13 5:21:12

Spring Boot 项目中什么时候会抛出 FeignException?

在 Spring Boot 项目中使用 Feign 时，FeignException 是 Feign 客户端在执行 HTTP 请求过程中可能抛出的基础异常。它有很多子类，分别对应不同类型的错误。以下是一些常见的会抛出 FeignException (或其子类) 的情况： 网络连接问题 (Network …...

编程日记 2025/7/11 9:53:35

Spring Boot Swagger 安全防护全解析：从旧版实践到官方规范

摘要本文系统梳理 Swagger 安全防护的核心方案，涵盖旧版 Swagger（SpringFox）的swagger.basic配置实践、官方推荐的 Spring Security 方案，以及多环境管理、反向代理过滤等全链路技术。结合权威文档，明确不同方案的适…...

编程日记 2025/7/12 16:44:46

基于 PLC 的轮式服务机器人研究

标题:基于 PLC 的轮式服务机器人研究内容:1.摘要本文以轮式服务机器人为研究对象，探讨基于可编程逻辑控制器（PLC）的设计与实现。在智能化服务需求不断增长的背景下，旨在开发一种具备稳定运动控制和高效服务功能的轮式服务机器人…...

编程日记 2025/7/4 11:15:24

emed64_20.9.2.msi 安装步骤（超简单版）

找到安装包首先，先下载安装包链接：https://pan.quark.cn/s/2efb908815a4（可能在下载文件夹或者别人发给你的位置），双击它就行。如果双击没反应，就右键点它，选“安装”。弹出安装向导这时候会…...

编程日记 2025/7/5 14:08:52

HTML、CSS 和 JavaScript 基础知识点

HTML、CSS 和 JavaScript 基础知识点一、HTML 基础 1. HTML 文档结构 <!DOCTYPE html> <html lang"zh-CN"> <head><meta charset"UTF-8"><meta name"viewport" content"widthdevice-width, initial-scale1.…...

编程日记 2025/6/29 0:32:09

直接在Excel中用Python Matplotlib/Seaborn/Plotly......

本次分享如何利用pyxll包，实现直接在Excel中使用Python Matplotlib/Seaborn/Plotly等强大可视化工具。 pyxll配置 pyxll安装 pip install pyxll pyxll install pyxll自定义方法例如，自定义一个计算斐波那契数的方法fib，并使用pyxll装饰器…...

编程日记 2025/6/29 1:16:23

互联网大厂Java求职面试：优惠券服务架构设计与AI增强实践-5

互联网大厂Java求职面试：优惠券服务架构设计与AI增强实践-5 第一轮面试：业务场景切入面试官（技术总监）： 欢迎郑薪苦参与今天的面试。我们先从一个实际业务场景谈起——假设你正在设计一个电商平台的优惠券服务系统&…...

编程日记 2025/6/28 23:46:49

KV cache 缓存与量化：加速大型语言模型推理的关键技术

引言在大型语言模型（LLM）的推理过程中，KV 缓存（Key-Value Cache） 是一项至关重要的优化技术。自回归生成（如逐 token 生成文本）的特性决定了模型需要反复利用历史token的注意力计算结果&#…...

编程日记 2025/7/13 2:46:27

[250512] Node.js 24 发布：ClangCL 构建，升级 V8 引擎、集成 npm 11

目录 Node.js 24 版本发布：Windows 平台构建工具链转向 ClangCL Node.js 24 版本发布：Windows 平台构建工具链转向 ClangCL 流行的开源跨平台 JavaScript 运行时环境 Node.js 近日发布了 24.0 版本。此版本带来了多项性能提升、安全增强和开发体验的改进…...

编程日记 2025/6/28 23:42:53

Linux常用命令39——free显示系统内存使用量情况

在使用Linux或macOS日常开发中，熟悉一些基本的命令有助于提高工作效率，free命令的功能是显示系统内存使用量情况，包含物理内存和交换内存的总量、使用量、空闲量情况。本篇学习记录free命令的基本使用。首先查看帮助文档： 语法格…...

编程日记 2025/6/29 0:12:30

4. 文字效果/2D-3D转换 - 3D翻转卡片

4. 文字效果/2D-3D转换 - 3D翻转卡片案例：3D产品展示卡片 <!DOCTYPE html> <html><head><meta charset"utf-8"><title></title></head><style type"text/css">.scene {width: 300px;height…...

编程日记 2025/6/28 23:32:13

游戏引擎学习第276天:调整身体动画

运行游戏，演示我们遇到的拉伸问题，看起来不太好，并考虑切换到更顶视角的视角我们开始讨论游戏开发中的一些美学决策，特别是在处理动画方面。虽然我们是游戏程序员，通常不负责设计或艺术部分，但因为这是一…...

编程日记 2025/7/13 17:28:38

Java线程池性能优化全解析：从配置到实践

一、线程池配置原则 1.1 核心参数设定线程池的性能优化始于合理配置，关键参数包括：核心线程数（corePoolSize） CPU密集型任务：设为Runtime.getRuntime().availableProcessors()（通常为CPU核心数）IO密集型任务：设为CPU核心数 * 2（或更高，根据IO等待时间调整）最大线…...

编程日记 2025/7/11 17:02:40

【入门】歌德巴赫猜想

描述任一个大于等于4的偶数都可以拆分为两个素数之和。输入描述一个整数n( 4 < n < 200 ） 输出描述将小于等于n的偶数拆分为2个质数之和，列出所有方案！ 用例输入 1 10 用例输出 1 422 633 835 1037 1055 #include<b…...

编程日记 2025/7/7 17:46:17

kafka----初步安装与配置

目录标题 ⭐kafka 与 zookeeper间的关系一.集群部署二.修改配置文件三.分发安装包四.启动与关闭 kafka 与 zookeeper 相同，是以集群的形式使用 ⭐kafka 与 zookeeper间的关系 kafka 的使用要在 zookeeper 集群配置好的基础上使用要想启动kafka 要先启动 zookeep…...

编程日记 2025/6/29 1:14:19

如何通过 Windows 图形界面找到 WSL 主目录

WSL（Windows Subsystem for Linux）是微软开发的一个软件层，用于在 Windows 11 或 10 上原生运行 Linux 二进制可执行文件。当你在 WSL 上安装一个 Linux 发行版时，它会在 Windows 内创建一个 Linux 环境，包括自己的文件系统和主目录。但是，如何通过 Windows 的图形文件资…...

编程日记 2025/7/11 15:25:52

Cursor 编辑器的高级使用技巧与创意玩法

以下是针对 Cursor 编辑器的高级使用技巧与创意玩法深度解析，涵盖代码生成优化、工作流定制、隐藏功能等层面，助你将 AI 辅助编程效率提升至新高度：一、代码生成进阶技巧 1. 精准控制生成粒度行级控制：在代码行内用 // > 指定生成方向（替代模糊注释）def merge_…...

编程日记 2025/7/8 12:22:39

element-ui 源码调用接口跨域问题

今天在看 upload 组件源码时，在组件源码当中调用的本地启动的 nodejs 服务写的上传接口，遇到跨域问题： 问题一、在 upload.md 中调用 nodejs 服务中的上传接口，控制台报跨域报错。解决方法1：在根目录增加 vue.conf…...

编程日记 2025/6/28 23:07:46

Docker与PostgreSQL

1. 背景介绍 Docker是一种开源的容器化技术，它通过使用容器来隔离应用程序及其运行环境，使得开发人员能够快速、可靠地构建、部署和运行应用程序。Docker容器是轻量级的虚拟化单元，能够在任何支持Docker的操作系统上运行，从而消除…...

编程日记 2025/6/29 8:47:15

iVX 研发基座：大型系统开发的协作与安全架构实践

通过图形化开发、组件化封装和多厂商协作机制，iVX 解决了传统开发模式在效率、安全和扩展性上的痛点。文章结合政务、教育、企业等行业案例，展示其在数据治理、权限控制和 DevOps 等方面的创新实践，为大型系统开发提供完整的技术参考。一、…...

编程日记 2025/7/8 21:03:01

Vxe UI vue vxe-table 实现表格数据分组功能，不是使用树结构，直接数据分组

Vxe UI vue vxe-table 实现表格数据分组功能，不是使用树结构，直接数据分组查看官网：https://vxetable.cn gitbub：https://github.com/x-extends/vxe-table gitee：https://gitee.com/x-extends/vxe-table 代码通过…...

编程日记 2025/7/8 9:58:12

基于TI AM6442+FPGA解决方案，支持6网口，4路CAN，8个串口

TI AM6442FPGA解决方案具有以下技术优势及适用领域： 一、技术优势 ‌异构多核架构‌：AM6442处理器集成7个内核（2xCortex-A534xCortex-R5F1xCortex-M4F），可实现应用处理、实时控制和独立任务分核协同，满足…...

编程日记 2025/7/14 14:24:27

6. 多列布局/用户界面 - 杂志风格文章布局

6. 多列布局/用户界面 - 杂志风格文章布局案例：多栏杂志排版 <!DOCTYPE html> <html><head><meta charset"utf-8"><title></title></head><style type"text/css">body {font-family: "…...

编程日记 2025/6/29 8:40:29

计算机系统----软考中级软件设计师（自用学习笔记）

目录 1、计算机的基本硬件系统 2、CPU的功能 3、运算器的组成 4、控制器 5、计算机的基本单位 6、进制转换问题 7、原码、反码、补码、移码 8、浮点数 9、寻址方式 10、奇偶校验码 11、海明码 12、循环冗余校验码 13、RISC和CISC 14、指令的处理方式 15、存储器…...

编程日记 2025/7/8 0:36:27

FPGA图像处理（六）------ 图像腐蚀and图像膨胀

默认迭代次数为1，只进行一次腐蚀、膨胀一、图像腐蚀 1.相关定义 2.图像腐蚀效果图 3.fpga实现彩色图像灰度化，灰度图像二值化，图像缓存生成滤波模块（3*3），图像腐蚀算法 timescale 1ns / 1ps // // Des…...

编程日记 2025/6/29 8:38:45

2025年RIS SCI2区，改进白鲸优化算法+复杂非线性方程组求解，深度解析+性能实测

目录 1.摘要2.白鲸优化算法BWO原理3.改进策略4.结果展示5.参考文献6.代码获取7.读者交流 1.摘要本文提出了一种改进白鲸优化算法（ABWOA）用来解决非线性方程组（SNLEs）求解问题。ABWOA引入了平衡因子和非线性自适应参数&#xff0…...

编程日记 2025/6/29 8:52:02

目录

前言