设为首页收藏本站
切换到窄版

爬行的蜗牛

 找回密码
 立即注册

QQ登录

只需一步，快速开始

搜索
热搜: golang Linux PHP
爬行的蜗牛»论坛 › 个人专用 › 其他相关知识 › HTML+CSS › 水波纹动画特效 (含源码)
返回列表 发新帖
查看: 116|回复: 0

水波纹动画特效 (含源码)

[复制链接]
yycvip

152

主题

48

回帖

1137

积分

管理员

积分
1137
发表于 2024-11-23 16:56:37 | 显示全部楼层 |阅读模式
效果


111.gif


完整代码


  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4.     <meta charset="UTF-8">
  5.     <meta name="viewport" content="width=device-width, initial-scale=1.0">
  6.     <title>水柱图动画</title>
  7.     <script src="https://cdn.jsdelivr.net/npm/echarts@4.4.0/dist/echarts.min.js"></script>
  8.     <script src="https://cdn.jsdelivr.net/npm/echarts-liquidfill@2.0.6/dist/echarts-liquidfill.min.js"></script>
  9. </head>
  10. <body>
  11.     <div id="main" style="width: 750px;height:600px;"></div>
  12.     <script>
  13.         // 初始化 ECharts 实例
  14.         var myChart = echarts.init(document.getElementById('main'));

  16.         var value = 0.65;
  17.         var value1 = 0.16;
  18.         var data = [value, value1];
  19.         var option = {
  20.             backgroundColor: '#0F224C',
  21.             title: [
  22.                 {
  23.                     text: '本年收缴率',
  24.                     x: '22%',
  25.                     y: '70%',
  26.                     textStyle: {
  27.                         fontSize: 14,
  28.                         fontWeight: '100',
  29.                         color: '#5dc3ea',
  30.                         lineHeight: 16,
  31.                         textAlign: 'center',
  32.                     },
  33.                 },
  34.                 {
  35.                     text: '本月收缴率',
  36.                     x: '73%',
  37.                     y: '70%',
  38.                     textStyle: {
  39.                         fontSize: 14,
  40.                         fontWeight: '100',
  41.                         color: '#5dc3ea',
  42.                         lineHeight: 16,
  43.                         textAlign: 'center',
  44.                     },
  45.                 },
  46.             ],
  47.             series: [
  48.                 {
  49.                     type: 'liquidFill',
  50.                     radius: '47%',
  51.                     center: ['25%', '45%'],
  52.                     data: [value, value],
  53.                     backgroundStyle: {
  54.                         borderWidth: 1,
  55.                         color: 'rgba(51, 66, 127, 0.7)',
  56.                     },
  57.                     label: {
  58.                         normal: {
  59.                             formatter: (value * 100).toFixed(2) + '%',
  60.                             textStyle: {
  61.                                 fontSize: 50,
  62.                                 color: '#fff',
  63.                             },
  64.                         },
  65.                     },
  66.                     outline: {
  67.                         borderDistance: 0,
  68.                         itemStyle: {
  69.                             borderWidth: 2,
  70.                             borderColor: '#112165',
  71.                         },
  72.                     },
  73.                     color: ['#446bf5', '#2ca3e2'],
  74.                 },
  75.                 {
  76.                     type: 'liquidFill',
  77.                     radius: '47%',
  78.                     center: ['75%', '45%'],
  79.                     data: [value1, value1],
  80.                     backgroundStyle: {
  81.                         borderWidth: 1,
  82.                         color: 'rgba(51, 66, 127, 0.7)',
  83.                     },
  84.                     label: {
  85.                         normal: {
  86.                             formatter: (value1 * 100).toFixed(2) + '%',
  87.                             textStyle: {
  88.                                 fontSize: 28,
  89.                                 color: '#fff',
  90.                             },
  91.                         },
  92.                     },
  93.                     outline: {
  94.                         borderDistance: 0,
  95.                         itemStyle: {
  96.                             borderWidth: 2,
  97.                             borderColor: '#112165',
  98.                         },
  99.                     },
  100.                     color: ['#2aa1e3', '#08bbc9'],
  101.                 },
  102.             ],
  103.         };

  105.         // 使用配置项设置图表
  106.         myChart.setOption(option);
  107.     </script>
  108. </body>
  109. </html>
复制代码
实现效果说明
  • 页面布局：

    • 页面包含一个 div 元素，其 id 为 main，用于承载 ECharts 图表。
    • div 的宽度为 750px，高度为 600px。

  • ECharts 初始化：

    • 使用 echarts.init 方法初始化 ECharts 实例，并将 main 元素作为容器。

  • 数据定义：

    • 定义了两个变量 value 和 value1，分别表示“本年收缴率”和“本月收缴率”的值。
    • 这两个值分别为 0.65 和 0.16。

  • 图表配置：

    • 水柱图：

    • 类型为 liquidFill，表示液态填充图。

    • 半径为容器的 47%，中心位置为 75% 水平位置和 45% 垂直位置。
    • 数据为 [value1, value1]，即 0.16。
    • 背景样式设置了边框宽度为 1，颜色为半透明的 rgba(51, 66, 127, 0.7)。
    • 标签显示为百分比形式，字体大小为 28px，颜色为白色。
    • 外轮廓无边距，边框宽度为 2，颜色为 #112165。
    • 颜色渐变从 #2aa1e3 到 #08bbc9

  • 应用配置：

    • 使用 myChart.setOption(option) 方法将配置项应用到 ECharts 实例中，从而生成并显示图表。

回复

举报

返回列表 发新帖
高级模式
B Color Image Link Quote Code Smilies
您需要登录后才可以回帖 登录 | 立即注册

本版积分规则

快速回复 返回顶部 返回列表