echarts实现水滴图

embedded/2024/9/24 6:27:32/

echarts_0">使用echarts实现水滴图

echartsliquidfill3echarts5__2">引入依赖,echarts-liquidfill@3兼容echarts@5; 安装依赖
 "echarts": "^5.4.3","echarts-liquidfill": "^3.1.0",
npm install echarts-liquidfill@3.1.0 -S
实现的效果图

在这里插入图片描述

构建一个水滴图的页面
<template><div class="dlsFirst"><div style="padding: 50px;">达标情况</div><div class="gender-con" id="proportionCon"></div></div>
</template>
<script>
import "echarts-liquidfill/src/liquidFill.js"; //js引入
export default {data() {return {};},mounted() {const myChart = echarts.init(document.getElementById('proportionCon'));const option = {// backgroundColor: "#485C6D", //背景色series: [{type: "liquidFill", //水位图radius: "90%", //显示比例center: ["50%", "50%"], //中心点amplitude: 20, //水波振幅data: [0.5], // data个数代表波浪数backgroundStyle: {borderWidth: 5, //外边框borderColor: "#33c8ff", //边框颜色// color: "#485C6D" //边框内部填充部分颜色},// color: ["#4db6ac"], //波浪颜色//这是设置波浪渐变色itemStyle: {normal: {color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{offset: 0,color: '#e744ff',},{offset: 1,color: '#33c8ff',},]),},},label: {//标签设置position: ["50%", "30%"],formatter: (params)=>{return (params.data * 100) + '%'}, //显示文本,fontSize: "20px", //文本字号,color: "#fff"},outline: {show: false //最外层边框显示控制}}]}let dbz={max:1000,value:633}option.series[0].data = [dbz.value / dbz.max]// 使用刚指定的配置项和数据显示图表。myChart.setOption(option);},
};
</script><style scoped>.gender-con{width:260px;height:300px;}
</style>

http://www.ppmy.cn/embedded/21887.html

相关文章

MYSQL 存储java.sql.Timestamp类型的数据时,mysql存储时间和java获取到的时间相差8小时

###JAVA JDBC驱动 com.mysql.cj.jdbc.DriverJDBC连接字符串 jdbc:mysql://127.0.0.1:3006/db?useUnicodetrue&characterEncodingUTF8&useLegacyDatetimeCodefalse&serverTimezoneUTCMySQL 时区 show global variables like “%time_zone%”; 问题分析 驱动…

mysql-sql-练习题-1

文章目录 环境注释建表 5张建库学生表课程表教师表分数表总表 语法书写顺序in学过/没学过完全相同 环境 Windows cmd&#xff08;普通用户/管理员&#xff09; mysql -uroot -pmysql版本&#xff0c;模式&#xff08;可自定义&#xff09; select version(),global.sql_mode…

tfrecord文件介绍、读取、写入介绍

1、tfrecord文件格式介绍 tfrecord文件格式&#xff0c;是深度学习框架tensorflow专用的一种文件格式&#xff0c;其底层使用protobuf&#xff0c;TensorFlow(python)也提供了api用于读取和写入tfrecord&#xff0c;非常方便&#xff0c;而对于golang语言&#xff0c;目前没有成…

物理隔离条件下的数据安全导入导出方案,哪种最安全可控?

数据安全在当今信息化社会中扮演着至关重要的角色&#xff0c;尤其像政府、军工等单位&#xff0c;有比较多的核心数据要保护&#xff0c;一旦出现数据泄漏&#xff0c;将造成不可估量的后果。因此为了保护数据安全&#xff0c;政府、军工等单位一般会采取纯物理隔离&#xff0…

黑马面试篇

课程地址&#xff1a;新版Java面试专题视频教程&#xff0c;java八股文面试全套真题深度详解&#xff08;含大厂高频面试真题&#xff09;_哔哩哔哩_bilibili 课程名称&#xff1a;新版Java面试专题视频教程&#xff0c;java八股文面试全套真题深度详解&#xff08;含大厂高频…

pytest教程-27-分布式执行用例插件-pytest-xdist

上一小节我们学习了pytest随机执行用例插件-pytest-random-order&#xff0c;本小节我们讲解一下pytest分布式执行用例插件pytest-xdist。 前言 平常我们手工测试用例非常多时&#xff0c;比如有1千条用例&#xff0c;假设每个用例执行需要1分钟。如果一个测试人员执行需要10…

PotatoPie 4.0 实验教程(23) —— FPGA实现摄像头图像伽马(Gamma)变换

为什么要进行Gamma校正 图像的 gamma 校正是一种图像处理技术&#xff0c;用于调整图像的亮度和对比度&#xff0c;让显示设备显示的亮度和对比度更符合人眼的感知。Gamma 校正主要用于修正显示设备的非线性响应&#xff0c;以及在图像处理中进行色彩校正和图像增强。 以前&am…

2024/4/28 C++day5

有以下类&#xff0c;完成特殊成员函数 class Person { string name; int *age; } class Stu:public Person { const double score; } #include <iostream> #include <string> using namespace std; class Person { string name; int *age ; publi…