TaskBuilder用echarts第三方水球插件實現(xiàn)動態(tài)水球波紋圖表的方法

/準備echarts腳本文件

官網(wǎng)下載最新版本：https://echarts.apache.org/zh/download.html

開源庫下載：https://cdn.jsdelivr.net/npm/echarts@5.3.3/dist/echarts.min.js

//5.33改成最新版本的版本號就可以下載最新版本了

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

打開軟件新建一個頁面添加一個容器組件用于綁定圖表對象組件名稱隨便填寫后面要用到

2.添加一個事件來加載圖表腳本，我用的的頁面加載時，也可以添加后臺服務(wù)組件，通過后臺服務(wù)組件事件：服務(wù)響應時來調(diào)用腳本可以很方便的綁定數(shù)據(jù)

3.添加剛才下載echarts腳本文件

添加第三方水球插件：

引入腳本

一個簡單的例子

要創(chuàng)建液體填充圖表，您需要有一個類型為'liquidFill'. 一個基本選項可能是：

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

多波

很容易創(chuàng)建一個帶有多個波浪的液體填充圖表，或者表示多個數(shù)據(jù)，或者提高圖表的視覺效果。

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

這將在 60%、50%、40% 和 30% 的位置創(chuàng)建一個帶有波浪的圖表。

顏色和不透明度

要為液體填充圖表系列設(shè)置顏色，請設(shè)置color為顏色數(shù)組。要設(shè)置不透明度，請使用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 } } }] };

您還可以通過以下方式設(shè)置單個數(shù)據(jù)項的顏色和不透明度：

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

靜波

為了防止波浪向左或向右移動，您可以簡單地設(shè)置waveAnimation為false。要禁用波浪上升的動畫，請將animationDuration和設(shè)置animationDurationUpdate為 0。

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

靜止波

您可以將設(shè)置amplitude為 0 以產(chǎn)生靜止波。

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

在這種情況下建議設(shè)置waveAnimation為 false 以禁用動畫以考慮性能。

改變單個波

要更改單個波形，請覆蓋數(shù)據(jù)項中的選項。

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

背景樣式

您可以使用 backgroundStyle 選項來設(shè)置背景形狀的筆觸、填充樣式。

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

輪廓樣式

要隱藏輪廓，只需設(shè)置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其持續(xù)時間由控制animationDuration。
第二種是更新動畫，通常在數(shù)據(jù)變化、波高變化時使用。它們由animationEasingUpdate和控制animationDurationUpdate。
例如，要禁用提升動畫并將更新動畫時間設(shè)置為 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);

更改文本

默認情況下，液體填充圖表的文本標簽顯示第一個數(shù)據(jù)的百分比。例如，對于帶有 data 的圖表[0.6, 0.5, 0.4, 0.3]，默認文本是60%.

要更改文本，您可以使用label.formatter，它可以設(shè)置為字符串或函數(shù)。

如果是字符串，{a}則表示系列名稱、{b}數(shù)據(jù)名稱和{c}數(shù)據(jù)值。

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這與作為函數(shù)使用的結(jié)果相同：

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可以設(shè)置為'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 });

與任何其他圖表類型一樣，上述代碼只會觸發(fā)波事件。如果要跟蹤整個畫布或特定元素上的事件，可以將偵聽器添加到 zrender，例如：

chart.getZr().on('click', function() { console.log(arguments); });

不可交互

要使元素（例如，波浪）不可交互，只需設(shè)置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

}

數(shù)據(jù){(數(shù)字|對象)[]}

每個數(shù)據(jù)項的值應介于 0 和 1 之間。

數(shù)據(jù)項也可以是配置單個項的選項的對象。

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。

幅度{數(shù)}

波的幅度，以像素或百分比為單位。如果它是百分比，它是相對于直徑的。

波長 {字符串|數(shù)字}

波的波長，可以是相對值，例如'50%'，它是相對于直徑的，也可以是絕對值，例如'100px'或100。

階段{編號}

波的相位，以弧度表示。默認情況下'auto'，當每個波的相位Math.PI / 4大于前一個時，它被設(shè)置為。

周期 {number|'auto'|function}

向前移動一個波長所需的毫秒數(shù)。默認情況下，'auto'當前面的波速度較大時，它被設(shè)置為。

它也可以是格式化程序功能。

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 {字符串}

其他動畫的緩動方法，例如，當數(shù)據(jù)值改變和波浪位置改變時。

動畫持續(xù)時間 {數(shù)字}

初始動畫持續(xù)時間，以毫秒為單位。

animationDurationUpdate {數(shù)字}

其他動畫持續(xù)時間，以毫秒為單位。

大綱.show {布爾}

是否顯示輪廓。

大綱.borderDistance {number}

邊界和內(nèi)圈之間的距離。

outline.itemStyle.borderColor {字符串}

邊框顏色。

outline.itemStyle.borderWidth {number}

邊框?qū)挾取?/p>

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 {字符串}

波浪陰影顏色。

