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

uniapp vue3 使用echarts绘制图表 柱状图等

部分内容AI总结

Uniapp 使用 Vue3 和 ECharts 组件的总结

在 Uniapp 中使用 Vue3 和 ECharts 进行数据可视化是一种常见需求。以下将详细介绍如何在 Uniapp 项目中安装 ECharts 插件、在 main.js 中挂载 ECharts 以及一个简单的示例 demo


1. 下载 ECharts 插件

在 Uniapp 中,使用 ECharts 进行数据可视化需要先安装 ECharts 相关插件。

  • 步骤:
    1. 打开项目目录,使用以下命令安装 ECharts 插件:
      pnpm add echarts
      
    2. 导入自定义eharts插件

2. main.js 中挂载 ECharts

在 Vue3 项目中,通常需要在 main.js 中挂载全局的 ECharts 对象,这样可以在项目的任何地方使用它。

  • 步骤:
  1. 打开 main.js 文件,导入 ECharts 并进行挂载:
	//关键代码const echarts = require('./static/echarts.min');app.config.globalProperties.$echarts = echarts
  1. 现在,你可以在项目的任何组件中通过 this.$echarts 访问 ECharts 对象。

3. 示例 Demo:使用 ECharts 绘制图表

在 Vue3 组件中,结合 Uniapp 和 ECharts,展示一个简单的图表。

  • 步骤:
    1. 创建一个新的组件 EChartDemo.vue,或者直接在 App.vue 中使用。
    2. 使用 onMounted 生命周期函数初始化图表。
