vue3+ts 之echarts 水球图 liquidFill 的使用
创始人
2025-05-28 19:52:25
vue3+ts 之echarts 水球图 liquidFill 的使用
- 前言
- 一、echarts liquidfill.js水球图插件
- 二、使用步骤
- 1.上代码
- 总结
前言
项目框架使用的是 vben
语言用的是 vue3+ts
业务需求需要在页面中使用水球图,在此记录 echarts 图表中的水球图
看下效果 ~
写在前面 : 项目中本身已经用了 echarts 的图表,用的是按需引入,且是 TS 语法 (其实这里语法上基本一致)
一、echarts liquidfill.js水球图插件
水球图 (Liquid Fill Chart) 是 echats 是ECharts 的水球图是一个插件类型的图表。
是一个比较适合用来展示单个百分比数据的图表
在 ECharts 官网下载的完整版本不包含水球图，使用时，需要在引入 echarts.js 之后，另外引入水球图对应的 echarts-liquidfill.js
npm install echarts
npm install echarts-liquidfill
注意:echarts-liquidfill@3 版本匹配 echarts@5 版本，echarts-liquidfill@2 版本匹配 echarts@4 版本
其中在我自己引入 npm install echarts-liquidfill 操作的时候报错
最终用 cnpm 搞定了
引入成功后
二、使用步骤
1.上代码
总结
主要就是这个水球图不在 echarts 本身的基础图表库中,想用的话还需要单独安装 ~
相关内容
热门资讯
【spring】@Compon...
1.四个注解的作用是一样的 2.@Controller、@Service、@...
GDKOI2023 普及组游记
DAY 0 上午照常上whk，下午才出发。 下午本来说是3点半校门集合，...
uni-app:购物车页面--...
把结算区域封装为组件 在 components 目录中，新建 my-settle 结算...
A.构造（牛客挑战赛）
A.构造一、问题二、分析三、代码 一、问题 二、分析 我们只需要以中间作为分割点，一...
springboot+jsp基...
经过近期对 java 面向对象程序设计、前端知识以及JAVA springboot框架的掌握和学习&...
HTML语言
1.什么是HTML？ 1、HTML是超文本标记语言（Hyper Text...
【MySQL】MySQL的事务
目录 概念 什么是事务? 理解事务 事务操作 事务的特性 事务的隔离级别 事务的隔离级别-操作 ...
测试管理之路 —— 如何优化测...
😏作者简介：博主是一位测试管理者，同时也是一名对...
底层原理计划--MySQL
Mysql 存储引擎：mylsam/Innob/memoery…. Show engi...
文献阅读（49）—— 基于Tr...
文献阅读（49）—— 基于Transformer青光眼预测 文章目录文献...
你是真的“C”——实用memo...
你是真的“C”——各种实用memory类库函数的详细实现过程😎前言🙌...
[linux] Linux中环...
学校的服务器信息如下命令可以查询： cat /etc/redhat-release ...
计算机底层：奇偶校验码
计算机底层：奇偶校验码校验码的作用：在数据传输或存储时，可...
JavaWeb——urlPat...
1.一个Servlet配置多个访问路径 在WebServlet的配置里面urlPattern的类型...
指针 指针数组 数组指针 二级...
一、本文研究： 指针数组 与 二级指针 数组 与 数组指针 上面的两两一对...
Ubuntu20 + KVM虚...
1 命令汇总 # 查看一下linux是32位还是64位：file /bin/ls # ...
Spring Boot 整合 ...
Spring Boot 整合 RabbitMQ 多种消息模式 准备工作集成 RabbitMQ发布/订...
【BEV】TPVFormer复...
1. 前言 在环视图像的网络中，常使用鸟瞰图来进行特征提取，尽管比体素表...
华测RTK参数/华测GPS/华...
1.i93 视觉RTK华测导航i93视觉RTK是集成了华测目前新型视觉技术的一款革新型视觉RTK产品...
西瓜视频登录页面
题目 代码 登录页面td{width: 160px;height: ...
Android kotlin ...
文章目录 一、什么是SharedPreferences1、将数据存储到SharedPreferenc...
算法训练营day53_动态规划...
算法训练营day53_动态规划（3.17提前写） 1143.最长公共子序...
案例23-服务出现频繁掉线情况
目录 一、背景介绍 二、分析原因 1.nacos中data文件的作用 2. data路径下prot...
【文心一言】什么是文心一言，如...
文心一言什么是文心一言怎么获得内测资格接下来就给大家展示一下文学创作商业文案创作数理逻辑推算中文理解...
第31篇：Java流和文件操作...
目录 1、读取控制台输入流 1.1 从控制台读取多字符输入流 1.2 从控制台读取字符串流 2、读写...
Linux/Debian/Ub...
文章目录前言相关资源下载OpenCVCUDA下载CUDNN下载编译错误异常 前言 本文用来记录在l...
虚拟数字人和GPT-4的结合，...
最近，ChatGPT一直在互联网上狂飙，从 去年11月底推出到月活过亿&...
第三章 Liunx的常用命令
文章目录一、Liunx常用命令查看内存 free -m回到根目录 直接 cd 回车回到上一级目录 c...
素人做课会踩的3大坑，你中了几...
素人做课会踩的3大坑，你中了几个？大坑：盲目模仿别人做课的...
element输入框el-in...
element输入框el-input之格式控制 （1）限制输入的长度&#...