水球图

描述:当前是关于Echarts图表中的 水球图 示例。
 
            const value = 0.62;
const path = 'path://M800 0h-576c-17.92 0-32 14.08-32 32v960c0 17.92 14.08 32 32 32h576c17.92 0 32-14.08 32-32V32c0-17.92-14.08-32-32-32z'
// const path1='path://M170.666667 0h682.666666v1024H170.666667z'
option = {
   backgroundColor: '#050A0D',
   //你的代码
   series: [
      {
         name: '预估量',
         type: 'liquidFill',
         radius: '50%',
         center: ['50%', '50%'],
         backgroundStyle: {
            color: '#050A0D',
         },
         shape: path,
         data: [value, value],
         amplitude: 20, //水波振幅
         label: {
            //标签设置
            // position: ['50%', '45%'],
            // formatter: '50%', //显示文本,
            textStyle: {
               // fontSize: '52px', //文本字号,
               color: '#fff',
            },
         },
         outline: {
            borderDistance: 10,
            itemStyle: {
               borderWidth: 5,
               borderColor: {
                  type: 'linear',
                  x: 1,
                  y: 0,
                  x2: 0,
                  y2: 0,
                  colorStops: [
                     {
                        offset: 0,
                        color: '#007DFF',
                     },
                     {
                        offset: 0.6,
                        color: 'rgba(45, 67, 114, 0.6)',
                     },
                     {
                        offset: 1,
                        color: 'rgba(45, 67, 114, 1)',
                     },
                  ],
                  globalCoord: false,
               },
            },
         },
         itemStyle: {
            color: {
               type: 'linear',
               x: 0,
               y: 1,
               x2: 0,
               y2: 0,
               colorStops: [
                  {
                     offset: 1,
                     color: 'rgba(31, 222, 225, 1)',
                  },
                  {
                     offset: 0.85,
                     color: '#007DFF80',
                  },
                  {
                     offset: 0,
                     color: 'rgba(31, 222, 225, 0.3)',
                  }
               ],
               globalCoord: false,
            },

            shadowBlur: 20 // 波浪的阴影范围
         },
      }]
};