echarts 多个水球图简单移动动画demo

静态图片
引入echarts和echarts-liquidfill
页面大体布局
相关简易样式
实例化水球图效果

静态图片

使用ppchart水球图配置效果

引入echarts和echarts-liquidfill

引入echarts的cdn,和水球图的插件

将水球图插件下载到本地引入；
引入echarts插件；

<head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><script type="text/javascript" src="https://cdn.jsdelivr.net/npm/echarts/dist/echarts.min.js"></script><script type="text/javascript" src="D:/echarts/echarts-liquidfill-master/dist/echarts-liquidfill.js"></script>
</head>

页面大体布局

<body><div class="wrap"><div class="content"><div class="box box1"><div id="main" class="chart-box"></div></div><div class="box box2"><div id="main1" class="chart-box"></div></div><div class="box box3"><div id="main2" class="chart-box"></div></div><div class="box box4"><div id="main3" class="chart-box"></div></div><div class="box box5"><div id="main4" class="chart-box"></div></div><div class="box box6"><div id="main5" class="chart-box"></div></div></div></div>
</body>

相关简易样式

<style>body {background: #ccc;}.wrap {display: flex;align-items: center;justify-content: center;width: 700px;height: 550px;background-color: black;}.content {border: 1px solid #eee;/* 有边框 *//* width: 688px;height: 533px; */width: 680px;height: 530px;display: flex;flex-wrap: wrap;}.box {/* border: 1px solid #eee; */position: relative;}.chart-box {width: 100%;height: 100%;position: absolute;transition: all 0.5s;}.box1 {width: 200px;height: 200px;}.box2 {width: 360px;height: 250px;}.box3 {width: 120px;height: 150px;}.box4 {width: 380px;height: 280px;}.box5 {width: 180px;height: 280px;}.box6 {width: 120px;height: 280px;}#main {animation: animation1 3s infinite;}#main1 {animation: animation2 4s infinite;}#main2 {animation: animation3 3s infinite;}#main3 {animation: animation4 5s infinite;}#main4 {animation: animation5 4s infinite;animation-delay: 30ms;}#main5 {animation: animation6 2s infinite;animation-delay: 0.5s;}@keyframes animation1 {0% {top: 0;left: 0;}20% {top: -5px;left: 40px;}40% {top: 20px;left: 40px;}80% {top: 0;left: -10px;}100% {top: 0;left: 0;}}@keyframes animation2 {0% {top: 0;left: 0;}20% {top: -10px;left: 40px;}40% {top: 60px;left: 40px;}80% {top: 0;left: -30px;}100% {top: 0;left: 0;}}@keyframes animation3 {0% {top: 0;left: 0;}20% {top: -10px;left: -40px;}40% {top: 50px;left: -15px;}80% {top: 80px;left: -50x;}100% {top: 0;left: 0;}}@keyframes animation4 {0% {top: 0;left: 0;}20% {top: -30px;left: -20px;}40% {top: 5px;left: 40px;}80% {top: 0;left: -60px;}100% {top: 0;left: 0;}}@keyframes animation5 {0% {top: 0;left: 0;}20% {top: -30px;left: -40px;}40% {top: 30px;left: 5px;}80% {top: 10px;left: -60px;}100% {top: 0;left: 0;}}@keyframes animation6 {0% {top: 0;left: 0;}20% {top: -20px;left: -20px;}40% {top: -40px;left: -10px;}80% {top: 40px;left: -30px;}100% {top: 0;left: 0;}}
</style>

实例化水球图效果

<script type="text/javascript">option = {title: {text: 65 + "%",x: "center",y: "center",textStyle: {fontSize: "45",fontWeight: "400",fontFamily: "Source Han Sans CN",color: "#56D4B2",},},series: [{type: "liquidFill",radius: "65%",center: ["50%", "50%"],amplitude: 10,itemStyle: {color: {type: "linear",x: 0,y: 0,x2: 0,y2: 1,colorStops: [{offset: 0,color: "rgba(27, 192, 179, 0.22)", // 0% 处的颜色},{offset: 1,color: "rgba(27, 192, 179, 0.22)",  // 100% 处的颜色},],},},data: [0.6, 0.5, 0.44],backgroundStyle: {borderWidth: 1,color: "rgba(27, 192, 179, 0.06)",},label: {normal: {formatter: "",},},outline: {show: false,},},{type: "pie",clockWise: true,hoverAnimation: false,radius: ["80%", "85%"],center: ["50%", "50%"],itemStyle: {normal: {label: {show: false,},},},data: [{value: 100,itemStyle: {normal: {color: new echarts.graphic.LinearGradient(0.2, 1, 0.3, 0, [{offset: 0,color: "rgba(54, 72, 71, 1)",},{offset: 1,color: "rgba(17, 192, 178, 1)",},]),},},},],},{type: "pie",silent: true,hoverAnimation: false,radius: ["90%", "92%"],center: ["50%", "50%"],itemStyle: {normal: {label: {show: false,},},},data: _pie(),},],};function _pie() {let dataArr = [];for (var i = 0; i < 100; i++) {if (i % 2 === 0) {dataArr.push({value: 10,itemStyle: {normal: {color: "rgba(25, 38, 63, 1)",},},});} else {dataArr.push({value: 10,itemStyle: {normal: {color: "rgba(0,0,0,0)",},},});}}return dataArr;}var myChart = echarts.init(document.getElementById('main'));myChart.setOption(option);myChart.resize();var myChart1 = echarts.init(document.getElementById('main1'));myChart1.setOption(option);myChart1.resize();var myChart2 = echarts.init(document.getElementById('main2'));myChart2.setOption(option);myChart2.resize();var myChart3 = echarts.init(document.getElementById('main3'));myChart3.setOption(option);myChart3.resize();var myChart4 = echarts.init(document.getElementById('main4'));myChart4.setOption(option);myChart4.resize();var myChart5 = echarts.init(document.getElementById('main5'));myChart5.setOption(option);myChart5.resize();
</script>

echarts 多个水球图简单移动动画demo相关推荐

vue3+ts 之echarts 水球图 liquidFill 的使用
vue3+ts 之echarts 水球图 liquidFill 的使用前言一.echarts liquidfill.js水球图插件二.使用步骤 1.上代码总结前言项目框架使用的是 vben ...
ECHARTS 水球图
转载编辑. 原作者链接地址:https://zhuanlan.zhihu.com/p/25353670?group_id=827655855632715776 水球图是一种适合于展现单个百分比数据的图 ...
echarts 球形水波_ECharts 水球图教程
ECharts 水球图教程羡辙 2017-02-21 水球图是一种适合于展现单个百分比数据的图表类型,ECharts 的水球图插件使你能够通过非常简单的配置,实现酷炫的数据展示效果. 那么,今天我们 ...
echart水滴_漂亮得不像实力派：ECharts 水球图教程
水球图是一种适合于展现单个百分比数据的图表类型,ECharts 的水球图插件使你能够通过非常简单的配置,实现酷炫的数据展示效果. 那么,今天我们就一起来学习一下,如何使用 ECharts 水球图. 第 ...
利用ECharts绘制各式酷炫水球图
本文来自于ECharts官方博客. 原文地址:ECharts 水球图教程责编:陈秋歌,关注前端开发等领域,寻求报道或者投稿请发邮件至chenqg#csdn.net. 水球图是一种适合于展现单个百分比 ...
【如何实现一个简单的canvas动态水球图】
** 如何实现一个简单的canvas动态水球图. ** 由于在项目中遇到有个制作一个水球图需求,在网上查找相关资料比较少,样式又不符合预期,在这样的情况下封装了一个自己可更改.定制化的水球图动效组件. ...
html 语言 gif 动画,动效篇（1）－－从简单CSS3动画片段代码，到生成gif动图～
简单css动画片段代码(最终效果 ) (一)请自行下载安装Dreamweaver 在Dreamweaver编写代码(如需参考请复制下列代码) (二)HTML CSS代码详解css代码(/*详解*/) ...
echarts代码格式化_echarts水球图格式化Format使用
上周有一个需求,echarts的水球图要做展示,因为后台数据有可能值会返回'-' ,所以需要动态展示,首先返回值会有四个,分别表示本周/本月百分率以及本周/本月具体数值所以,产品提了一个需求当后端接口 ...
vue echarts 水球图多个水球图并存配置
echarts 水球图下面介绍为vue-cli开发环境下 npm下载 npm install echarts --save npm install echarts-liquidfill --save ...

echarts 多个水球图简单移动动画demo

echarts 多个水球图简单移动动画demo

静态图片

引入echarts和echarts-liquidfill

页面大体布局

相关简易样式

实例化水球图效果

echarts 多个水球图简单移动动画demo相关推荐

最新文章

热门文章