html水波纹TaskBuilder用echarts第三方水球插件实现动态水球波纹图表的办法

官网下载最新版本：https://echarts.apache.org/zh/download.html

开源库下载：https://cdn.jsdelivr.net/npm/echarts@5.3.3/dist/echarts.min.js

//5.33改成最新版本的版本号就可以下载最新版本了

html水波纹TaskBuilder用echarts第三方水球插件实现动态水球波纹图表的办法 Python

下载第三方水球库插件：https://github.com/ecomfe/echarts-liquidfill

打开软件新建一个页面添加一个容器组件用于绑定图表工具组件名称随便填写后面要用到

2.添加一个事宜来加载图表脚本，我用的的页面加载时，也可以添加后台做事组件，通过后台做事组件事宜：做事相应时来调用脚本可以很方便的绑天命据

3.添加刚才下载echarts脚本文件

添加第三方水球插件：

引入脚本

一个大略的例子

要创建液体添补图表，您须要有一个类型为'liquidFill'. 一个基本选项可能是：

option = { series: [{ type: 'liquidFill', data: [0.6] }] };

多波

很随意马虎创建一个带有多个波浪的液体添补图表，或者表示多个数据，或者提高图表的视觉效果。

option = { series: [{ type: 'liquidFill', data: [0.6, 0.5, 0.4, 0.3]}]};

这将在 60%、50%、40% 和 30% 的位置创建一个带有波浪的图表。

颜色和不透明度

要为液体添补图表系列设置颜色，请设置color为颜色数组。
要设置不透明度，请利用itemStyle.opacity和itemStyle.emphasis.opacity用于普通样式和悬停样式。

option = { series: [{ type: 'liquidFill', data: [0.5, 0.4, 0.3], color: ['red', '#0f0', 'rgb(0, 0, 255)'], itemStyle: { opacity: 0.6 }, emphasis: { itemStyle: { opacity: 0.9 } } }] };

您还可以通过以下办法设置单个数据项的颜色和不透明度：

option = { series: [{ type: 'liquidFill', data: [0.5, 0.4, { value: 0.3, itemStyle: { color: 'red', opacity: 0.6 }, emphasis: { itemStyle: { opacity: 0.9 } } }] }] };

静波

为了防止波浪向左或向右移动，您可以大略地设置waveAnimation为false。
要禁用波浪上升的动画，请将animationDuration和设置animationDurationUpdate为 0。

option = { series: [{ type: 'liquidFill', waveAnimation: false, animationDuration: 0, animationDurationUpdate: 0, data: [0.6, 0.5, 0.4, 0.3] }] };

静止波

您可以将设置amplitude为 0 以产生静止波。

option = { series: [{ type: 'liquidFill', data: [0.6, 0.5, 0.4, 0.3], amplitude: 0, waveAnimation: 0 }] };

在这种情形下建议设置waveAnimation为 false 以禁用动画以考虑性能。

改变单个波

要变动单个波形，请覆盖数据项中的选项。

option = { series: [{ type: 'liquidFill', data: [0.6, { value: 0.5, direction: 'left', itemStyle: { color: 'red' } }, 0.4, 0.3] }] };

背景样式

您可以利用 backgroundStyle 选项来设置背景形状的笔触、添补样式。

option = { series: [{ type: 'liquidFill', data: [0.6, 0.5, 0.4, 0.3], backgroundStyle: { borderWidth: 5, borderColor: 'red', color: 'yellow' } }] };

轮廓样式

要隐蔽轮廓，只需设置outline.show为false。

option = { series: [{ type: 'liquidFill', data: [0.6, 0.5, 0.4, 0.3], outline: { show: false } }] };

形状

水添补图表的形状。
有可能：

//默认形状：'circle',圆形 'rect'正方形, 'roundRect'圆角正方形, 'triangle'三角形, 'diamond'菱形, 'pin'气球形, 'arrow'多边三角形;'container'：完备填满容器的形状。
'path://'以.开头的 SVG 路径

options = [{ series: [{ type: 'liquidFill', data: [0.6, 0.5, 0.4, 0.3], shape: 'diamond' }] }];

option = { series: [{ type: 'liquidFill', data: [0.5, 0.4, 0.3, 0.2], shape: 'container', outline: { show: false } }]};