強調(diào).itemStyle.opacity {number}

懸停時波浪不透明度。

標簽.show {布爾}

是否顯示標簽文本。

label.color {字符串}

在背景上顯示時文本的顏色。

label.insideColor {字符串}

在波形上顯示時文本的顏色。

label.fontSize {數(shù)字}

標簽字體大小。

標簽.fontWeight {字符串}

標簽字體粗細。

標簽對齊{字符串}

文本對齊，應該是'left', 'center', 或'right'.

label.baseline {字符串}

文本垂直對齊，應為'top'、'middle'或'bottom'。

標簽位置 {string|string[]}

文本位置默認在中心。label.position可以設(shè)置為'inside', 'left', 'right', 'top', 'bottom', 或水平和垂直位置，例如['10%', '20%']，表示'10%'左側(cè)和'20%'頂部。

明：SVG 雖然也是標簽，但它不是 HTML5，標題加了 HTML5 只是為了與 canvas 放到一起。

一、為什么要學 SVG ?

SVG 意為可縮放矢量圖形（Scalable Vector Graphics），使用 XML 格式定義矢量圖形。其他的圖像格式都是基于像素的，但是 SVG 沒有單位的概念，它的20只是表示1的20倍，所以 SVG 繪制的圖形放大或縮小都不會失真。

與其他圖像比較，SVG 的優(yōu)勢有以下幾點：

SVG 可以被多個工具讀取和修改。
SVG 與其他格式圖片相比，尺寸更小，可壓縮性強。
SVG 可任意伸縮。
SVG 圖像可以隨意地高質(zhì)量打印。
SVG 圖像可以添加文本和事件，還可搜索，適合做地圖。
SVG 是純粹的 XML，不是 HTML5。
SVG是W3C標準

二、SVG 形狀元素

2.1、svg 標簽

SVG 的代碼都放到 svg 標簽呢，SVG 中的標簽都是閉合標簽，與html中標簽用法一致。svg的屬性有：

有width和height，指定了svg的大小。

eg：畫一條直線，完整代碼如下：

<!DOCTYPE html>
<html lang="en">
<head>
 <meta charset="UTF-8">
 <meta name="viewport" content="width=device-width, initial-scale=1.0">
 <title>Document</title>
</head>
<body style="height:600px;">
 <svg width="300" height="300">
  <line x1="0" y1="0" x2="100" y2="100" stroke="black" stroke-width="20"></line>    
 </svg> 
</body>
</html>

上述 svg 設(shè)置的寬高沒有帶單位，此時默認是像素值，如果需要添加單位時，除了絕對單位，也可以設(shè)置相對單位。

viewBox 屬性

使用語法：<svg viewBox=" x1,y1,width,height "></svg>

四個參數(shù)分別是左上角的橫縱坐標、視口的寬高。表示只看SVG的某一部分，由上述四個參數(shù)決定。

使用 viewBox 之后，相當于svg整體大小不變，只能看到 viewBox 設(shè)置部分，視覺上被放大。

2.2、SVG 如何嵌入 HTML

SVG 的代碼可以直接嵌入到 html 頁面中，也可以通過 html 的embed、object、iframe嵌入到html中。嵌入的時候嵌入的是 SVG 文件，SVG 文件必須使用 .svg 后綴。分別介紹各種方法如何使用？

2.2.1、embed 嵌入：

使用語法：<embed src="line.svg" type="image/svg+xml"></embed>

src是SVG文件路徑，type 表示 embed 引入文件類型。

優(yōu)點：所有瀏覽器都支持，并允許使用腳本。

缺點：不推薦 html4 和 html 中使用，但 html5 支持。

2.2.2、object 嵌入：

使用語法：<object data="line.svg" type="image/svg+xml"></object>

data 是 SVG 文件路徑，type 表示 object 引入文件類型。

優(yōu)點：所有瀏覽器都支持，支持 html、html4 和 html5。

缺點：不允許使用腳本。

2.2.3、iframe 嵌入：

使用語法：<iframe width="300" height="300" src="./line.svg" frameborder="0"></iframe>

src是 SVG 文件路徑，width、height、frameborder 設(shè)置的大小和邊框。

優(yōu)點：所有瀏覽器都支持，并允許使用腳本。

缺點：不推薦 html4 和 html 中使用，但 html5 支持。

2.2.4、html中嵌入：

svg 標簽直接插入 html 內(nèi)容內(nèi)，與其他標簽用法一致。

2.2.5、連接到svg文件：

使用 a 標簽，直接鏈接到 SVG 文件。

使用語法：<a href="line.svg">查看SVG</a>

三、SVG形狀元素

3.1、線 - line

使用語法：
<svg width="300" height="300" >  
 <line x1="0" y1="0" x2="300" y2="300" stroke="black" stroke-width="20"></line>
</svg>

使用line標簽創(chuàng)建線條，(x1,y1)是起點，(x2,y2)是終點，stroke繪制黑線，stroke-width是線寬。

