echarts插件-liquidFill(水球图)

news2024/9/22 15:30:02

echarts插件-liquidFill(水球图)

    • 1.下载
    • 2.引入:
    • 3.使用

在这里插入图片描述

1.下载

echarts.js下载:https://cdnjs.com/libraries/echarts
echarts-liquidfill.js下载:https://github.com/ecomfe/echarts-liquidfill

2.引入:

<script src='echarts.js'></script>
<script src='echarts-liquidfill.js'></script>

3.使用

 option = {
     series: [{
         type: 'liquidFill',
         amplitude: -10,//水面振幅
         waveAnimation: true,//静止水面
         // color:['#0460CA'],//设置波颜色,
         radius: '85%',
         outline: {//最外层边框设置s
             show: true,
             borderDistance: 5,//最外层挨着的白色区域
             itemStyle: {
                 color: 'none',
                 borderColor: '#0460CA',//外边框颜色
                 borderWidth: 3,//最外层宽度
                 shadowBlur: 20,
                 shadowColor: 'rgba(0, 0, 0, 0.25)'
             }
         },
         backgroundStyle: {
             color: '#ffffff',       // 内部球背景颜色
             borderWidth: 2,         // 内部球边框宽度
             borderColor: '#e3e3e3'  // 内部球边框颜色
         },
         shape: 'circle',//'circle', 'rect', 'roundRect', 'triangle', 'diamond', 'pin', 'arrow' 或者 svg路径
         data: [
             {value:0.5,
                 itemStyle: {
                     normal: {
                         color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
                             offset: 0,//0%时的颜色 从上往下看 最上面是0%
                             color: '#7DB6F7'
                         }, {
                             offset: 1,//100%时的颜色 从上往下看 最上面是0%
                             color: '#015FC9'
                         }],),
                     }
                 }
             },
         ],
         label: {
             position: ['50%', '36%'],
             formatter: function(params) {//自定义样式
                 console.log(params,222);
                 return '当月xxx' +'\n\n' +'{value|'+params.data.value+'}'+'  m³';
             },
             fontSize: 16,
             color: '#666666',
             rich: { //特定样式
                 value: {
                     fontSize: 23, 
                     fontWeight: 'bolder',
                     color: '#000000',
                 },
             },

         }

     }]

 
 };

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.coloradmin.cn/o/1132112.html

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈,一经查实,立即删除!

相关文章

Ubuntu虚拟机部署OpenStack

1、部署环境 系统&#xff1a;ubuntu-22.04.3-desktop-amd64DevStack版本&#xff1a;2024.1VMware Workstation&#xff1a;8G内存、4核处理器、100G硬盘/1、网络NAT模式/1 2、Ubuntu环境设置 点击show applications&#xff0c;选择Software&Updates 跟换Ubuntu的镜像…

Selenum八种常用定位(案例解析)

Selenium是一个备受推崇的工具。它有着丰富的功能&#xff0c;让我们能够与网页互动&#xff0c;执行各种任务&#xff0c;能为测试工程师和开发人员提供了很大的便利。 要充分利用Selenium&#xff0c;就需要了解如何正确定位网页上的元素。 接下来我将带大家共同探讨Seleni…

什么是WMS系统条码化管理

WMS系统是一种用于仓库管理的信息化系统&#xff0c;旨在提高仓库操作的效率和准确性。而在WMS系统中&#xff0c;条码化管理是一项关键的技术和方法&#xff0c;它通过将商品和物料打上条码&#xff0c;并利用扫描设备进行数据采集和处理&#xff0c;实现了仓库管理的全面自动…

全网最全的阿里云ACP认证介绍,看这篇就够了!

IT行业的朋友们在找工作的时候&#xff0c;一定会经常看到“有阿里云ACP认证优先”。这也就是说&#xff0c;有一个ACP认证会是你的加分项。 获得阿里云ACP认证的好处&#xff1a; 1、增加职场竞争力&#xff0c;为企业招投标提供资质证书&#xff1b; 2、官方认证证书&#…

echarts-进度条