option = { series: [{ type: 'liquidFill', data: [0.6, 0.55, 0.4, 0.25], radius: '60%', outline: { show: false }, backgroundStyle: { borderColor: '#156ACF', borderWidth: 1, shadowColor: 'rgba(0, 0, 0, 0.4)', shadowBlur: 20 }, shape: 'path://M367.855,428.202c-3.674-1.385-7.452-1.966-11.146-1.794c0.659-2.922,0.844-5.85,0.58-8.719 c-0.937-10.407-7.663-19.864-18.063-23.834c-10.697-4.043-22.298-1.168-29.902,6.403c3.015,0.026,6.074,0.594,9.035,1.728 c13.626,5.151,20.465,20.379,15.32,34.004c-1.905,5.02-5.177,9.115-9.22,12.05c-6.951,4.992-16.19,6.536-24.777,3.271 c-13.625-5.137-20.471-20.371-15.32-34.004c0.673-1.768,1.523-3.423,2.526-4.992h-0.014c0,0,0,0,0,0.014 c4.386-6.853,8.145-14.279,11.146-22.187c23.294-61.505-7.689-130.278-69.215-153.579c-61.532-23.293-130.279,7.69-153.579,69.202 c-6.371,16.785-8.679,34.097-7.426,50.901c0.026,0.554,0.079,1.121,0.132,1.688c4.973,57.107,41.767,109.148,98.945,130.793 c58.162,22.008,121.303,6.529,162.839-34.465c7.103-6.893,17.826-9.444,27.679-5.719c11.858,4.491,18.565,16.6,16.719,28.643 c4.438-3.126,8.033-7.564,10.117-13.045C389.751,449.992,382.411,433.709,367.855,428.202z', label: { position: ['38%', '40%'], formatter: function() { return 'ECharts\nLiquid Fill'; }, fontSize: 40, color: '#D94854' } }] };

动画

一样平常来说，液体添补图表中有两种类型的动画。
第一种是初始动画，具有升浪的效果。
此动画的缓动方法由掌握，animationEasing其持续韶光由掌握animationDuration。
第二种是更新动画，常日在数据变革、波高变革时利用。
它们由animationEasingUpdate和掌握animationDurationUpdate。
例如，要禁用提升动画并将更新动画韶光设置为 2 秒cubicOut，可以利用以下选项：

