uniapp+vue3+ts+vite+echarts开发图表类小程序,将echarts导入项目使用的详细步骤,耗时一天终于弄好了
想在uniapp和vue3环境中使用echarts是一件相当前卫的事情,官方适配的还不是很好,echarts的使用插件写的是有些不太清晰的,这里我花费了一天的时间,终于将这个使用步骤搞清楚了,并且建了一个仓库,大家可以直接clone下来使用。先看一下pc端和小程序端的效果:
微信小程序和抖音小程序等都支持:
使用步骤如下
第一步:下载插件包
下载echarts插件包,并导入到项目中,然后使用插件中的组件创建容器,并导入数据就可以了。
echarts插件包地址:echarts - DCloud 插件市场
如果你是使用hbuilder写的,可以直接导入,如果你是vscode写的,就下载压缩包:
我这里将我下载好的zip包分享出来:lime-echart_0.8.1.zip - 蓝奏云
下载好解压然后将解压后的组件导入到项目的components下面:

并且将静态资源放到静态文件夹中:
第二步:安装echarts包
pnpm add echarts
-or-
npm install echarts
第三步:在页面中导入依赖并运行
然后在页面中导入这个LEchart这个组件:
将依赖按照不同的平台区分导入到页面组件中:下面是我的页面源代码
<template><view><view class="title">我的主页</view><view><LEchart class="echart" ref="chart" @finished="init"></LEchart></view></view>
</template><script setup>
import LEchart from '@/components/l-echart/l-echart.vue'
// lime-echart是一个demo的组件,用于测试组件
// import LEchart from '@/components/lime-echart/lime-echart.vue'
import { onMounted, reactive, ref } from "vue"
// nvue 不需要引入
// #ifdef VUE3
// #ifdef MP
// 由于vue3 使用vite 不支持umd格式的包,小程序依然可以使用,但需要使用require
const echarts = require('../../static/echarts.min');
// #endif
// #ifndef MP
// 由于 vue3 使用vite 不支持umd格式的包,故引入npm的包
import * as echarts from 'echarts';
// #endif
// #endiflet chart = ref(); // 获取dom
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']
}
// 组件能被调用必须是组件的节点已经被渲染到页面上
onMounted(() => {chart.value.init(echarts, chart => {chart.setOption(state.option);});
})// 渲染完成
const init = () => {console.log("渲染完成");
}
</script><style scopedlang='scss' scoped>
.echart {width: 100%;height: 300px;
}.title {text-align: center;
}
</style>
最后运行小程序或者h5就可以看到效果了:
相关文章:
uniapp+vue3+ts+vite+echarts开发图表类小程序,将echarts导入项目使用的详细步骤,耗时一天终于弄好了
想在uniapp和vue3环境中使用echarts是一件相当前卫的事情,官方适配的还不是很好,echarts的使用插件写的是有些不太清晰的,这里我花费了一天的时间,终于将这个使用步骤搞清楚了,并且建了一个仓库,大家可以直…...
分布式服务器架构的优点有哪些?
在当今数字化时代,随着互联网的普及和技术的不断进步,企业和组织面临着处理越来越多的数据和用户请求的挑战。为了应对这些挑战,分布式服务器架构应运而生。分布式服务器架构通过将任务和数据分散到多个服务器上,提供了许多优点&a…...
Zephyr-7B论文解析及全量训练、Lora训练
文章目录 一、Zephyr:Direct Distillation of LM Alignment1.1 开发经过1.1.1 Zephyr-7B-alpha1.1.2 Zephyr-7B-beta 1.2 摘要1.3 相关工作1.4 算法1.4.1 蒸馏监督微调(dSFT)1.4.2 基于偏好的AI反馈 (AIF)1.4.3 直接蒸馏偏好优化&…...
如何使用群晖虚拟机部署本地网页文件实现公网远程访问?
文章目录 前言1. 安装网页运行环境1.1 安装php1.2 安装webstation 2. 下载网页源码文件2.1 访问网站地址并下载压缩包2.2 解压并上传至群辉NAS 3. 配置webstation3.1 配置网页服务3.2 配置网络门户 4. 局域网访问静态网页配置成功5. 使用cpolar发布静态网页,实现公网…...
初识RabbitMQ - 安装 - 搭建基础环境
RabbitMQ 各个名词介绍 Broker:接收和分发消息的应用,RabbitMQ Server 就是 Message Broker Virtual host:出于多租户和安全因素设计的,把 AMQP 的基本组件划分到一个虚拟的分组中,类似于网络中的 namespace 概念。当…...
C/C++ #运算符、##运算符、变参宏 ...和_ _VA_ARGS_ _
文章目录 用宏参数创建字符串:#运算符函数宏#号作为一个预处理运算符,可以把记号转换成字符串 预处理器粘合剂:##运算符变参宏:...和_ _VA_ARGS_ _参考 用宏参数创建字符串:#运算符 函数宏 下面是一个类函数宏&#…...
【全网首发】【Python】Python控制parrot ARDrone 2.0无人机
🎉欢迎来到Python专栏~Python控制parrot ARDrone 2.0无人机 ☆* o(≧▽≦)o *☆嗨~我是小夏与酒🍹 ✨博客主页:小夏与酒的博客 🎈该系列文章专栏:Python学习专栏 文章作者技术和水平有限,如果文中出现错误…...
DPU国产生态版图又双叒扩大了
DPU朋友圈迎来30新伙伴!近期,中科驭数已与联想、中科可控、统信、欧拉、龙蜥社区、新支点、亚信科技、人大金仓、瀚高、南大通用、GreatSQL、阿里云、曙光云等超30家关键厂商完成兼容性互认证。测试报告显示,中科驭数DPU系列产品在产品兼容性…...
YOLOv5算法进阶改进(3)— 引入深度可分离卷积C3模块 | 轻量化网络
前言:Hello大家好,我是小哥谈。深度可分离卷积是一种卷积神经网络中的卷积操作,它可以将标准卷积分解为两个较小的卷积操作:深度卷积和逐点卷积。深度卷积是在每个输入通道上分别执行卷积,而逐点卷积是在所有通道上执行卷积。这种分解可以大大减少计算量和参数数量,从而提…...
Linux的root用户
拥有最大权限的用户名为root su和exit命令 su命令就是用于账户切换的系统命令Switch user 语法:su - [用户名] -符号可选,表示是否在切换用户后加载环境变量,建议带上 参数:用户名,表示要切换的用户,用…...
linux环境安装SVN,以及常用的SVN操作
1、检查系统是否已经安装如果安装就卸载 检查: svnserve --version 卸载: yum remove subversion 2、安装 yum install subversion 3、建立SVN库(文件位置可自由) 创建仓库文件夹: mkdir -p /opt/svn/repositor…...
30天精通Nodejs--第十天:OS
目录 引言OS 模块简介核心概念基本用法获取 CPU 架构获取内存信息获取系统平台高级特性CPUS网络接口引言 os 模块是一个非常重要的组成部分,它提供了一系列用于获取和处理操作系统信息的工具函数,使得我们能够在 Node.js环境中获取有关系统的各种信息。在本文中,将深入介绍…...
C#使用时序数据库 InfluxDB
一、安装 https://docs.influxdata.com/influxdb/v2/install/?tWindows 解压后使用cmd运行 访问 localhost:8086 配置 第一次登入会初始化 配置登入账号 保存TOKEN 这个TOKEN用于后期代码链接访问数据库,忘记了只能删除重新生成 点击QUCK START进入管理页面 …...
正则表达式:验证中英文长度限制16个字符(8个中文),支持中文字母数字或者下划线
1.中文字母数字或者下划线 2.长度限制16个字符(8个中文) html: <input class"form-control text" maxlength"17" name"name" placeholder"输入16个字符以内的备注名称" type"text" v-model.trim"remarkName" …...
kafka和rocketMq的区别
kafka topic 中每一个分区会有 Leader 与 Follow。Kafka 的内部机制可以保证 topic 某一个分区的 Leader 与 Follow 不在同一台机器上 Leader 节点承担一个分区的读写,Follow 节点只负责数据备份 如果 Leader 分区所在的 Broker 节点宕机,会触发主从节…...
Git推送本地代码到远程仓库
Git推送本地代码到远程仓库 1、首先需要安装Git,如果已经安装,请跳过。下载地址:https://git-for-windows.github.io/ 2、安装好git服务器后。首先找到你项目的文件夹,比如项目名称为Item,进入到这个文件夹࿰…...
OncePerRequestFilter详解
OncePerRequestFilter是什么 OncePerRequestFilter是Spring框架提供的一个过滤器,确保在一次HTTP请求期间只执行一次特定的过滤器逻辑。它继承了GenericFilterBean类,并实现了javax.servlet.Filter接口。在Spring框架中,过滤器是一种拦截器&…...
Accelerate 0.24.0文档 二:DeepSpeed集成
文章目录 一、 DeepSpeed简介二、DeepSpeed集成(Accelerate 0.24.0)2.1 DeepSpeed安装2.2 Accelerate DeepSpeed Plugin2.2.1 ZeRO Stage-22.2.2 ZeRO Stage-3 with CPU Offload2.2.3 accelerate launch参数 2.3 DeepSpeed Config File2.3.1 ZeRO Stage-…...
【系统架构设计】架构核心知识: 2.3 UML图
目录 一 UML 1 用例图 2 类图/对象图关系 3 活动图 4 顺序图 5 通信图...
2023年09月青少年软件编程(C语言)等级考试试卷(三级)
青少年软件编程(C语言)等级考试试卷(三级) 谁是你的潜在朋友 “臭味相投”——这是我们描述朋友时喜欢用的词汇。两个人是朋友通常意味着他们存在着许多共同的兴趣。然而作为一个宅男,你发现自己与他人相互了解的机会…...
【网络】每天掌握一个Linux命令 - iftop
在Linux系统中,iftop是网络管理的得力助手,能实时监控网络流量、连接情况等,帮助排查网络异常。接下来从多方面详细介绍它。 目录 【网络】每天掌握一个Linux命令 - iftop工具概述安装方式核心功能基础用法进阶操作实战案例面试题场景生产场景…...
简易版抽奖活动的设计技术方案
1.前言 本技术方案旨在设计一套完整且可靠的抽奖活动逻辑,确保抽奖活动能够公平、公正、公开地进行,同时满足高并发访问、数据安全存储与高效处理等需求,为用户提供流畅的抽奖体验,助力业务顺利开展。本方案将涵盖抽奖活动的整体架构设计、核心流程逻辑、关键功能实现以及…...
【WiFi帧结构】
文章目录 帧结构MAC头部管理帧 帧结构 Wi-Fi的帧分为三部分组成:MAC头部frame bodyFCS,其中MAC是固定格式的,frame body是可变长度。 MAC头部有frame control,duration,address1,address2,addre…...
中南大学无人机智能体的全面评估!BEDI:用于评估无人机上具身智能体的综合性基准测试
作者:Mingning Guo, Mengwei Wu, Jiarun He, Shaoxian Li, Haifeng Li, Chao Tao单位:中南大学地球科学与信息物理学院论文标题:BEDI: A Comprehensive Benchmark for Evaluating Embodied Agents on UAVs论文链接:https://arxiv.…...
UE5 学习系列(三)创建和移动物体
这篇博客是该系列的第三篇,是在之前两篇博客的基础上展开,主要介绍如何在操作界面中创建和拖动物体,这篇博客跟随的视频链接如下: B 站视频:s03-创建和移动物体 如果你不打算开之前的博客并且对UE5 比较熟的话按照以…...
蓝牙 BLE 扫描面试题大全(2):进阶面试题与实战演练
前文覆盖了 BLE 扫描的基础概念与经典问题蓝牙 BLE 扫描面试题大全(1):从基础到实战的深度解析-CSDN博客,但实际面试中,企业更关注候选人对复杂场景的应对能力(如多设备并发扫描、低功耗与高发现率的平衡)和前沿技术的…...
三体问题详解
从物理学角度,三体问题之所以不稳定,是因为三个天体在万有引力作用下相互作用,形成一个非线性耦合系统。我们可以从牛顿经典力学出发,列出具体的运动方程,并说明为何这个系统本质上是混沌的,无法得到一般解…...
mysql已经安装,但是通过rpm -q 没有找mysql相关的已安装包
文章目录 现象:mysql已经安装,但是通过rpm -q 没有找mysql相关的已安装包遇到 rpm 命令找不到已经安装的 MySQL 包时,可能是因为以下几个原因:1.MySQL 不是通过 RPM 包安装的2.RPM 数据库损坏3.使用了不同的包名或路径4.使用其他包…...
08. C#入门系列【类的基本概念】:开启编程世界的奇妙冒险
C#入门系列【类的基本概念】:开启编程世界的奇妙冒险 嘿,各位编程小白探险家!欢迎来到 C# 的奇幻大陆!今天咱们要深入探索这片大陆上至关重要的 “建筑”—— 类!别害怕,跟着我,保准让你轻松搞…...
LRU 缓存机制详解与实现(Java版) + 力扣解决
📌 LRU 缓存机制详解与实现(Java版) 一、📖 问题背景 在日常开发中,我们经常会使用 缓存(Cache) 来提升性能。但由于内存有限,缓存不可能无限增长,于是需要策略决定&am…...
