echarts插件-liquidFill(水球图)

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: {//最外层边框设置sshow: 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.rhkb.cn/news/170367.html

如若内容造成侵权/违法违规/事实不符,请联系长河编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

Django token 认证原理与实战

概述 cookie、session 与token 的区别 Cookie的作用 cookie的存储量很小&#xff0c;一般不超过4Kcookie并不会保存很多信息&#xff0c;一般用来存储登录状态cookie是以键值对进行表示的(keyvalue),例如nameli,表示cookie的名字是name,cookie携带的值是licookie的存储分为会…

WebSocket 入门案例

目录 WebSocket入门案例WebSocket-server新增项目:添加依赖:yml:启动类&#xff1a; frontend-server前端项目&#xff1a;添加依赖&#xff1a;添加yml&#xff1a;启动类&#xff1a;前端引入JS:前端页面&#xff1a;后端代码&#xff1a;测试&#xff1a; WebSocket 入门案…

一句话解释什么是出口IP

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

在Mac上使用安卓桌面模式

在安装Homeblew的基础上 替换国内源 export HOMEBREW_API_DOMAIN"https://mirrors.tuna.tsinghua.edu.cn/homebrew-bottles/api" export HOMEBREW_BREW_GIT_REMOTE"https://mirrors.tuna.tsinghua.edu.cn/git/homebrew/brew.git" brew update 安装Scrcpy …

DC/DC升压模块电源 高电压稳压输出 12v24v28v48v转600V800V1000V1100V1300V1500V2000V3000V4000V

特点 ● 效率高达 80% ● 2*2 英寸标准封装 ● 单电压输出 ● 价格低 ● 稳压输出 ● 工作温度: -40℃~85℃ ● 阻燃封装&#xff0c;满足UL94-V0 要求 ● 温度特性好 ● 可直接焊在PCB 上 应用 HRA(B) 0.1~30W 系列模块电源是一种DC-DC升压变换器。该模块电源的输入电压分为…

conda虚拟环境配置

命令行输入&#xff0c;conda -V 确定conda版本 创建自己的conda虚拟环境 activate 回车 conda create -n 名字 python版本号 执行命令 确认执行命令 输入y 创建完成 激活环境 conda activate 名字 进入python环境 python 退出 exit() conda deactive

Redis -- 基础知识2

1.Redis客户端介绍 1.基础介绍 Redis是一种客户端-服务器结构的程序&#xff0c;通过网络进行互动 客户端的多种形态 1.自带了命令行客户端&#xff1a;redis-cil 2.图形化界面的客户端&#xff1a;依赖windows系统&#xff0c;连接服务器有诸多限制&#xff0c;不建议使用 3.基…

gRPC之gateway集成swagger

1、gateway集成swagger 1、为了简化实战过程&#xff0c;gRPC-Gateway暴露的服务并未使用https&#xff0c;而是http&#xff0c;但是swagger-ui提供的调用服 务却是https的&#xff0c;因此要在proto文件中指定swagger以http调用服务&#xff0c;指定的时候会用到文件 prot…

CV计算机视觉每日开源代码Paper with code速览-2023.10.23

精华置顶 墙裂推荐&#xff01;小白如何1个月系统学习CV核心知识&#xff1a;链接 点击CV计算机视觉&#xff0c;关注更多CV干货 论文已打包&#xff0c;点击进入—>下载界面 点击加入—>CV计算机视觉交流群 1.【目标检测】Zone Evaluation: Revealing Spatial Bias i…

Python使用psycopg2读取PostgreSQL的geometry字段出现二进制乱码

1、问题 读取geometry字段出现二进制乱码 查询语句&#xff1a; sql "select * from public"Note: 这种写法在PostgreSQL中直接查询, 没有问题&#xff0c;不会报错。 但是在Python中查询&#xff0c;如果导出的geom还是一长串的geometry 格式的话&#xff0c; …

招商平台小程序开发制作方案

招商平台小程序旨在为企业提供一个便捷、高效的招商信息发布和合作伙伴寻找的平台。通过整合企业资源&#xff0c;打造一个集信息发布、信息筛选、在线沟通、合作洽谈等功能于一体的综合性招商服务平台。 一、招商平台小程序的用户需求 1. 企业用户&#xff1a;需要一个便捷的…

ELK概述部署和Filebeat 分布式日志管理平台部署

ELK概述部署、Filebeat 分布式日志管理平台部署 一、ELK 简介二、ELK部署2.1、部署准备2.2、优化elasticsearch用户拥有的内存权限2.3、启动elasticsearch是否成功开启2.4、浏览器查看节点信息2.5、安装 Elasticsearch-head 插件2.6、ELK Logstash 部署&#xff08;在 Apache 节…

Pytorch使用torchvision.datasets.ImageFolder读取数据集,数据集的内容排列状况

当使用torchvision.datasets.ImageFolder读取猫狗数据集时,dataset中存的图片是 猫狗猫狗猫狗猫狗 还是 猫猫猫猫狗狗狗狗 呢? 数据集文件的存放路径如下图 测试代码如下 import torch import torchvisiontransform torchvision.transforms.Compose([torchvision.transform…

【AI视野·今日Robot 机器人论文速览 第五十七期】Wed, 18 Oct 2023

AI视野今日CS.Robotics 机器人学论文速览 Wed, 18 Oct 2023 Totally 17 papers &#x1f449;上期速览✈更多精彩请移步主页 Daily Robotics Papers Underwater and Surface Aquatic Locomotion of Soft Biomimetic Robot Based on Bending Rolled Dielectric Elastomer Actua…

Tomcat 和 HTTP 协议

目 录 HTTP 协议HTTP 是什么理解 HTTP 协议的工作过程抓包结果HTTP请求HTTP响应 HTTP 请求 (Request)认识 URL认识 "方法" (method)认识请求 "报头"&#xff08;header&#xff09;认识请求 "正文" (body) HTTP 响应认识 "状态码" (st…

【STM32】时钟设置函数(寄存器版)

一、STM32时钟设置函数移植 1.时钟模块回顾 一个疑问 前面代码并没有设置时钟为什么可以直接使用。 2.时钟树 3.时钟树分析 1.内部晶振&#xff08;HSI&#xff09; 内部晶振不稳定&#xff0c;当我们上电后&#xff0c;会自动产生振动&#xff0c;自动产生时钟&#xff0c;…

代碼隨想錄算法訓練營|第四十五天|1049. 最后一块石头的重量 II、494. 目标和、474.一和零。刷题心得(c++)

目录 讀題 1049. 最后一块石头的重量 II 自己看到题目的第一想法 看完代码随想录之后的想法 494. 目标和 自己看到题目的第一想法 看完代码随想录之后的想法 474.一和零 自己看到题目的第一想法 看完代码随想录之后的想法 1049. 最后一块石头的重量 II - 實作 思路 …

6. Cesium中的Entity

1. Entity类简介 Entity类是Cesium中描述和呈现地球上实体对象的核心类。它具有丰富的属性和方法&#xff0c;用于控制和定制地理实体的外观和行为。Entity对象可以表示各种地理实体&#xff0c;如点、线、面等&#xff0c;并具有位置、方向、模型、标牌、折线、多边形等属性&…

利用Jpom在线构建Spring Boot项目

1 简介 前面介绍了运用Jpom构建部署Vue项目&#xff0c;最近研究了怎么部署Spring Boot项目&#xff0c;至此&#xff0c;一套简单的前后端项目就搞定了。 2 基本步骤 因为就是一个简单的自研测试项目&#xff0c;所以构建没有使用docker容器&#xff0c;直接用java -jar命令…

【Axure高保真原型】图片手电筒效果

今天和大家分享图片手电筒效果的原型模板&#xff0c;鼠标移入图片区域后&#xff0c;会显示一个光圈&#xff0c;光圈会跟随鼠标移动&#xff0c;照亮对应的区域&#xff1b;鼠标拖动时可以移动地图图片&#xff0c;查看更多区域的内容&#xff0c;具体效果可以打开下方原型地…