Echarts水波图实现

最近项目中接到一个新需求大概样子就是要实现在这里插入图片描述
这样的效果,查看了百度Echarts的官方文档与官方例子中,并没有找到这样的例子。
最后找到echarts-liquidfill插件实现最终效果。

引入

首先我们需要引入 echarts.js
其次 我们需要引入echarts-liquidfill.min.js
如:在这里插入图片描述

  1. HTML中我们需要定义一个容器来承载效果的实现:
  2. 在这里插入图片描述
  3. 并且我们好需要设置容器宽高,如果不设定的话,效果就不会呈现出来:
  4. 在这里插入图片描述
  5. 这只是一个简单的例子,在实际项目中css建议引入不建议这样写,宽高可以根据项 目实际定义
    6.接下来我们就要进行效果展示的代码编写,其实也是比较简单的:
    首先我们需要对容器进行初始化:
    在这里插入图片描述
    然后我们就可以声明图标的配置,并在option中进行相关界面展示效果的配置:
    具体的在这里插入图片描述
  6. 具体的配置我们可以看github详细配置文档
  7. https://github.com/ecomfe/echarts-liquidfill
  8. 最关键一步也是最后一步:
    在这里插入图片描述

然后我们打开浏览器就可以看到具体效果了
在这里插入图片描述

  • 5
    点赞
  • 20
    收藏
    觉得还不错? 一键收藏
  • 1
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 1
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值