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

vue2使用vue-echarts

news 来源：原创 2025/9/16 21:41:23

1.先安装echarts npm i echarts

2.安装vue-echarts

安装的时候注意下对应的版本

"echarts": "5.5.0", "vue-echarts": "6.7.3",这是我安装的版本

注意事项：

如果安装之后报错："export 'watchEffect' (imported as 'o') was not found in 'vue-demi'之类的，可能是vue的版本太低了在2.7以下

那么则需要安装依赖npm install @vue/composition-api

再在main.js中引入并注册

import VueCompositionApi from '@vue/composition-api';

Vue.use(VueCompositionApi);

再就是vue-echarts的使用示例

<template><v-chart :option="computedOption" autoresize :style="{ height: chartHeight, width: '100%' }" />
</template>  <script>
import VChart, { THEME_KEY } from 'vue-echarts'
import { use } from 'echarts/core'
import 'echarts/lib/component/grid'
import { PieChart, BarChart, LineChart } from 'echarts/charts'
import { TitleComponent, TooltipComponent, LegendComponent } from 'echarts/components'
import { CanvasRenderer } from 'echarts/renderers'// 注册 ECharts 组件
use([TitleComponent, TooltipComponent, LegendComponent, PieChart, BarChart, LineChart, CanvasRenderer])export default {name: '', // 添加组件名称components: {VChart,},props: {chartHeight: {type: String,default: '100%',},// 图表数据chartData: {type: Array,required: false,default: () => [],},seriesData: {type: Array,required: false,default: () => [],},xData: {type: Array,default: () => [],},},computed: {computedOption() {return this.generateOption(this.chartData, this.seriesData)},},methods: {generateOption(dataList, seriesData) {const legendData = this.seriesData.map((item) => item.name)const dataTime = ['2023-12','2024-01','2024-02','2024-03','2024-04','2024-05','2024-06','2024-07','2024-08','2024-09','2024-10','2024-11','2024-12',]// 生成 series 数据const series = seriesData.map((item) => ({name: item.name,type: 'line',tooltip: item.tooltip,data: item.data,symbol: 'none',smooth:true,showSymbol: false,lineStyle: {width: 1.5}}))const option = {backgroundColor: '#ffffff', // 设置背景颜色为白色grid: {top: '10%', // 顶部内边距left: '10%', // 左侧内边距right: '10%', // 右侧内边距bottom: '30%', // 底部内边距},tooltip: {trigger: 'axis',// axisPointer: {//   type: "cross",//   crossStyle: {// 	color: "#999",//   },// },},legend: {data: legendData,orient: 'horizontal', //bottom: '2%', // 图例放在底部left:'10%',right:'10%',icon: 'rect',height:'25%', // type: 'scroll', // 超过宽度可滚动// pageIconColor: '#666', // 翻页按钮颜色// pageTextStyle: {//   color: '#666'// },itemGap: 15, // 图例项间隔lineHeight: 16,   // 行高itemWidth: 30, // 图例标记宽度itemHeight: 2, // 图例标记高度textStyle: {fontSize: 12,padding: [0, 0, 0, 5] // 调整文字与图例标记间距},// formatter: function (name) {//   // 限制图例文字长度//   return name.length > 6 ? name.substring(0, 6) + '...' : name;// }},xAxis: [{type: 'category',data: this.xData,axisPointer: {type: 'shadow',},axisTick: {show: false,},lineStyle: {type: 'dashed', // 设置为虚线color: '#ccc', // 虚线颜色},splitLine: {show: true,lineStyle: {type: 'dashed', // 设置为虚线color: '#ccc', // 虚线颜色},},},],yAxis: [{type: 'value',name: '',min: 0,axisLabel: {formatter: '{value} ',},axisLine: {show: true,},lineStyle: {type: 'dashed', // 设置为虚线color: '#ccc', // 虚线颜色width: 1},splitLine: {show: true,lineStyle: {type: 'dashed',color: '#ccc',width: 0.5,},},},{type: 'value',name: '',min: 0,axisLabel: {formatter: '{value} ',show: false, // 隐藏右侧的 Y 轴标签},splitLine: {show: true,lineStyle: {type: 'dashed',color: '#ccc',},},},],series: series,}return option},},
}
</script>  <style scoped>
.chart-container {width: 100%;
}
</style>