echarts-进度条 option {title: {text:"xxxx统计",left: 1%,top: 0%,textStyle: {color: "#2E3033",fontSize:18,},},tooltip: {axisPointer: {type: "shadow",},},grid: {top: 9%,left: "12%",right:"22%",bottom:"0…

算法通过村第十六关-滑动窗口|白银笔记|经典题目讲解

文章目录 前言最长字串专场无重复字符的最长字串至多包含两个不同字串的最长子串至多包含K个不同字串的最长子串 长度最小的子数组盛水最多的容器寻找字串异位词(排序)字符串的排序找到字符串中所有字母异位 总结 前言 提示&#xff1a;所有的话语都颇为类似&#xff0c;而沉默…

视频号视频提取工具,操作简单!一键搞定

在当下信息爆炸的时代&#xff0c;视频成为了人们获取信息、娱乐和交流的重要方式。而随着视频创作的普及&#xff0c;越来越多的人希望能够从各类视频中提取出有价值的素材和片段&#xff0c;以便用于自己的创作需求。然而&#xff0c;对于大多数人来说&#xff0c;费时费力地…

极智项目 | 实战静默活体人脸检测

欢迎关注我的公众号 [极智视界]&#xff0c;获取我的更多经验分享 大家好&#xff0c;我是极智视界&#xff0c;本文来介绍 实战静默活体人脸检测。 本文介绍的 实战静默活体人脸检测&#xff0c;提供完整的可以一键执行的项目工程源码&#xff0c;获取方式有两个&#xff1a…

云音乐Android Cronet接入实践

背景 网易云音乐产品线终端类型广泛&#xff0c;除了移动端&#xff08;IOS/安卓&#xff09;之外&#xff0c;还有PC、MAC、Iot多终端等等。移动端由于上线时间早&#xff0c;用户基数大&#xff0c;沉淀了一些端侧相对比较稳定的网络策略和网络基础能力。然而由于各端在基础…

数字化营销如何推动企业营收增长?数字化营销要点有哪些?

在数字化席卷而来的时代&#xff0c;企业若想在激烈的市场竞争中脱颖而出&#xff0c;就得紧跟潮流&#xff0c;运用数字化营销手段更快、更准地触达目标客户&#xff0c;从而帮助企业更好地解读客户需求&#xff0c;捕捉痛点&#xff0c;实现精细化营销闭环。 数字化营销如何让…

信奥赛一本通:数据排序(合影效果、病人排队、明明的随机数、单词排序、出现次数超过一半的数、统计字符数)

数据排序 1182&#xff1a;合影效果1183&#xff1a;病人排队1184&#xff1a;明明的随机数1185&#xff1a;单词排序1186&#xff1a;出现次数超过一半的数1187&#xff1a;统计字符数 1182&#xff1a;合影效果 由题目可知&#xff0c;n个人有 性别与身高两种属性&#xff0c…

java连接mysql数据库结构表批量生产word文档

java连接数据库&#xff0c;数据库结构表批量生产word文档 pom包引用 <dependency><groupId>cn.smallbun.screw</groupId><artifactId>screw-core</artifactId><version>1.0.5</version> </dependency><dependency>&l…

一句话解释什么是出口IP

出口 IP 是指从本地网络连接到公共互联网时所使用的 IP 地址。这个 IP 地址是由 Internet 服务提供商(ISP)分配给你的,它可以用来标识你的网络流量的来源。如果你使用的是 NAT(网络地址转换)技术,则在 NAT 设备内部会进行地址转换,使得多个设备可以共享同一个公共 IP 地…

功能不够,SQL来凑,修改数据库的正确姿势?

修改数据库是一项关键任务&#xff0c;需要小心谨慎地执行&#xff0c;以确保数据的完整性和准确性。下面是一个详细的步骤指南&#xff0c;介绍了正确修改数据库的姿势。 第一步&#xff1a;备份数据库 在进行任何数据库修改之前&#xff0c;务必备份数据库。这样&#xff0…

TOUGH模型教程

详情点击公众号链接&#xff1a;全流程TOUGH系列软件 一、 第一&#xff1a;多相流流体基本特征及TOUGH系列软件 1.1多相流流体基本特征与解决思路 1.2 TOUGH2系列软件 1.3 TOUGH2软件功能模块 1.4 TOUGH2软件设计思路 1.5 TOUGH2软件数学模型与数值方法 二、基础 第二&…

HarmonyOS 音频开发指导:使用 OpenSL ES 开发音频播放功能

OpenSL ES 全称为 Open Sound Library for Embedded Systems&#xff0c;是一个嵌入式、跨平台、免费的音频处理库。为嵌入式移动多媒体设备上的应用开发者提供标准化、高性能、低延迟的 API。HarmonyOS 的 Native API 基于Khronos Group开发的OpenSL ES 1.0.1 API 规范实现&am…

全志R128基础组件开发指南——SPI LCD 显示驱动

SPI LCD 显示驱动 简介 R128 平台提供了 SPI DBI 的 SPI TFT 接口ACCC&#xff0c;具有如下特点&#xff1a; Supports DBI Type C 3 Line/4 Line Interface ModeSupports 2 Data Lane Interface ModeSupports data source from CPU or DMASupports RGB111/444/565/666/888 …

买学生台灯主要看什么?双十一值得入手的学生台灯

对于台灯来说主要是光源的问题。随着科技时代发展&#xff0c;那种原有的白炽灯&#xff0c;钨丝灯早已不见&#xff0c;换言之是更多的LED灯&#xff0c;再加之它体积小便于安装&#xff0c;而且光线更加均匀柔和&#xff0c;所以深受用户的青睐。 而台灯又是孩子学习必不可少…

2023年【汽车驾驶员(中级)】报名考试及汽车驾驶员(中级)证考试

题库来源&#xff1a;安全生产模拟考试一点通公众号小程序 汽车驾驶员&#xff08;中级&#xff09;报名考试根据新汽车驾驶员&#xff08;中级&#xff09;考试大纲要求&#xff0c;安全生产模拟考试一点通将汽车驾驶员&#xff08;中级&#xff09;模拟考试试题进行汇编&…

Shopee买家通系统全自动化操作简单方便又快速

Shopee买家通系统是一款专门针对虾皮买家号所开发的全自动化操作系统&#xff0c;可以自动注册、自动加购加心愿单、自动下单等。 1、全自动化注册 准备好账号需要的资料后即可运行注册任务&#xff0c;程序运行时可以自动输入手机号、自动接收短信、自动输入账号密码。账号支…