echarts 球状波浪滚动效果

效果图

代码

首先下载 echarts 并引入

npm install echartsimport * as echarts from 'echarts';

1、html部分

//  html 代码片段
<div class="liquidFill" id="liquidFill" style:width: 200px; height: 200px;></div>

2、js部分

let ele = null;
let myEcharts = null;let _option = {backgroundColor: "#0F224C",series: [{type: "liquidFill",radius: "80%",center: ["50%", "50%"],left: 'center',top: 'middle',color: [{type: "linear",x: 0,y: 0,x2: 0,y2: 1,colorStops: [{offset: 0,color: "rgba(9,152,200,0.6)",// color: "#446bf5",},{offset: 1,color: "#02B1FF",// color: "#2ca3e2",},],globalCoord: false,},],data: [0.30, 0.30], // data个数代表波浪数backgroundStyle: {borderWidth: 1,color: "RGBA(51, 66, 127, 0.7)",},label: {normal: {textStyle: {fontSize: 18,color: " rgba(255,255,255,0.60)",},},},outline: {// show: falseborderDistance: 0,itemStyle: {borderWidth: 2,borderColor: "#112165",},},},],};if (!ele ) {ele = document.getElementById('liquidFill');}myEcharts = echarts.init(ele).setOption(_option, true);