vue2使用vue-echarts

1.先安装echarts npm i echarts 2.安装vue-echarts 安装的时候注意下对应的版本 "echarts": "5.5.0", "vue-echarts": "6.7.3",这是我安装的版本注意事项： 如果安装之后报错："export watchEffect …...

编程日记 2025/9/16 21:41:23

多光谱相机：海洋管道漏油（溢油）监测

每年海上溢油和化工管道漏油造成的污染事故和经济损失频发，在生态方面，漏油会带来导致水质恶化、生态系统破坏、食物链受损。在经济方面，会造成渔业损失、旅游业损失、航运业损失。在健康方面，会造成食品安全问题，直接…...

编程日记 2025/9/16 21:36:56

Kaggle-Digit Recognizer-(多分类+卷积神经网络CNN)

Digit Recognizer 题意： 给你每个图片的dataframe类型的数据，让你预测出每个图片可能是多少。思考： 数据处理 1.首先把数据从dadaframe转换成numpy，数据类型改为float32，并且并且展开为1维的28281的形状&#xf…...

编程日记 2025/9/16 3:41:41

jQuery多库共存

在现代Web开发中，项目往往需要集成多种JavaScript库或框架来满足不同的功能需求。然而，当多个库同时使用时，可能会出现命名冲突、功能覆盖等问题。幸运的是，jQuery提供了一些机制来确保其可以与其他库和谐共存。本文将探讨如何实现…...

编程日记 2025/9/16 21:30:51

MCU的USB接口作为 USB CDC串口输出

前言： 如下内容是和Chatgpt的问答对话。询问了Chatgpt 关于 MCU微控制器内部的USB端口作为串口输出是怎么工作的，是否需要在上位机上安装串口驱动程序等，Chatgpt解答的很好。正文： STM32 使用USB作为串行设备端口，需…...

编程日记 2025/9/16 21:33:33

VCode 的 .S 汇编文件里面的注释不显示绿色

1. 确认文件语言模式打开 .S 文件后，查看 VS Code 右下角的状态栏，确认当前文件的识别模式（如 Assembly、Plain Text 等）。如果显示为 Plain Text 或其他非汇编模式： 点击状态栏中的语言模式（如 Plain Te…...

编程日记 2025/9/16 1:31:43

【数学建模】（智能优化算法）萤火虫算法(Firefly Algorithm)详解与实现

萤火虫算法(Firefly Algorithm)详解与实现文章目录萤火虫算法(Firefly Algorithm)详解与实现前言1. 算法原理2. 算法流程3. Python实现4. 算法特点4.1 优点4.2 缺点 5. 应用领域6. 算法变种7. 总结与展望参考文献前言大家好，今天给大家介绍一种有趣且高效的群体…...

编程日记 2025/9/16 21:39:18

目录 1. 为啥需要链路追踪2. 常见的链路追踪组件3. 使用过的链路追踪组件3.1. Spring Cloud Sleuth3.2. Zipkin3.3. Apache SkyWalking 4. 集成Spring Cloud Sleuth框架4.1. 流程步骤4.2 sleuth工作流程 5. 集成zipKin5.1 添加 Zipkin 相关依赖5.2 安装zipkin服务5.3 配置 Zipk…...

编程日记 2025/9/16 21:36:55

# 基于OpenCV与Dlib的人脸融合技术实现

从仿射变换到人脸融合：基于OpenCV和Dlib的图像处理实践在图像处理领域，仿射变换和人脸融合是两个非常有趣且实用的技术。仿射变换可以用于图像的几何变换，而人脸融合则可以创造出令人惊叹的视觉效果。本文将通过两个具体的代码示例&#xf…...

编程日记 2025/9/16 21:33:33

多光谱相机：水环境监测（水体富营养化、黑臭水体、藻类水华）