var mytubiao = echarts.init(document.getElementById("mytb"))option = {series: [{type: 'liquidFill',data: [0.6, 0.5, 0.4, 0.3],animationDuration: 0,animationDurationUpdate: 2000,animationEasingUpdate: 'cubicOut'}]};mytubiao.setOption(option);setTimeout(function () {mytubiao.setOption({series: [{type: 'liquidFill',data: [0.8, 0.6, 0.4, 0.2]}]})}, 3000);
变动文本
默认情形下，液体添补图表的文本标签显示第一个数据的百分比。
例如，对付带有 data 的图表[0.6, 0.5, 0.4, 0.3]，默认文本是60%.
要变动文本，您可以利用label.formatter，它可以设置为字符串或函数。
如果是字符串，{a}则表示系列名称、{b}数据名称和{c}数据值。
option = { series: [{ type: 'liquidFill', name: 'Liquid Fill', data: [{ name: 'First Data', value: 0.6 }, 0.5, 0.4, 0.3], label: { formatter: '{a}\n{b}\nValue: {c}', fontSize: 28 } }] };此示例的标签文本为'Liquid Fill\nFirst Data\nValue: 0.6'.
formatter这与作为函数利用的结果相同：option = { series: [{ type: 'liquidFill', name: 'Liquid Fill', data: [{ name: 'First Data', value: 0.6 }, 0.5, 0.4, 0.3], label: { formatter: function(param) { return param.seriesName + '\n' + param.name + '\n' + 'Value:' + param.value; }, fontSize: 28 } }] };文当地位默认在中央。
label.position可以设置为'inside', 'left', 'right', 'top', 'bottom', 或水平和垂直位置，例如['10%', '20%']，表示'10%'向左（由掌握label.align，可以是'left'、'center'或'right'）和'20%'顶部（由掌握label.baseline，可以是'top'、'middle'或'bottom'）。
阴影默认情形下，波浪和轮廓上有阴影。
以下是如何变动它们。
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)' } } }] };
工具提示
添加工具提示：option = { series: [{ type: 'liquidFill', data: [0.6], name: 'Liquid Fill' }], tooltip: { show: true } };
点击事宜
要在 wave 上添加点击事宜：
chart.setOption(option); chart.on('click', function() { console.log(arguments); // do something useful here });
与任何其他图表类型一样，上述代码只会触发波事宜。
如果要跟踪全体画布或特定元素上的事宜，可以将侦听器添加到 zrender，例如：
chart.getZr().on('click', function() { console.log(arguments); });
不可交互
要使元素（例如，波浪）不可交互，只需设置silent为true.
option = { series: [{ type: 'liquidFill', data: [0.6, 0.5, 0.4, 0.3], silent: true }] };
API
液体添补图表的默认选项是：
{
data: [],
color: ['#294D99', '#156ACF', '#1598ED', '#45BDFF'],
center: ['50%', '50%'],
radius: '50%',
amplitude: '8%',
waveLength: '80%',
phase: 'auto',
period: 'auto',
direction: 'right',
shape: 'circle',
waveAnimation: true,
animationEasing: 'linear',
animationEasingUpdate: 'linear',
animationDuration: 2000,
animationDurationUpdate: 1000,
outline: {
show: true,
borderDistance: 8,
itemStyle: {
color: 'none',
borderColor: '#294D99',
borderWidth: 8,
shadowBlur: 20,
shadowColor: 'rgba(0, 0, 0, 0.25)'
}
},
backgroundStyle: {
color: '#E3F7FF'
},
itemStyle: {
opacity: 0.95,
shadowBlur: 50,
shadowColor: 'rgba(0, 0, 0, 0.4)'
},
label: {
show: true,
color: '#294D99',
insideColor: '#fff',
fontSize: 50,
fontWeight: 'bold',
align: 'center',
baseline: 'middle'
position: 'inside'
},
emphasis: {
itemStyle: {
opacity: 0.8
}
}
}
数据{(数字|工具)[]}
每个数据项的值应介于 0 和 1 之间。
数据项也可以是配置单个项的选项的工具。
option = {
series: [{
type: 'liquidFill',
data: [0.6, {
value: 0.5,
itemStyle: {
color: 'red'
}
}, 0.4, 0.3]
}]
};
这定义了具有第二波赤色的图表。
颜色 {string[]}
波浪颜色。
形状 {字符串}
水添补图表的形状。
它可以是默认符号之一：'circle', 'rect', 'roundRect', 'triangle', 'diamond', 'pin', 'arrow'. 或者，以 . 开头的 SVG 路径'path://'。
中央{字符串[]}
图表的位置。
第一个值是 x 位置，第二个值是 y 位置。
每个值都可以是一个相对值，例如'50%'，它是相对付容器宽度和高度的较小值的，也可以是一个绝对值，例如100px。
半径 {字符串}
图表的半径，可以是相对值，如'50%'，相对付容器宽度和高度的较小值，也可以是绝对值，如100px。
幅度{数}
波的幅度，以像素或百分比为单位。
如果它是百分比，它是相对付直径的。
波长 {字符串|数字}
波的波长，可以是相对值，例如'50%'，它是相对付直径的，也可以是绝对值，例如'100px'或100。
阶段{编号}
波的相位，以弧度表示。
默认情形下'auto'，当每个波的相位Math.PI / 4大于前一个时，它被设置为。
周期 {number|'auto'|function}
向前移动一个波长所需的毫秒数。
默认情形下，'auto'当前面的波速率较大时，它被设置为。
它也可以是格式化程序功能。
option = {
series: [{
type: 'liquidFill',
data: [0.6, 0.5, 0.4, 0.3],
radius: '70%',
phase: 0,
period: function (value, index) {
// This function is called four times, each for a data item in series.
// `value` is 0.6, 0.5, 0.4, 0.3, and `index` is 0, 1, 2, 3.
return 2000 index + 1000;
}
}]
}
方向 {字符串}
波浪移动的方向，该当是'right'或'left'。
waveAnimation {boolean}
是否启用向左或向右移动的波浪。
动画缓动 {字符串}
初始动画的缓动方法，当波浪从底部开始上升时。
animationEasingUpdate {字符串}
其他动画的缓动方法，例如，当数据值改变和波浪位置改变时。
动画持续韶光 {数字}
初始动画持续韶光，以毫秒为单位。
animationDurationUpdate {数字}
其他动画持续韶光，以毫秒为单位。
大纲.show {布尔}
是否显示轮廓。
大纲.borderDistance {number}
边界和内圈之间的间隔。
outline.itemStyle.borderColor {字符串}
边框颜色。
outline.itemStyle.borderWidth {number}
边框宽度。
outline.itemStyle.shadowBlur {number}
轮廓阴影模糊大小。
outline.itemStyle.shadowColor {字符串}
轮廓阴影颜色。
backgroundStyle.color {字符串}
背景添补颜色。
backgroundStyle.borderWidth {字符串}
背景描边线宽。
backgroundStyle.borderColor {字符串}
背景描边线宽。
backgroundStyle.itemStyle.shadowBlur {number}
背景阴影模糊大小。
backgroundStyle.itemStyle.shadowColor {字符串}
背景阴影颜色。
backgroundStyle.itemStyle.opacity {number}
背景不透明度。
itemStyle.opacity {number}
波浪不透明度。
itemStyle.shadowBlur {number}
波浪阴影宽度。
itemStyle.shadowColor {字符串}
波浪阴影颜色。
强调.itemStyle.opacity {number}
悬停时波浪不透明度。
标签.show {布尔}
是否显示标签文本。
label.color {字符串}
在背景上显示时文本的颜色。
label.insideColor {字符串}
在波形上显示时文本的颜色。
label.fontSize {数字}
标具名体大小。
标签.fontWeight {字符串}
标具名体粗细。
标签对齐{字符串}
文本对齐，该当是'left', 'center', 或'right'.
label.baseline {字符串}
文本垂直对齐，应为'top'、'middle'或'bottom'。
标签位置 {string|string[]}
文当地位默认在中央。
label.position可以设置为'inside', 'left', 'right', 'top', 'bottom', 或水平和垂直位置，例如['10%', '20%']，表示'10%'左侧和'20%'顶部。