在线实例

默认效果 显示文本
水球半径 文本颜色
边框宽度 设置字体
数据多少 是否显示波纹
水球颜色 是否显示动画

使用方法

  1. <div class="wrap">
  2. <canvas id="sucaihuo"></canvas>
  3. </div>
复制
  1. <script>
  2. $(function(){
  3. $('#sucaihuo').waterbubble();
  4. });
  5. </script>
复制

jQuery waterbubble 水球图的更多相关文章

  1. 一款基于jQuery饼状图比例分布数据报表

    今天给大家带来一款基于jQuery饼状图比例分布数据报表.这款报表插件适用浏览器:IE8.360.FireFox.Chrome.Safari.Opera.傲游.搜狗.世界之窗.效果图如下: 在线预览  ...

  2. 8款耀眼的jQuery/HTML5焦点图滑块插件

    1.HTML5/CSS3超酷焦点图特效 带前后翻页按钮 今天要分享的这款HTML5/CSS3焦点图插件切换效果比较简单,但是外观和功能却十分强大.该CSS3焦点图在切换图片时,图片以淡入淡出的方式缩小 ...

  3. 使用echarts水球图

    使用echarts水球图 官方实例中没有水球图样式,当我们需要用到水球图的时候需要下载echarts-liquidfill.js. 使用 在echarts之后引入 echarts-liquidfill ...

  4. 【带着canvas去流浪（7）】绘制水球图

    目录 一. 任务说明 二. 重点提示 三. 示例代码 四. 文字淹水效果的实现 五. 关于canvas抗锯齿 六. 小结 示例代码托管在:http://www.github.com/dashnowor ...

  5. 带着canvas去流浪系列之七 绘制水球图

    [摘要] 用原生canvasAPI实现百度echarts 示例代码托管在:http://www.github.com/dashnowords/blogs 一. 任务说明 使用原生canvasAPI绘制 ...

  6. echarts水球图编写

    // 前提条件 需要引入这个插件<script src="./echarts-liquidfill.min.js"></script> // 代码 let ...

  7. v-charts 绘制柱状图、条形图、水球图、雷达图、折线图+柱状图，附官网地址

    v-charts 官网地址:https://v-charts.js.org/#/ 柱状图: <template> <ve-histogram :data="chartDat ...

  8. Python pyecharts绘制水球图

    一.水球图Liquid.add()方法简介 Liquid.add()方法签名add(name, data, shape='circle', liquid_color=None, is_liquid_a ...

  9. Jquery 轮播图简易框架

    =====================基本结构===================== <div class="carousel" style="width: ...

随机推荐

  1. oracle vm virtualbox 如何让虚拟机可以上网

    刚安装了虚拟机,系统linux2.6. 可是想安装一些软件,发现没法联网.郁闷~  还要手动设置网络,可是也不是小白就可以干的事情,还要弄清楚原理才行. http://reverland.bitbuc ...

  2. EDM备忘录：触发式邮件订阅和退订功能介绍

    一般来说,有触发式邮件订阅和退订功能是邮件模板设计中必不可少的两项功能,下面博主为大家介绍一下. 若客户在订阅后不想再收到这类邮件即可选择退订,将不再收到该IP地址的推广邮件,避免客户在继续收到这类邮 ...

  3. centos6.5+jexus5.6.3+mono 3.10实践，让asp.net在linux上飞一会儿

    备忘,这是给自己看的,用ubuntu server装mono 3.10老是卡在了编译libgdiplus上面,从来就没成功过,郁闷啊,零零散散搞了好几天,作罢.后来试了OpenSUSE 11很容易搞好 ...

  4. Legolas工业自动化平台入门（二）数据响应动作

    在上一篇文章Legolas工业自动化平台入门(一)搭建应用里,我们简单地提到了"动作"的概念.不清楚的童鞋不要着急,这篇我们就来介绍如何在Legolas平台上添加动作,并应用动作. ...

  5. ruby self.included用法

    ===Module#included 当一个模块混入到类时,如果该模块的included方法已经定义,那么该方法被调用.该方法的唯一参数就是接受混含的类的名字. module M def self.i ...

  6. 2014 网选 5024 Wang Xifeng's Little Plot

    题意:从任意一个任意一个可走的点开始找一个最长的路,这条路如果有转弯的话, 那么必须是 90度,或者没有转弯! 思路: 首先用dfs将所有可走点开始的 8 个方向上的线段的最长长度求出来 ! step ...

  7. 【转载】Grunt常用插件介绍

    项目名称 grunt-contrib v0.8.0 项目地址 https://github.com/gruntjs/grunt-contrib 项目介绍 此项目是对grunt常用插件的集合,刚接触gr ...

  8. android resources使用总结

    http://developer.android.com/guide/topics/resources/more-resources.html http://developer.android.com ...

  9. 使用自带的JavaScriptSerializer序列化实体 指定的属性如何不序列化

    public class GridConfig { public string width = "100%"; public string source = "dataA ...

  10. 基于.NET C#的 sqlite 数据库 ORM 【Easyliter】

    因为工作原因经常用到SQLITE数据库,但又找不到好用的ORM所以自个整理了一个简单好用的轻量极ORM框架:Easyliter 功能介绍: 1.支持SQL语句操作 2.支持 List<T> ...