【echarts】echarts-liquidfill 水球图

news2024/9/20 5:56:43

echarts-liquidfill@3兼容echarts@5 echarts-liquidfill@2兼容echarts@4

npm install echarts
npm install echarts-liquidfill

在这里插入图片描述

设置水球图背景色和内边框样式

在这里插入图片描述

var option = {
    series: [{
        type: 'liquidFill',
        data: [0.6, 0.5, 0.4, 0.3],
        backgroundStyle: {
            borderWidth: 5,//边框宽度
            borderColor: 'red',//边框颜色
            color: 'yellow'//背景色
        }
    }]
};

设置外边框

在这里插入图片描述

设置outline.show为 false,隐藏外边框
var option = {
    series: [{
        type: 'liquidFill',
        data: [0.6, 0.5, 0.4, 0.3],
        outline: {
            show: false
        }
    }]
};

阴影

在这里插入图片描述

默认情况下,波浪和轮廓有阴影。以下是如何改变它们的方法

var option = {
    series: [{
        type: 'liquidFill',
        data: [0.6, 0.5, 0.4, 0.3],
        itemStyle: {
            shadowBlur: 0
        },
        outline: {
            borderDistance: 0,
            itemStyle: {
                borderWidth: 5,
                borderColor: '#156ACF',
                shadowBlur: 20,
                shadowColor: 'rgba(255, 0, 0, 1)'
            }
        }
    }]
};

outline外边框


outline.show {boolean}
是否显示外边框

outline.borderDistance {number}
外边框与内圈之间的距离。

 outline.itemStyle.borderColor {string}
外边框颜色

outline.itemStyle.borderWidth {number}
外边框宽度

outline.itemStyle.shadowBlur {number}
外边框阴影的模糊大小

outline.itemStyle.shadowColor {string}
外边框阴影颜色

backgroundStyle内圈

backgroundStyle.color {string}
内圈背景色

 backgroundStyle.borderWidth {string}
内圈描边边框

 backgroundStyle.borderColor {string}
内圈描边边框颜色

 backgroundStyle.itemStyle.shadowBlur {number}
背景色阴影的模糊大小

 backgroundStyle.itemStyle.shadowColor {string}
背景色阴影的颜色

 backgroundStyle.itemStyle.opacity {number}
背景色的透明度

itemStyle 水波

 itemStyle.opacity {number}
水波透明度

 itemStyle.shadowBlur {number}
水波阴影的模糊大小

 itemStyle.shadowColor {string}
水波阴影的颜色

emphasis.itemStyle.opacity {number}
当鼠标移入后,水波的透明度

参考:
echarts-liquidfill水球图教程

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

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

相关文章

怎样看待AI就业冲击?

技术进步对于就业的影响,从工业革命开始就是社会的焦点和研究的关注点。具有“卢德主义”性质的运动和思潮,曾经以各种面貌反复出现。不过,无论是从原因穷究结果,还是从本质看到表象,AI就业冲击这一次来得真的不同以往…

申请美区 Apple ID 完整步骤图解,轻松免费创建账户

苹果手机在下载一些软件时需要我们登录其 Apple ID 才能下载,但是由于一些限制国内的 Apple ID 在 App Store 中有一些限制不能下载某些软件,如何解决这个问题?那就是申请一个美区 Apple ID,怎么申请国外苹果账户呢?下…

国家超算互联网平台:模型服务体验与本地部署推理实践

目录 前言一、平台显卡选用1、显卡选择2、镜像选择3、实例列表4、登录服务器 二、平台模型服务【Stable Diffusion WebUI】体验1、模型运行2、端口映射配置3、体验测试 三、本地模型【Qwen1.5-7B-Chat】推理体验1、安装依赖2、加载模型3、定义提示消息4、获取model_inputs5、生…

typescript中interface常见3种用法

文章目录 函数类型对象类型【自命名】: (函数)对象类型 函数类型 作用:声明一个函数接口:可用于类型声明 | 不可implements 对象类型 作用:声明对象具备哪些实例接口:可用于类型 | 可implements 【自命名】&…

【C#】ThreadPool的使用

1.Thread的使用 Thread的使用参考:【C#】Thread的使用 2.ThreadPool的使用 .NET Framework 和 .NET Core 提供了 System.Threading.ThreadPool 类来帮助开发者以一种高效的方式管理线程。ThreadPool 是一个线程池,它能够根据需要动态地分配和回收线程…

DATE_ADD、DATE_SUB Function - Mysql

DATE_ADD、DATE_SUB Function - SQL DATE_ADD() 和 DATE_SUB() 用于在日期或日期时间上增加或减少指定的时间间隔。 1. DATE_ADD() DATE_ADD() 函数用于向指定的日期或日期时间值添加一个时间间隔。 DATE_ADD(date, INTERVAL expr unit)date: 要添加时间间隔的日期或日期时间…

