Echarts水球图-多波纹和直线静止波纹

Térébentine

已于 2022-02-01 11:18:29 修改

阅读量1.4k

点赞数 1

分类专栏： Echarts 文章标签： echarts 前端 javascript

于 2022-02-01 11:02:38 首次发布

本文链接：https://blog.youkuaiyun.com/weixin_43790703/article/details/122763100

版权

本文介绍了如何使用Echarts库中的echarts-liquidfill.js插件创建动态水球图，并展示了如何设置多条波纹以及如何让波纹保持静止，提供了相关的配置代码示例，以帮助读者理解和实现静态多层水波纹效果。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

水波在不停流动的水球图，下为某一时刻的截图。

水球图的制作，需要额外引入水球图的js文件。echarts-liquidfill.js。

完整代码如下：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<!--title表示网页名称-->
		<title>简单水球图</title>
		<!--引入Echarts.min.js和Echarts-liquidfill.js文件-->
		<script src="echarts.min.js"></script>
		<script src="echarts-liquidfill.js"></script>  //注意是-不是.
	</head>
	<body>
		<!--为Echarts准备一个定义了宽和高的DOM容器-->
		<div id="main"
		     style="width: 600px;height: 400px;"></div>
		<script type="text/javascript">
		/

最低0.47元/天解锁文章