3.2、矩形 - rect

//使用語法：
<svg width="300" height="300" >
<rect 
 width="100" height="100"  //大小設(shè)置
 x="50" y="50"  //可選 左上角位置，svg的左上角默認(0,0)
 rx="20" ry="50" //可選 設(shè)置圓角
 stroke-width="3" stroke="red" fill="pink" //繪制樣式控制
></rect>
</svg>

上述參數(shù) width、height是必填參數(shù)，x、y是可選參數(shù)，如不設(shè)置的時候，默認為(0,0)，也就是svg的左上角開始繪制。rx、ry是可選參數(shù)，不設(shè)置是矩形沒有圓角。fill定義填充顏色。

3.3、圓形 - circle

// 使用語法
<svg width="300" height="300" >
 <circle 
  cx="100" cy="50" // 定義圓心 ，可選
  r="40" // 圓的半徑
  stroke="black" stroke-width="2" fill="red"/> //繪制黑框填充紅色
</svg>

上述(cx,xy)定義圓心的位置，是可選參數(shù)，如果不設(shè)置默認圓心是（0,0）。r是必需參數(shù)，設(shè)置圓的半徑。

3.4、橢圓 - ellipse

橢圓與圓相似，不同之處在于橢圓有不同的x和y半徑，而圓兩個半徑是相同的。

// 使用語法
<svg width="300" height="300" >
 <ellipse 
  rx="20" ry="100" //設(shè)置橢圓的x、y方向的半徑
  fill="purple" // 橢圓填充色
  cx="150" cy="150" //設(shè)置橢圓的圓心 ，可選參數(shù)
 ></ellipse>
</svg>

上述橢圓的兩個rx、ry兩個方向半徑是必須參數(shù)，如果rx=ry就表示是圓形，（cx,cy）是橢圓的圓心，是可選參數(shù)，如果不設(shè)置，則默認圓心為（0,0）。

3.5、折線 - polyline

// 使用語法
<svg width="300" height="300" style="border:solid 1px red;">
  <!-- 繪制出一個默認填充黑色的三角形 -->
 <polyline 
  points=" //點的集合
   0 ,0, // 第一個點坐標
   100,100, // 第二個點坐標
   100,200 // 第三個點坐標
    " 
  stroke="green" 
 ></polyline>
<!-- 繪制一個臺階式的一條折線 -->
 <polyline 
  points="0,0,50,0,50,50,100,50,100,100,150,100,150,150" 
  stroke="#4b27ff" fill="none"
 ></polyline>
</svg>

上述代碼執(zhí)行結(jié)果如圖所示：

需要注意的是 points 中包含了多個點的坐標，但不是一個數(shù)組。

3.6、多邊形 - polygon

polygon 標簽用來創(chuàng)建不少于3個邊的圖形，多邊形是閉合的，即所有線條連接起來。

// 使用語法
<svg width="300" height="300" style="border:solid 1px red;">
 <polygon 
  points="
    0,0,   //多邊形的第一點
   100,100,  //多邊形的第二點
    0,100  //多邊形的第三點
  " 
	stroke="purple"
	stroke-width="1"
	fill="none"
 ></polygon>
</svg>

polygon繪制的時候與折線有些類似，但是polygon會自動閉合，折線不會。

3.7、路徑 - path

path 是SVG基本形狀中最強大的一個，不僅能創(chuàng)建其他基本形狀，還能創(chuàng)建更多其他形狀，如貝塞爾曲線、2次曲線等。

點個關(guān)注，下篇更精彩！

制各種圖形步驟

1 開始新路徑

beginPath() 開始新路徑繪制矩形和填充矩形可省略此步驟

2 設(shè)置路徑

moveTo(x,y) 移動起始點到x,y

lineTo(x,y) 繪制目前端點到x,y的直線

arc(x,y,r,startAngle,endAngle,antiClockwise) 繪制圓形或圓弧

fillRect(x,y,width,height) 繪制填滿矩形

strokeRect(x,y,width,height) 繪制輪廓矩形(只有邊框,不填充顏色)

3 將路徑頭尾相連

closePath() 關(guān)閉路徑

4 將路徑繪制到canvas繪圖區(qū)

Stroke() 繪制邊框

Fill() 填充圖形

繪制直線

在線咨詢

上一篇：Javaweb知識 day07 HTML相關(guān)知識
下一篇：html基礎(chǔ)必備-文本格式標記，前端小白一看就會

您的項目需求

*請認真填寫需求信息，我們會在24小時內(nèi)與您取得聯(lián)系。

整合營銷服務(wù)商

TaskBuilder用echarts第三方水球插件實現(xiàn)動態(tài)水球波紋圖表的方法

一個簡單的例子

多波

顏色和不透明度

靜波

靜止波

改變單個波

背景樣式

輪廓樣式

形狀

動畫

更改文本

工具提示

點擊事件

一、為什么要學 SVG ?

二、SVG 形狀元素

三、SVG形狀元素

您的項目需求