【Lampiao靶场渗透】

文章目录 一、IP地址获取 二、信息收集 三、破解SSH密码 四、漏洞利用 五、提权 一、IP地址获取 netdiscover -i eth0 Arp-scan -l Nmap -sP 192.168.78.0/24 靶机地址:192.168.78.177 Kali地址:192.168.78.128 二、信息收集 nmap -sV -p- 192.…

实战:ElasticSearch 索引操作命令(补充)

四.ElasticSearch 操作命令 4.1 集群信息操作命令 4.1.1 查询集群状态 (1)使用 Postman 客户端直接向 ES 服务器发 GET 请求 http://hlink1:9200/_cat/health?v (2)使用服务端进行查询 curl -XGET "hlink1:9200/_cat/h…

装饰大师——装饰模式(Python实现)

大家好,今天我们继续来讲结构型设计模式,上一期我们介绍了组合模式,这个模式特别适合用于处理树形结构的问题,它能够让我们像处理单个对象一样来处理对象组合。 装饰模式(Decorator Pattern)是一种结构型设…

最新彩虹自助下单代发卡码知识付费商城多模板系统完整版去授权源码V6.9

最新彩虹的知识付费商城源码,后台可以选择多套模板,完整版去授权,支持对接多个资源网站,不怕无资源 推荐用宝塔上传后直接访问即可根据提示安装。 后面用户名/密码:admin/123456 PHP推荐使用7.0及以上版本 V6.9 1.修复SQL注入…

k8s 部署RuoYi-Vue-Plus之ingress域名解析

可参看https://blog.csdn.net/weimeibuqieryu/article/details/140798925 搭建ingress 1.创建Ingress对象 ingress-ruoyi.yaml其中host替换为你对应域名,需要解析域名到服务器, 同时为后端服务添加了二级域名解析 api. 访问http://xxx.xyz/就能访问前端&#xff0…

应急靶场(11):【玄机】日志分析-apache日志分析

题目 提交当天访问次数最多的IP,即黑客IP黑客使用的浏览器指纹是什么,提交指纹的md5查看index.php页面被访问的次数,提交次数查看黑客IP访问了多少次,提交次数查看2023年8月03日8时这一个小时内有多少IP访问,提交次数 …

【Redis 初阶】Redis 常见数据类型(Set、Zset、渐进式遍历、数据库管理)

一、Set 集合 集合类型也是保存多个字符串类型的元素的(可以使用 json 格式让 string 也能存储结构化数据),但和列表类型不同的是,集合中: 元素之间是无序的。(此处的 “无序” 是和 list 的有序相对应的…

重载云台摄像机如何通过国标28181接入到统一视频接入平台(视频国标接入平台)

目录 一、国标GB/T 28181介绍 1、国标GB/T28181 2、内容和特点 二、重载云台摄像机 1、定义 2、结构与设计 3、功能和优势 4、特点 5、应用场景 二、接入准备工作 1、确定网络环境 (1)公网接入 (2)专网传输 2、检查重…

软件测试基础1--功能测试

1、什么是软件测试? 软件是控制计算机硬件运行的工具。 软件测试:使用技术手段验证软件是否满足使用需求,为了发现软件功能和需求不相符合的地方,或者寻找实际输出和预期输出之间的差异。 软件测试的目的:减少软件缺陷…

golang JSON序列化

JSON JSON(JavaScript Object Notation) 是一种轻量级的数据交换格式。 易于人阅读和编写。同时也易于机器解析和生成。 它基于JavaScript Programming Language, Standard ECMA-262 3rd Edition - December 1999的一个子集。 json历史 [外链图片转存失败,源站可能有防盗链机…

080基于ssm+vue的大学生兼职信息系统

开发语言:Java框架:ssmJDK版本:JDK1.8服务器:tomcat7数据库:mysql 5.7(一定要5.7版本)数据库工具:Navicat11开发软件:eclipse/myeclipse/ideaMaven包:Maven3.…

获客工具大揭秘:为何它能让获客如此轻松?

你是不是也觉得,现在的市场环境,获客越来越难了? 今天我要给大家分享一个实用且高效的获客工具,它简直是营销界的福音! 1、关键词搜索 关键词搜索功能是获客工具的基础,也是其重要性不可小觑的原因。 这…

【数据中台】大数据管理平台建设方案(原件资料)

建设大数据管理中台,按照统一的数据规范和标准体系,构建统一数据采集﹣治理﹣共享标准、统一技术开发体系、统一接口 API ,实现数据采集、平台治理,业务应用三层解耦,并按照统一标准格式提供高效的…