- 综合排序
- 最热优先
- 最新优先
- 来自专栏TopFE
echarts 画动态水球
接下来我们看 一下一些常见的水球项目。 有这样的： 这样的： 甚至还有这样的： 今天这篇文章就带领大家"从零到一"的构建水球图。话不多说，开干！ 我们想在示例中找一下有没有类似水球之类的组件，遗憾的是，我们并没有在官网提供的示例中找到。 radius: 水球的半径，可以是相对值 % 也可以是绝对值 px。 center: 水球所处的位置, 第一个值为X轴，第二个值为Y轴。可以是相对值 % 也可以是绝对值 px。 data: 水球内部波浪所处的位置,可以为数值（ 范围 0-1 ）也可以为Object对象进行更多配置。 label : 水球内部文字 最终效果图
2.3K20编辑于 2022-01-24 - 来自专栏3d图表
有趣的3D图表水球：从 ECharts 到 RayChart 的升维打击
有趣的3D图表水球：从 ECharts 到 RayChart 的升维打击在数据可视化大屏中，“水球图”（Liquid Fill Chart）绝对是展示百分比数据（如CPU使用率、完成度、剩余电量）的颜值担当 今天我们来聊聊一个有趣的话题：如何用 RayChart 手搓一个真实的 3D 水球，并对比它与 ECharts 水球的区别。 核心构成一个真实的 3D 水球通常由三部分组成：玻璃外壳：一个透明的球体容器。液体主体：球体内部被截断的下半部分。液体表面：一个随波浪起伏的顶盖。技术实现细节A. 环境光遮蔽 交互 鼠标悬浮高亮 360度旋转、缩放、甚至可以晃动液体 性能开销⭐ (极低) ⭐⭐⭐ (中高，依赖 GPU) 适用场景普通报表、H5 如果你在做酷炫的数据大屏，想要那种“看起来很贵”的效果，RayChart 的 3D 水球绝对值得一试。
36100编辑于 2026-01-13 - 来自专栏算法channel
动态线图+水球图，非常精美！
'; 拼接图形：img=img1+img2+... 2 水球图边缘如何做出立体感？ ? 水球图显示某几个数值大小，波浪流动，显示非常醒目。通过2个水球图的对比显示拜登和川普最新支持率情况。 细心的读者可能注意到，水球图边缘有一种立体感，这种是如何做出来的？ 以上作品所有完整源码，只需在我的公众号里回复 geo 即可。
88510发布于 2020-10-23 - 来自专栏技术汇总专栏
Pyecharts水球图深度探索与创意应用
基础水球图首先，让我们创建一个基础的水球图，展示某个指标的完成比例。 运行代码后，将生成一个HTML文件，其中包含了可交互的水球图。4. 自定义水球图样式Pyecharts允许用户自定义水球图的样式，包括颜色、半径、边框等。 5. 多水球图展示有时候，我们需要在同一图表中展示多个水球图，以对比不同指标的完成情况。 liquid_chart.add("Liquid", new_data, is_animation=True, animation_duration=1000) time.sleep(5) # 模拟5秒更新一次数据 # 启动更新数据的线程 threading.Thread(target=update_data).start() return liquid_chart#
66810编辑于 2024-02-02 - 来自专栏CSDNToQQCode
pyecharts第六节、水球图
需要更新【pyecharts】 pip install pyecharts_snapshot pip install -i https://pypi.tuna.tsinghua.edu.cn/simple pyecharts==0.5.11 创建测试类【demo6.html】 输入以下编码 from pyecharts import Page from pyecharts import Liquid page = Page() liquid = Liquid("内存占比") liquid.a
34010编辑于 2022-11-29 - 来自专栏数据山谷
各种各种的水球图全员报到
小编今天给大家带来了各式各样的水球图，虽然绘制简单，但在我们的日常生活中可是用处很大的哦~~~ 而且水球图的家族庞大，一起看看他们的风姿吧！ Liquid # 导入水球图的形状配置项 from pyecharts.globals import SymbolType 首先我们最常见的水球图出场~~ c = ( Liquid() (title_opts=opts.TitleOpts(title="无边框水球")) ) c.render_notebook() 效果 ? 接下来展示水球图的各种形状~~~ 方形水球 c = ( Liquid() .add("lq", [0.87,0.65,0.23], is_outline_show=False, shape 水球图家族全员跟大家报到了哦，感兴趣的小伙伴可以动动小手实现一下~ 临近年底报告的日子了，可以将我们学会的图插到 PPT 中， 也能为大家的报告增光添彩！
65230发布于 2021-01-08 - 来自专栏大史住在大前端
【带着canvas去流浪（7）】绘制水球图
任务说明 使用原生canvasAPI绘制水球图，这将是一个非常有意思的挑战任务。 球形剪裁区域 水波的范围是不能流出球形的外轮廓的，此处的做法是在绘制水波之前，先使用context.clip( )方法将水波的可见绘图区域控制在水球之内即可，如果还有水球外的图形需要绘制，记得在每一帧绘制完水波后调用 示例代码 let options = { value:0, a:20,//振幅 pos:[300,300],//水球图位置 r:160,//水球图半径 color *(本例中并没有水球以外的部分需要绘制，实际上这里不需要加入帧动画循环中，只需要在开头设置一次即可。) 关于canvas抗锯齿 如果仔细查看上面的水球外圆，会发现水球图的外侧不是很平整，看起来会有很多锯齿。
1.7K00发布于 2019-04-18 - 来自专栏呆呆敲代码的小Y 公众号
【Unity ShaderGraph】| 制作一个 高级流体水球效果
前言 本文将使用ShaderGraph制作一个 高级流体水球 ，可以直接拿到项目中使用。 【Unity ShaderGraph】| 快速制作一个 流体水球效果 一、效果展示 资源下载方式： ShaderGraph效果资源整合文件【其中内容持续更新】 二、简易流体水球效果 首先在Project 双击打开该ShaderGraph，连接节点如下： 通过调节Slider可以控制水球大小。 三、进阶流体水球效果 在上面的水球效果基础上再加一层用于显示水花效果，连接节点如下所示： 通过调节定义的外部Float节点progress可以调节水球的大小饱和度。 progress = 0f; } } } 将脚本挂载到场景的Image组件中，并将刚才创建的材质球和Text组件拖到脚本中，如下图所示： 需要注意的是要将控制水球进度的
1.3K30编辑于 2023-10-28 - 来自专栏码客
Echarts中使用水球图和标签云图(词云图)
水球图 对于Echarts4.9及以下是内置水球图的，但是5.x以上版本是没有的。 echarts-liquidfill 安装 npm install echarts npm install echarts-liquidfill@3 注意: echarts-liquidfill@3 版本匹配 echarts@5
1.5K20编辑于 2023-10-23 - 来自专栏章鱼的慢慢技术路
Direct3D 11 Tutorial 5: 3D Transformation_Direct3D 11 教程5：3D转型
资源目录 (SDK root)\Samples\C++\Direct3D11\Tutorials\Tutorial05 Github 转型 在3D图形中，变换通常用于对顶点和矢量进行操作。 在3D中，用于翻译的矩阵具有形式。 例如，要沿X轴（负X方向）移动顶点-5单位，我们可以将其与此矩阵相乘： 1 0 0 0 0 1 0 0 0 0 1 0 -5 0 0 1 如果我们将此应用于以原点为中心的立方体对象 ，则结果是该框向负X轴移动5个单位，如图5所示，在应用平移之后。 在3D中，空间通常由原点和来自原点的三个唯一轴定义：X，Y和Z.计算机图形中通常使用多个空间：对象空间，世界空间，视图空间，投影空间和屏幕空间。 图2.在对象空间中定义的立方体 ?
2.4K40发布于 2018-12-04 - 来自专栏前端数据可视化
p5.js 加载 3D 模型（loadModel）
loadModel() 是 p5.js 中用于加载 3D 模型的核心函数，它能将 OBJ 或 STL 格式的 3D 模型文件转换为 p5.js 可处理的 p5.Geometry 对象，之后可以通过 model 5/2 # 前面 f 2/1/3 3/2/3 5/5/3 # 左面 f 3/1/4 4/2/4 5/5/4 # 后面 f 4/1/5 1/2/5 5/5/5 myModel = loadModel('assets/cube.obj'); } function setup() { createCanvas(800, 600, WEBGL); // 创建3D 画布（必须用WEBGL渲染模式） } function draw() { background(220); // 3D变换：让模型旋转，更易观察 rotateX(frameCount 以上就是本文的全部内容啦，想了解更多 P5.js 用法欢迎关注 《P5.js中文教程》。 点赞 + 关注 + 收藏 = 学会了
19810编辑于 2026-02-20 - 来自专栏hightopo
原 基于 HTML5 WebGL 的 3D
http://www.hightopo.com/demo/Plucker/ 代码实现 创建场景 首先是创建一个三维场景（https://hightopo.com/guide/guide/core/3d window.addEventListener('resize', function () { self.iv(); }, false);//窗口大小改变事件，调用刷新函数 } 整个大环境搭建好了后，我们需要向场景中添加 3D
1.9K60发布于 2018-06-05 - 来自专栏Python疯子
Python强大的pyecharts绘画优美图形<三>
"雪纺衫", "裤子", "高跟鞋", "袜子"] v1 =[5, 20, 36, 56, 78, 100] v2 =[55, 60, 16, 20, 15, 80] 仪表盘 # 仪表盘 gauge = symbolSize": 20}, {"name": "结点3", "symbolSize": 30}, {"name": "结点4", "symbolSize": 40}, {"name": "结点5" /data/03-01水球.html') # 圆形水球 liquid2 =Liquid("水球图示例") liquid2.add("Liquid", [0.6, 0.5, 0.4, 0.3], is_liquid_outline_show /data/03-02圆形水球.html') # 菱形水球 liquid3 =Liquid("水球图示例") liquid3.add("Liquid", [0.6, 0.5, 0.4, 0.3], is_liquid_animation /data/03-03菱形水球.html') ?
1.3K30发布于 2018-09-06 - 来自专栏hightopo
原 基于 HTML5 WebGL 的 3D
前言 用 WebGL 渲染的 3D 机房现在也不是什么新鲜事儿了，这篇文章的主要目的是说明一下，3D 机房中的 eye 和 center 的问题，刚好在项目中用上了，好生思考了一番，最终觉得这个例子最符合我的要求 _node, arguments);//设置节点的 3d 坐标 } }); 创建 Editor.Cabinet 类 ? /设置图元在3D拓扑中的z轴长度 door.setTall(s3[1]);//控制Node图元在y轴的长度 door.setElevation(0);//设置图元中心在3D坐标系中的y坐标 场景创建 如果熟悉的同学应该知道，用 HT 创建一个 3D 场景只需要 new 一个 3D 组件，再将通过 addToDOM 函数将这个场景添加进 body 中即可： var g3d = E.main = new ht.graph3d.Graph3dView(); //3d 场景 main.js 文件中主要做的是在 3D 场景中一些必要的元素，比如墙面，地板，门，空调以及所有的机柜的生成和排放位置，还有非常重要的交互部分
1.4K40发布于 2018-06-05 - 来自专栏Python进阶之路
python pyecharts数据可视化 词云图 仪表盘 水球图
barrages.txt') as f: data = f.read() # 文本预处理 去除一些无用的字符 只提取出中文出来 new_data = re.findall('[\u4e00-\u9fa5] formatter="{a}
{b} : {c}%", ) ) .render('gauge.html') ) 运行效果如下： [f8n0snzzxj.gif] 三、水球图 center=['60%', '50%'], # 水球外形，有' circle', 'rect', 'roundRect', 'triangle', 'diamond', 'pin',1.9K30发布于 2020-09-17 - 来自专栏Lansonli技术博客
pyEcharts安装及详细使用指南
图形 绘制3D折线图代码如下： # -*- coding:utf-8 -*- from pyecharts import Line3D import random data = [[1,2,3,4 ], [1,2,3,4], [0,4,8,16]] Line3D = Line3D("3D 折线图示例", width=1200, height=600) Line3D.add("", data, is_visualmap=True) Line3D.render() 输出图形如下所示： 绘制3D散点图，并设置随机散点坐标，代码如下所示： # -*- coding:utf-8 -*- from Gauge("仪表盘图形","副图标") g.add("重大项目", "投资占比", 66.66) g.show_config() g.render("g.html") 输出图形如下所示： 6.水球图 代码如下： # -*- coding:utf-8 -*- from pyecharts import Liquid liquid = Liquid("水球图") liquid.add("Liquid
1.3K20发布于 2021-10-09 - 来自专栏hightopo
基于 HTML5 WebGL 的 3D “弹力”布局
/guide/lib/plugin/ht-form.js"></script> ht.layout.Force3dLayout 类提供 3D 弹力布局，构造函数可传入 DataModel 和 Graph3dView 首先我们定义一个颜色数组变量，存储各个弹力球的颜色，还定义了一个随机函数，用来生成数随机的数组中的颜色： var colorList = ['#FFAFA4', '#B887C5', '#B9EA9C' var ran = Math.random() * colorLen; return colorList[Math.floor(ran)];//随机6种颜色 }; 接着创建弹力球，简单生成一个 3D ，s3 是 HT 封装的设置 3D 节点大小的 setSize3d 函数的简写，最后将这个节点添加进数据模型 dataModel 中： var createNode = function(dm) {// 环形模型，将其命名为‘custom’： ht.Default.setShape3dModel(//创建模型 根据xy平面的曲线，环绕一周形成3D模型。
1.3K20发布于 2018-07-09 - 来自专栏hightopo
原 基于HTML5 WebGL实现3D飞机
在3D拓扑上可以创建各种各样的图元，在HT for Web系统中提供了一些常规的3D模型，但是对于那些比较复杂的模型，比如汽车、人物等模型就无能为力了，那再项目中需要用到这样的模型该肿么办呢？ 模型后，我们马上创建了一个3D图元，并将其添加到了dataModel容器中，这时我们需要一个3D拓扑来显示这个3D图元，具体的创建代码如下： var dataModel = new ht.DataModel 到这里，模型就算完成了，接下来要做的就是让螺旋桨动起来，和2D叶轮旋转类似，在3D模型上也可以做数据绑定，要想让螺旋桨旋转起来，我们就需要设置螺旋桨的rotation属性，和3D上的图元不同的是，设置3D ； 2. duration属性：定义动画持续时间； 3. easing函数：定义动画缓动函数； 4. action函数：action函数必须提供，实现动画过程中的属性变化，在这里设置angle属性； 5. http://v.youku.com/v_show/id_XMTI5NDI5MzYyOA==.html http://www.hightopo.com/guide/guide/plugin/obj/ht-obj-guide.html
1.1K50发布于 2018-06-05 - 来自专栏HT
基于 HTML5 WebGL 的 3D “弹力”布局
/guide/lib/plugin/ht-form.js"></script> ht.layout.Force3dLayout 类提供 3D 弹力布局，构造函数可传入 DataModel 和 Graph3dView 首先我们定义一个颜色数组变量，存储各个弹力球的颜色，还定义了一个随机函数，用来生成数随机的数组中的颜色： var colorList = ['#FFAFA4', '#B887C5', '#B9EA9C' var ran = Math.random() * colorLen; return colorList[Math.floor(ran)];//随机6种颜色 }; 接着创建弹力球，简单生成一个 3D ，s3 是 HT 封装的设置 3D 节点大小的 setSize3d 函数的简写，最后将这个节点添加进数据模型 dataModel 中： var createNode = function(dm) {// 环形模型，将其命名为‘custom’： ht.Default.setShape3dModel(//创建模型 根据xy平面的曲线，环绕一周形成3D模型。
1.7K90发布于 2018-01-03 - 来自专栏hightopo
基于 HTML5 WebGL 的 3D 智慧城市
围绕城市公共管理、公共服务、公共安全等领域，支持有条件的城市建设基于人工智能和5G 物联的城市大脑集群。 上个月我们发布了一篇文章《基于HTML5 WebGL 构建智能城市 3D 场景》，大体介绍了如何使用ht.js 快速3D 建模，展示了良好的可视化效果，今天继续探讨智慧城市的应用。 上图主要以 2/3D联动的方式，依次展示了在面对突发情况下，城市应急救援的响应过程。 this.setStepPanel(process\_01, t, 4); if (t <= 0.25) { children\[0\].s("shape3d.opacity", 5 常规的2D 效果图已经不满足于当下的需求了，伴随着大数据、云计算、5G、AI、边缘计算等技术的发展成熟，3D 可视化更能直观的、有效的反馈信息。当然，3D可视化离不开一款强大的图形引擎。
1.9K40发布于 2020-03-13
腾讯云开发者
Copyright © 2013 - 2026 Tencent Cloud. All Rights Reserved. 腾讯云 版权所有
深圳市腾讯计算机系统有限公司 ICP备案/许可证号：粤B2-20090059 
粤公网安备44030502008569号
腾讯云计算（北京）有限责任公司 京ICP证150476号 | 京ICP备11018762号