<template><view><view class="title">ehcharts示例</view><view><LEchart class="echart" ref="chart" @finished="init"></LEchart></view><view><LEchart class="echart-circle" ref="chartCircle" @finished="initCircle"></LEchart></view></view>
</template><script setup>import {getCurrentInstance} from 'vue'import LEchart from '@/components/l-echart/l-echart.vue'const instance = getCurrentInstance()const echarts = instance.appContext.config.globalProperties.$echarts;console.log("echarts", echarts)import {onMounted,reactive,ref} from "vue"let chart = ref();const state = reactive({option: {},})state.option = {legend: {show: true,data: []},tooltip: {trigger: 'axis',axisPointer: {type: 'cross'}},grid: {left: '3%',right: '8%',top: '15%',bottom: '5%',containLabel: true},xAxis: {type: 'category',data: [1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12, 13, 1, 4, 15, 16, 17, 18, 19, 20, 21, 22, 23, 24],axisLabel: {// inside: true,// color: '#fff'},axisTick: {show: false},axisLine: {show: true,lineStyle: {color: '#83bff6'}},z: 10},yAxis: {type: 'value',axisLine: {show: true,lineStyle: {color: '#83bff6'}},axisTick: {show: false},// axisLabel: {//   color: '#999'// },splitLine: {show: true,lineStyle: {type: 'dashed',color: '#83bff6'}}},series: [{data: [100, 110, 113, 126, 143, 158, 165, 167, 152, 102, , ],type: "bar",itemStyle: {color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{offset: 0,color: '#83bff6'},{offset: 0.5,color: '#188df0'},{offset: 1,color: '#188df0'}])},emphasis: {itemStyle: {color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{offset: 0,color: '#2378f7'},{offset: 0.7,color: '#2378f7'},{offset: 1,color: '#83bff6'}])}},areaStyle: {show: true,color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{offset: 0,color: '#188df0'},{offset: 1,color: '#fff'}])},}],color: ['#83bff6']}let chartCircle = ref();const stateCircle = reactive({option: {series: [{type: 'pie',radius: ['50%', '70%'],avoidLabelOverlap: false,label: {show: false,position: 'center'},emphasis: {label: {show: true,fontSize: '40',fontWeight: 'bold'}},labelLine: {show: false},data: [{value: 70,name: '70%'},{value: 30,name: '30%'}]}]}});onMounted(() => {chart.value.init(echarts, chart => {chart.setOption(state.option);});chartCircle.value.init(echarts, chart => {chart.setOption(stateCircle.option);});});// 渲染完成const init = () => {console.log("渲染完成");}const initCircle = () => {console.log("渲染完成circle");}
</script><style scopedlang='scss' scoped>.echart {width: 100%;height: 300px;}.title {text-align: center;}.echart-circle {width: 100%;height: 200px;}
</style>
  • 关键点解析:
    1. 图表容器:使用 ref 来创建对 DOM 元素的引用,chartContainer 是图表绘制的目标容器。
    2. onMounted 生命周期:在组件挂载时初始化 ECharts 实例并调用 setOption 方法配置图表。
    3. ECharts 配置项option 定义了图表的标题、坐标轴和数据。

4. 总结

  • 安装插件:使用 npm 安装 echarts 依赖。
  • 全局挂载:在 main.js 中将 ECharts 挂载到 Vue 的全局属性,以便在各个组件中使用。
  • 组件示例:在 Vue3 组件中,结合 onMounted 生命周期,使用 ECharts 绘制可视化图表。

通过这个步骤,你可以在 Uniapp 中轻松地集成 ECharts,结合 Vue3 的响应式特性,实现强大的数据可视化功能。

相关文章:

uniapp vue3 使用echarts绘制图表 柱状图等

部分内容AI总结 Uniapp 使用 Vue3 和 ECharts 组件的总结 在 Uniapp 中使用 Vue3 和 ECharts 进行数据可视化是一种常见需求。以下将详细介绍如何在 Uniapp 项目中安装 ECharts 插件、在 main.js 中挂载 ECharts 以及一个简单的示例 demo。 1. 下载 ECharts 插件 在 Uniapp 中…...

字符串处理的艺术:深入探索charAt(), indexOf(), nextLine(), 和 next() 的应用与组合

摘要 本文旨在深入探讨Java中字符串处理的核心方法——charAt(), indexOf(), nextLine(), 和 next()&#xff0c;通过实例展示这些方法如何协同工作以解决复杂的字符串处理任务。我们将从基础概念出发&#xff0c;逐步构建到高级应用&#xff0c;包括字符串的遍历、搜索、读取…...

C#八股总结

重载和重写的区别 方法重载&#xff1a;在同一个类中定义多个同名但参数不同的方法。 方法重写&#xff1a;通过使用 virtual 和 override 关键字&#xff0c;实现基类和派生类之间的方法重写。 重载发生在同类中&#xff0c;重写发生在父子类中 重载方法名相同参数不同&#…...

iOS 中的 sqlite-shm 和 sqlite-wal 文件丢失

iOS 中的 sqlite-shm 和 sqlite-wal 文件丢失或损坏可能会导致 NSManagedObjectContext 的 performAndWait 方法抛出 NSInternalInconsistencyException 异常。这是因为这些文件在 SQLite 的 Write-Ahead Logging (WAL) 模式下起着关键作用&#xff0c;Core Data 依赖它们来确保…...

ubuntu22上C/C++程序使用weston+wayland+OpenGLES渲染

一&#xff0c;安装依赖软件&#xff1a;sudo apt install zlib1g-dev libssl-dev libgles2-mesa-dev libsystemd-dev libpng-dev libglib2.0-dev libwayland-dev weston libweston-9-dev 二&#xff0c;启动&#xff1a; # 运行weston weston -Swayland-1# 运行程序 ./yourp…...

打点 - 泛微 E-Cology WorkflowServiceXml

请求路径 /services%20/WorkflowServiceXml显示如下&#xff0c;漏洞可能存在 利用&#xff1a; 根据提示在 CMD 处输入 Memshell 注入内存马&#xff0c;并点击执行&#xff0c;成功注入 冰蝎配置&#xff0c;输入内存马地址 成功连接 命令执行...

Go语言接口与多态

Go语言虽然并非传统意义上的面向对象语言&#xff0c;但它通过接口&#xff08;Interface&#xff09;和匿名组合&#xff08;Composition&#xff09;等机制&#xff0c;实现了类似面向对象编程中的多态性&#xff08;Polymorphism&#xff09;。接口和多态性是Go语言中非常重…...

【ADC】SAR 型 ADC 和 ΔΣ ADC 的选型决策方法

本文学习于TI 高精度实验室课程&#xff0c;介绍如何选择 SAR 或 delta-sigma 型 ADC。 文章目录 一、选型决策树二、特定传感器的应用三、需要 DC 精度但分辨率较低的应用四、需要 DC 精度且分辨率较高的应用五、极低噪声的 DC 精密测量六、需要捕获瞬态信号值的应用七、需要高…...

探探Java与python中的闭包

说在前面&#xff1a;在计算机科学中&#xff0c;闭包是指一个函数以及其引用的周围环境&#xff08;变量&#xff09;所组成的整体。简单来说&#xff0c;闭包允许一个函数访问并操作其外部函数作用域中的变量&#xff0c;即使外部函数已经执行完毕。 Java函数式编程—闭包&am…...

LD2 Scalable Heterophilous Graph Neural Network with Decoupled Embeddings

Neurips 24 推荐指数&#xff1a; #paper/⭐⭐⭐ 领域&#xff1a;可扩展图&#xff0c;大图加速 整个文章的理论部分比较多&#xff0c;尽量尽我所能避开一些额外公式。详细文章&#xff0c;见链接 模型架构 如图&#xff0c;整个模型分为与计算和训练两部分。本文的精华在于…...

【Mysql】Mysql数据库基本操作-------DDL(上)

1、DDL解释 DDL&#xff08;Data Definition Language&#xff09;&#xff0c;数据定义语言&#xff0c;该语言部分包括以下内容&#xff0c; &#xff08;1&#xff09;对数据库的常用操作 &#xff08;2&#xff09;对表结构的常用操作 &#xff08;3&#xff09;修…...

MySQL知识点复习 - 常用的日志类型

MySQL中常用的日志类型&#xff1a; 重做日志&#xff08;redo log&#xff09; 作用&#xff1a;确保事务的持久性。redo日志记录事务执行后的状态&#xff0c;用来恢复还未写入data file的已成功事务更新的数据。防止在发生故障的时间点&#xff0c;尚有脏页未写入磁盘&…...

基于PHP+MySQL组合开发地方门户分类信息网站源码系统 带完整的安装代码包以及搭建部署教程

系统概述 随着互联网技术的飞速发展&#xff0c;地方门户分类信息网站逐渐成为城市生活不可或缺的一部分。它们涵盖了房产、招聘、二手交易、生活服务等多个领域&#xff0c;为当地居民提供了全方位的信息服务。为了满足这一市场需求&#xff0c;我们开发了这款基于PHPMySQL的…...

【1米C-SAR卫星】

1米C-SAR卫星 1米C-SAR卫星是我国自主研发的重要遥感卫星&#xff0c;主要用于海洋、陆地等观测任务&#xff0c;具备高分辨率、宽覆盖、多极化、多模式等特点。以下是对1米C-SAR卫星的详细介绍&#xff1a; 一、基本概况 发射时间&#xff1a;首颗1米C-SAR卫星于2021年11月2…...

【小小的脑袋,大大的疑问?】如何在Zookeeper中配置集群?

在Zookeeper中配置集群涉及多个步骤&#xff0c;以确保集群的稳定性和高效运行。以下是一个详细的配置流程&#xff1a; 一、环境准备 选择服务器&#xff1a; 选择合适数量的服务器&#xff0c;通常为奇数&#xff08;如3台、5台等&#xff09;&#xff0c;以避免脑裂问题。确…...

Metasploit渗透测试之服务端漏洞利用

简介 在之前的文章中&#xff0c;我们学习了目标的IP地址&#xff0c;端口&#xff0c;服务&#xff0c;操作系统等信息的收集。信息收集过程中最大的收获是服务器或系统的操作系统信息。这些信息对后续的渗透目标机器非常有用&#xff0c;因为我们可以快速查找系统上运行的服…...

什么是原生IP?

代理IP的各个类型称呼有很多&#xff0c;且它们在网络使用和隐私保护方面扮演着不同的角色。今天将探讨什么是原生IP以及原生IP和住宅IP之间的区别&#xff0c;帮助大家更好地理解这两者的概念和实际应用&#xff0c;并选择适合自己的IP类型。 一、什么是原生IP&#xff1f; 原…...

【C++】unordered_map(set)

前言 C中的unordered容器&#xff08;例如std::unordered_set、std::unordered_map等&#xff09;底层是基于**哈希表&#xff08;Hash Table&#xff09;**实现的。哈希表是一种通过哈希函数将元素映射到特定“桶&#xff08;bucket&#xff09;”的容器&#xff0c;提供快速的…...

HTML 盒模型

盒模型&#xff08;box model&#xff09; 简介&#xff1a;盒模型&#xff08;Box Model&#xff09;是CSS中一个非常重要的概念&#xff0c;它定义了元素在网页上的布局和尺寸。 组成&#xff1a;内容&#xff08;Content&#xff09;、内边距&#xff08;Padding&#xff…...

node.js npm 安装和安装create-next-app -windowsserver12

1、官网下载windows版本NODE.JS https://nodejs.org/dist/v20.17.0/node-v20.17.0-x64.msi 2、安装后增加两个文件夹目录node_global、node_cache npm config set prefix "C:\Program Files\nodejs\node_global" npm config set prefix "C:\Program Files\nod…...

以下是对华为 HarmonyOS NETX 5属性动画(ArkTS)文档的结构化整理,通过层级标题、表格和代码块提升可读性:

一、属性动画概述NETX 作用&#xff1a;实现组件通用属性的渐变过渡效果&#xff0c;提升用户体验。支持属性&#xff1a;width、height、backgroundColor、opacity、scale、rotate、translate等。注意事项&#xff1a; 布局类属性&#xff08;如宽高&#xff09;变化时&#…...

FFmpeg 低延迟同屏方案

引言 在实时互动需求激增的当下&#xff0c;无论是在线教育中的师生同屏演示、远程办公的屏幕共享协作&#xff0c;还是游戏直播的画面实时传输&#xff0c;低延迟同屏已成为保障用户体验的核心指标。FFmpeg 作为一款功能强大的多媒体框架&#xff0c;凭借其灵活的编解码、数据…...

Keil 中设置 STM32 Flash 和 RAM 地址详解

文章目录 Keil 中设置 STM32 Flash 和 RAM 地址详解一、Flash 和 RAM 配置界面(Target 选项卡)1. IROM1(用于配置 Flash)2. IRAM1(用于配置 RAM)二、链接器设置界面(Linker 选项卡)1. 勾选“Use Memory Layout from Target Dialog”2. 查看链接器参数(如果没有勾选上面…...

CMake 从 GitHub 下载第三方库并使用

有时我们希望直接使用 GitHub 上的开源库,而不想手动下载、编译和安装。 可以利用 CMake 提供的 FetchContent 模块来实现自动下载、构建和链接第三方库。 FetchContent 命令官方文档✅ 示例代码 我们将以 fmt 这个流行的格式化库为例,演示如何: 使用 FetchContent 从 GitH…...

佰力博科技与您探讨热释电测量的几种方法

热释电的测量主要涉及热释电系数的测定&#xff0c;这是表征热释电材料性能的重要参数。热释电系数的测量方法主要包括静态法、动态法和积分电荷法。其中&#xff0c;积分电荷法最为常用&#xff0c;其原理是通过测量在电容器上积累的热释电电荷&#xff0c;从而确定热释电系数…...

【Nginx】使用 Nginx+Lua 实现基于 IP 的访问频率限制

使用 NginxLua 实现基于 IP 的访问频率限制 在高并发场景下&#xff0c;限制某个 IP 的访问频率是非常重要的&#xff0c;可以有效防止恶意攻击或错误配置导致的服务宕机。以下是一个详细的实现方案&#xff0c;使用 Nginx 和 Lua 脚本结合 Redis 来实现基于 IP 的访问频率限制…...

脑机新手指南(七):OpenBCI_GUI:从环境搭建到数据可视化(上)

一、OpenBCI_GUI 项目概述 &#xff08;一&#xff09;项目背景与目标 OpenBCI 是一个开源的脑电信号采集硬件平台&#xff0c;其配套的 OpenBCI_GUI 则是专为该硬件设计的图形化界面工具。对于研究人员、开发者和学生而言&#xff0c;首次接触 OpenBCI 设备时&#xff0c;往…...

解析奥地利 XARION激光超声检测系统:无膜光学麦克风 + 无耦合剂的技术协同优势及多元应用

在工业制造领域&#xff0c;无损检测&#xff08;NDT)的精度与效率直接影响产品质量与生产安全。奥地利 XARION开发的激光超声精密检测系统&#xff0c;以非接触式光学麦克风技术为核心&#xff0c;打破传统检测瓶颈&#xff0c;为半导体、航空航天、汽车制造等行业提供了高灵敏…...

基于鸿蒙(HarmonyOS5)的打车小程序

1. 开发环境准备 安装DevEco Studio (鸿蒙官方IDE)配置HarmonyOS SDK申请开发者账号和必要的API密钥 2. 项目结构设计 ├── entry │ ├── src │ │ ├── main │ │ │ ├── ets │ │ │ │ ├── pages │ │ │ │ │ ├── H…...

uni-app学习笔记三十五--扩展组件的安装和使用

由于内置组件不能满足日常开发需要&#xff0c;uniapp官方也提供了众多的扩展组件供我们使用。由于不是内置组件&#xff0c;需要安装才能使用。 一、安装扩展插件 安装方法&#xff1a; 1.访问uniapp官方文档组件部分&#xff1a;组件使用的入门教程 | uni-app官网 点击左侧…...