/准备echarts脚本文件

官网下载最新版本：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

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

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%'顶部。

明：SVG 虽然也是标签，但它不是 HTML5，标题加了 HTML5 只是为了与 canvas 放到一起。

一、为什么要学 SVG ?

SVG 意为可缩放矢量图形（Scalable Vector Graphics），使用 XML 格式定义矢量图形。其他的图像格式都是基于像素的，但是 SVG 没有单位的概念，它的20只是表示1的20倍，所以 SVG 绘制的图形放大或缩小都不会失真。

与其他图像比较，SVG 的优势有以下几点：

1. SVG 可以被多个工具读取和修改。
2. SVG 与其他格式图片相比，尺寸更小，可压缩性强。
3. SVG 可任意伸缩。
4. SVG 图像可以随意地高质量打印。
5. SVG 图像可以添加文本和事件，还可搜索，适合做地图。
6. SVG 是纯粹的 XML，不是 HTML5。
7. 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 设置的宽高没有带单位，此时默认是像素值，如果需要添加单位时，除了绝对单位，也可以设置相对单位。

• viewBox 属性

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

四个参数分别是左上角的横纵坐标、视口的宽高。表示只看SVG的某一部分，由上述四个参数决定。

使用 viewBox 之后，相当于svg整体大小不变，只能看到 viewBox 设置部分，视觉上被放大。

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 引入文件类型。

优点：所有浏览器都支持，并允许使用脚本。

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

2.2.2、object 嵌入：

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

data 是 SVG 文件路径，type 表示 object 引入文件类型。

优点：所有浏览器都支持，支持 html、html4 和 html5。

缺点：不允许使用脚本。

2.2.3、iframe 嵌入：

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

src是 SVG 文件路径，width、height、frameborder 设置的大小和边框。

优点：所有浏览器都支持，并允许使用脚本。

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

2.2.4、html中嵌入：

svg 标签直接插入 html 内容内，与其他标签用法一致。

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标签创建线条，(x1,y1)是起点，(x2,y2)是终点，stroke绘制黑线，stroke-width是线宽。

3.2、矩形 - rect

//使用语法：
<svg width="300" height="300" >
<rect 
 width="100" height="100"  //大小设置
 x="50" y="50"  //可选 左上角位置，svg的左上角默认(0,0)
 rx="20" ry="50" //可选 设置圆角
 stroke-width="3" stroke="red" fill="pink" //绘制样式控制
></rect>
</svg>

上述参数 width、height是必填参数，x、y是可选参数，如不设置的时候，默认为(0,0)，也就是svg的左上角开始绘制。rx、ry是可选参数，不设置是矩形没有圆角。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)定义圆心的位置，是可选参数，如果不设置默认圆心是（0,0）。r是必需参数，设置圆的半径。

3.4、椭圆 - ellipse

椭圆与圆相似，不同之处在于椭圆有不同的x和y半径，而圆两个半径是相同的。

// 使用语法
<svg width="300" height="300" >
 <ellipse 
  rx="20" ry="100" //设置椭圆的x、y方向的半径
  fill="purple" // 椭圆填充色
  cx="150" cy="150" //设置椭圆的圆心 ，可选参数
 ></ellipse>
</svg>

上述椭圆的两个rx、ry两个方向半径是必须参数，如果rx=ry就表示是圆形，（cx,cy）是椭圆的圆心，是可选参数，如果不设置，则默认圆心为（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>

上述代码执行结果如图所示：

需要注意的是 points 中包含了多个点的坐标，但不是一个数组。

3.6、多边形 - polygon

polygon 标签用来创建不少于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基本形状中最强大的一个，不仅能创建其他基本形状，还能创建更多其他形状，如贝塞尔曲线、2次曲线等。

点个关注，下篇更精彩！

制各种图形步骤

1 开始新路径

beginPath() 开始新路径 绘制矩形和填充矩形可省略此步骤

2 设置路径

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() 关闭路径

4 将路径绘制到canvas绘图区

Stroke() 绘制边框

Fill() 填充图形

绘制直线