水波纹动画特效 (含源码)
效果完整代码
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>水柱图动画</title>
<script src="https://cdn.jsdelivr.net/npm/echarts@4.4.0/dist/echarts.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/echarts-liquidfill@2.0.6/dist/echarts-liquidfill.min.js"></script>
</head>
<body>
<div id="main" style="width: 750px;height:600px;"></div>
<script>
// 初始化 ECharts 实例
var myChart = echarts.init(document.getElementById('main'));
var value = 0.65;
var value1 = 0.16;
var data = ;
var option = {
backgroundColor: '#0F224C',
title: [
{
text: '本年收缴率',
x: '22%',
y: '70%',
textStyle: {
fontSize: 14,
fontWeight: '100',
color: '#5dc3ea',
lineHeight: 16,
textAlign: 'center',
},
},
{
text: '本月收缴率',
x: '73%',
y: '70%',
textStyle: {
fontSize: 14,
fontWeight: '100',
color: '#5dc3ea',
lineHeight: 16,
textAlign: 'center',
},
},
],
series: [
{
type: 'liquidFill',
radius: '47%',
center: ['25%', '45%'],
data: ,
backgroundStyle: {
borderWidth: 1,
color: 'rgba(51, 66, 127, 0.7)',
},
label: {
normal: {
formatter: (value * 100).toFixed(2) + '%',
textStyle: {
fontSize: 50,
color: '#fff',
},
},
},
outline: {
borderDistance: 0,
itemStyle: {
borderWidth: 2,
borderColor: '#112165',
},
},
color: ['#446bf5', '#2ca3e2'],
},
{
type: 'liquidFill',
radius: '47%',
center: ['75%', '45%'],
data: ,
backgroundStyle: {
borderWidth: 1,
color: 'rgba(51, 66, 127, 0.7)',
},
label: {
normal: {
formatter: (value1 * 100).toFixed(2) + '%',
textStyle: {
fontSize: 28,
color: '#fff',
},
},
},
outline: {
borderDistance: 0,
itemStyle: {
borderWidth: 2,
borderColor: '#112165',
},
},
color: ['#2aa1e3', '#08bbc9'],
},
],
};
// 使用配置项设置图表
myChart.setOption(option);
</script>
</body>
</html>实现效果说明
[*]页面布局：
[*]页面包含一个 div 元素，其 id 为 main，用于承载 ECharts 图表。
[*]div 的宽度为 750px，高度为 600px。
[*]ECharts 初始化：
[*]使用 echarts.init 方法初始化 ECharts 实例，并将 main 元素作为容器。
[*]数据定义：
[*]定义了两个变量 value 和 value1，分别表示“本年收缴率”和“本月收缴率”的值。
[*]这两个值分别为 0.65 和 0.16。
[*]图表配置：
[*]水柱图：
[*]类型为 liquidFill，表示液态填充图。
[*]半径为容器的 47%，中心位置为 75% 水平位置和 45% 垂直位置。
[*]数据为 ，即 0.16。
[*]背景样式设置了边框宽度为 1，颜色为半透明的 rgba(51, 66, 127, 0.7)。
[*]标签显示为百分比形式，字体大小为 28px，颜色为白色。
[*]外轮廓无边距，边框宽度为 2，颜色为 #112165。
[*]颜色渐变从 #2aa1e3 到 #08bbc9
[*]应用配置：
[*]使用 myChart.setOption(option) 方法将配置项应用到 ECharts 实例中，从而生成并显示图表。
页:
[1]