echarts球状波浪纹

echarts 球状波浪滚动效果

效果图

代码

首先下载 echarts 并引入

npm install echarts

import * 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: false
             borderDistance: 0,
             itemStyle: {
               borderWidth: 2,
               borderColor: "#112165",
             },
           },
         },
       ],
     };

     if (!ele ) {
       ele = document.getElementById('liquidFill');
     }
     myEcharts = echarts.init(ele).setOption(_option, true);