随着全球水体污染问题日益严峻，水体富营养化、黑臭水体和藻类水华等生态危机对人类健康和水生系统构成重大威胁。传统监测手段（如人工采样、单点传感器）因效率低、覆盖不足、实时性差等局限，难以满足复杂水环境的动态监管需求。多…...

编程日记 2025/9/10 0:17:50

记录一次nginx访问前端首页，一直显示nginx首页问题(实际是nginx访问页面权限问题)

同一台服务器，nginx配置是server { listen 8081; server_name localhost; #charset koi8-r; #access_log logs/host.access.log main; location /New_mh_other { alias /home/hqu/data/new_mh_other; try…...

编程日记 2025/9/15 7:37:18

windows下命名管道双端通信

实现功能 1、命名管道双端通信（异步） 2、客户端断线重连 PS：多线程版本 PipeWrapper.h #include <windows.h> #include <string> #include <vector> #include "Utils/ThreadObject.h" #include "Utils/T…...

编程日记 2025/9/10 1:27:31

Linux自行实现的一个Shell(15)

文章目录前言一、头文件和全局变量头文件全局变量二、辅助函数获取用户名获取主机名获取当前工作目录获取最后一级目录名生成命令行提示符打印命令行提示符三、命令处理获取用户输入解析命令行执行外部命令四、内建命令添加环境变量检查和执行内建命令五、初始化初始化环境…...

编程日记 2025/9/13 1:25:16

powerDesign 逆向 mysql 生成物理模型，并用VBS脚本整理comment

学习自：https://www.cnblogs.com/xmyjcs/p/8536233.html 文章目录 Reverse Engineer格式化模型执行 VBS 脚本 Reverse Engineer 下面 DBMS 可以通过 ODBC（Open Database Connectivity，开放数据库连接）连接， 需要自己先…...

编程日记 2025/9/15 1:09:41

跨境全域中台：前端独立站群+后端共享云仓的协同作战体系

在全球化浪潮与互联网技术飞速发展的当下，跨境电商已然成为国际贸易领域中最为活跃的力量。据相关数据显示，过去几年跨境电商的年增长率持续保持高位，越来越多的企业投身于这片充满机遇与挑战的蓝海市场。在竞争日益激烈的跨境电商赛道上&…...

编程日记 2025/9/11 1:15:06

国产芯片解析：乐得瑞LDR6500C 超小封装全能芯片，赋能智能设备未来

LDR6500C是乐得瑞科技针对USB-C标准中的Bridge设备而开发的双USB-C DRP接口PD通信芯片，具备切换Data Role功能，支持最高USB PD 100W 充电，并且针对各大品牌设备的 USB-C 兼容性进行了特别优化，非常适合于 USB Type-C 设备快充转接…...

编程日记 2025/9/15 19:15:49

代码随想录-06-二叉树-05.10 二叉树的最小深度

二叉树的最小深度 #模板题题目描述给定一个二叉树，找出其最小深度。最小深度是从根节点到最近叶子节点的最短路径上的节点数量。说明叶子节点是指没有子节点的节点具体思路（暴力） 层序遍历;找到cur.left null && cur.ri…...

编程日记 2025/9/14 20:29:11

系统与网络安全------网络通信原理（6）

资料整理于网络资料、书本资料、AI，仅供个人学习参考。应用层解析 DNS Domain Name System，域名系统用来完成域名与IP地址之间的映射，便于用户对网站的记忆和访问端口号为TCP或UDP的53 DNS工作原理 FTP File Transfer Protocol 文件…...

编程日记 2025/9/12 3:38:04

【Vue #2】脚手架指令

一、脚手架脚手架：一个保证各项工作顺利开展的平台，方便我们拿来就用，零配置 1. Vue 代码开发方式相比直接 script 引入 vue 源码，有没有更好的方式编写vue代码呢? ① 传统开发模式： 基于html文件开发Vue&…...

编程日记 2025/9/12 18:55:32

UE5 后坐力枪口上抬和恢复

文章目录计算后坐力并让视角上抬后坐力回落计算后坐力并让视角上抬在玩家蓝图里，声明一个方法OnShootOnce,在武器每次射击时调用 1检测新的后坐力是否超过了最大后坐力，并选择一个小的 2 如何将角色模型设置为相机的子物体 3 最后记录一下当前的…...

编程日记 2025/9/8 1:30:05

Mysql B+树高度如何计算？

MySQL 的 InnoDB 存储引擎使用 B+树作为索引结构，其高度增加会直接影响查询性能（每次高度增加意味着多一次磁盘 I/O）。以下是 B+树高度增加的关键场景和优化建议： 1. B+树高度增加的触发条件 (1) 数据量持续增长根本原因：B+树的层级由数据量（记录数）和每个节点的容…...

编程日记 2025/9/16 6:09:48

UE5 使用贴花创建弹孔

文章目录使用射线检测击中点在击中点处创建贴花使用射线检测击中点和untiy一样，发射一条射线，在命中点处创建弹孔在武器里定义射击检测方法以下是对上边使用的方法的展开 GetShootStartPosition:获取射击起点 computeShootEndPosition&#xff1a…...

编程日记 2025/9/15 10:09:24

程序持续内存泄漏问题定位参考

0 概括本文用于记录 x86-Linux 应用程序发生持续性内存泄漏问题时的定位方法。主要介绍valgrind工具的应用。 1 原理对于内存泄漏问题的定位，一种朴素的想法就是对内存申请点进行监控。对于一个内存申请调用点（例如c/c中的malloc函数）&a…...

编程日记 2025/9/12 7:39:32

Lumion 与 Enscape 怎么选？附川翔云电脑适配指南

建筑可视化领域，Lumion 和 Enscape 是两款主流实时渲染器，核心差异体现在操作逻辑、渲染特性及适用场景。结合川翔云电脑平台的硬件支持，可进一步优化使用体验。一、核心差异：效率、操作与场景适配 1. 操作门槛与实时性 Lumio…...

编程日记 2025/9/16 6:32:30

WebShell详解：原理、分类、攻击与防御

目录一、WebShell的定义与核心概念二、WebShell的分类三、WebShell的攻击原理与常见手法 1. 攻击原理 2. 常见攻击路径四、WebShell的危害五、防御与检测策略六、总结一、WebShell的定义与核心概念 WebShell是一种以ASP、PHP、JSP等网页脚本形式存在的恶…...

编程日记 2025/9/11 6:39:21

Ubuntu 24.04 中文输入法安装

搜狗输入法，在Ubuntu 24.04上使用失败，安装教程如下 https://shurufa.sogou.com/linux/guide 出现问题的情况，是这个帖子里描述的： https://forum.ubuntu.org.cn/viewtopic.php?t493893 后面通过google拼音输入法解决了&#x…...

编程日记 2025/9/7 17:50:25

数码视讯TR100系列／TR100-G1／TR100-G4／数码视讯F7-国科GK6323V100C芯片-刷机固件包

数码视讯TR100系列／数码视讯TR100-G1／数码视讯TR100-G4／数码视讯F7-国科GK6323V100C芯片-刷机固件包刷机教程： 里面共有两种方法，一是TTL线刷烧录方法；二是卡刷固件包； 下面以数码视讯TR100-…...

编程日记 2025/9/10 14:14:43

Cloudflare教程：免费优化CDN加速配置，提升网站访问速度 | 域名访问缓存压缩视频图片媒体文件优化配置

1、启用 Tiered Cache 缓存开关：通过选择缓存拓扑，可以控制源服务器与 Cloudflare 数据中心的连接方式，以确保缓存命中率更高、源服务器连接数更少，并且 Internet 延迟更短。 2、增加浏览器缓存时间TTL：在此期间&#…...

编程日记 2025/9/15 3:39:03

24体育NBA足球直播M24模板自适应板源码

源码名称：体育直播赛事扁平自适应M24直播模板源码开发环境：帝国cms7.5 空间支持：phpmysql 带软件采集，可以挂着自动采集发布，无需人工操作！ 演示地址：https://www.52muban.com/shop/184022.h…...

编程日记 2025/9/5 8:03:41

dify+wan2.1搭建文生视频生成工具流

本文介绍在dify中使用阿里开源的Wan2.1 1.3B模型搭建文生视频工作流的方法。使用的工具如下： 1、dify（官方：https://docs.dify.ai/zh-hans） 2、comfyui 一、comfyui安装为了简单起见，本文介绍使用autodl完成comfyui的部署。在autodl创建实例，使用的镜像如下图：大…...

编程日记 2025/9/10 8:41:54

C# js 判断table中tr否存在相同的值

html 中如： 实现：table数据表格中，点击删除按钮时，验证相同子订单号条数是否大于1，大于允许删除。保证数据表格中只有唯一的一条子订单号数据。 <table style"width: 100%; background-color: #fff;" ce…...

编程日记 2025/9/11 13:59:34

HTML5+CSS3小实例：纯CSS绘制七巧板

实例：纯CSS绘制七巧板技术栈：HTML+CSS 效果：源码：【HTML】 <!DOCTYPE html> <html lang="zh-CN"> <head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale…...

编程日记 2025/9/12 9:52:26

什么是虚拟线程？与普通线程的区别

引言：线程的演进与挑战在传统的并发编程中，线程是一种非常重要的概念。我们使用线程来实现任务的并发执行，从而提高程序的执行效率。普通线程（如 Thread 类）是一种重量级的线程，每个线程都对应着操作系统…...

编程日记 2025/9/10 3:57:09

Docker MySQL的主从同步数据备份数据同步配置文件

创建主库 docker run \--namemysql_1 \-e MYSQL_ROOT_PASSWORD123456 \-p 3306:3306 \-v mysql_main_data:/var/lib/mysql \--restart unless-stopped \-d \mysql:8.0进入容器内部 docker exec -it mysql_1 bash查找配置文件 find / -name my.cnf复制出主机 docker cp mysql…...

编程日记 2025/9/12 11:20:55

PowerBI中的DATEDIFF函数

一、语法 DATEDIFF(开始日期，结束日期，日期时间类型)，返回两个日期之间的时间差二、示例开始日期结束日期度量值计算结果2025/4/1 15:33:202025/4/1 15:33:30计算 DATEDIFF([开始日期],[结束日期],SECOND)102025/4/1 15:332025/4/1 15:3…...

编程日记 2025/9/4 17:03:58

C/C++共有的类型转换与c++特有的四种强制类型转换

前言 C 语言和 C 共有的类型转换： 自动类型转换（隐式类型转换）： 编译器在某些情况下会自动进行的类型转换。强制类型转换（显示类型转换）： 使用 (type)expression 或 type(expression) 语法进行…...

编程日记 2025/9/12 1:38:42

体验OceanBase的并行导入功能

在数据库的日常使用中，会经常遇到以下场景： ‌数据复制‌：将一个或多个表中的数据复制到目标表中，可能是复制全部数据，也可能仅复制部分数据。数据合并：将数据从一个表转移到另一个表，或者将多…...

编程日记 2025/9/9 6:07:02

CSS的字体

在 CSS 中，字体（font）是网页设计中的一个重要部分，它控制了文本的外观和排版效果。通过设置不同的字体属性，我们可以使网页上的文字更具吸引力和可读性。以下是与字体相关的 CSS 属性及其用法： 1️⃣ font…...

编程日记 2025/9/6 16:53:55

开源模型应用落地-LangChain与MCP协议-集成GPT-4o构建下一代AI智能体的全栈实践（三）

一、前言在人工智能技术快速迭代的今天，大型语言模型（LLM）如何高效集成外部工具与多模态能力，成为开发者面临的核心挑战。Anthropic推出的模型上下文协议（MCP）通过标准化工具接口，为AI应用提供了“即插即用”的生态基础，而LangChain凭借其模块化设计，正成为连接LLM…...

编程日记 2025/9/11 6:33:31

Qt 5.14.2入门（一）写个Hello Qt!程序

目录参考链接：一、新建项目二、直接运行三、修改代码增加窗口内容1、Qt 显示一个 QLabel 标签控件窗口2、添加按键参考链接： Qt5教程（一）：Hello World 程序 Qt 编程指南一、新建项目 1、新建一个项目&#xff08…...

编程日记 2025/9/12 13:56:46

FPGA_DDR(二)

在下板的时候遇到问题 1：在写一包数据后再读，再写再读这时候读无法读出查看时axi_arready没有拉高原因 ： 由于读地址后没有拉高rready,导致数据没有读出卡死现象。解决结果...

编程日记 2025/8/27 13:47:12

思科交换机配置

以下是交换机配置的详细步骤指南，适用于Cisco交换机，其他品牌需调整命令： 1. 初始连接与基本配置连接方式：使用Console线连接交换机，通过终端软件（如PuTTY）登录。波特率：9600&…...

编程日记 2025/9/10 7:54:06

单链表——C语言实现

目录一.相关指针知识点二.链表 1.为什么学了顺序表还要学链表 2.优点三.实现 1.链表的打印 —— 理解链表结构 (2) 物理结构图 2.链表的尾插 —— 入门错误写法：tail ! NULL 总结： 正确代码物理图解： (2) 尾插整体代码 (思考…...

编程日记 2025/9/10 10:59:55

PostgreSQL插件生态全景解析：赋能数据库的无限可能

PostgreSQL以其开放的扩展生态闻名于世，其插件机制如同瑞士军刀般灵活，能够在不修改核心代码的前提下实现功能无限延伸。本文将基于多年内核开发经验，深度剖析PostgreSQL插件生态体系，为架构师与开发者提供全景式技术选型参考。一…...

编程日记 2025/9/11 3:13:06

minio提供nfs服务

minio提供nfs服务挂载minio为本地目录开机自动挂载使用supervisor实现开机自动挂载服务单元实现开机自动挂载minio为本地目录---失败调试挂载minio为本地目录使用 Minio 作为后端存储，并通过 NFS 为客户端提供访问，那么你需要一个中间层来将 Minio …...

编程日记 2025/9/12 18:13:44

QML中的信号与槽机制

QML 中的信号与槽机制是 Qt 框架的核心特性之一，它提供了一种对象间通信的强大方式。与 C 中的信号槽类似，但语法更加简洁。基本概念 1. 信号 (Signal) 当某个特定事件发生时由对象自动发出的通知例如：按钮被点击时发出的 clicked 信号 …...

编程日记 2025/9/11 13:30:17

使用 Ktor 构建现代 Android 应用的后端服务

使用 Ktor 构建现代 Android 应用的后端服务前言在移动互联网时代，Android 应用对后端服务的实时性与性能要求越来越高，而传统的后端框架在一些场景中存在复杂度高、扩展性不足等问题。Ktor 作为 JetBrains 推出的异步 Web 框架，充分利用…...

编程日记 2025/9/4 7:25:19

leetcode_454. 四数相加 II_java

454. 四数相加 IIhttps://leetcode.cn/problems/4sum-ii/ 1、题目给你四个整数数组 nums1、nums2、nums3 和 nums4 ，数组长度都是 n ，请你计算有多少个元组 (i, j, k, l) 能满足： 0 < i, j, k, l < nnums1[i] nums2[j] nums3[k] …...

编程日记 2025/9/9 17:49:25

类名与协议名相同，开发中应该避免吗？

在 Objective-C 开发中，协议与实现类之间的命名关系非常重要。虽然语言允许协议名和类名相同，但从可读性和维护性等角度出发，这种做法并不推荐。本文通过一个典型示例展开分析，并提供更合理的命名建议。一、示例在某项目中&…...

编程日记 2025/9/11 6:33:33

环信鸿蒙版 UIKit 快速上手指南

环信鸿蒙版 UIKit 是专为 HarmonyOS 开发者设计的 IM UI 组件库，基于环信 IM SDK 开发，可帮助开发者快速集成即时通讯功能。环信UIKit 的特点 ArkUI 声明式开发范式：采用高效简洁的声明式开发方式状态管理 V2：支持深度观测和精…...

编程日记 2025/9/8 10:24:04

相关文章：