echarts-liquidfill水滴球效果

npm案例：
https://www.npmjs.com/package/echarts-liquidfill?activeTab=readme

echarts-liquidfill水滴球效果

import { useRef } from 'react';
import * as echarts from 'echarts';
import 'echarts-liquidfill';

const chartRef = useRef<any>();
const chartInstance = useRef<any>();

const initChart = () => {
  chartInstance.current = echarts.init(chartRef.current);
  chartInstance.current.setOption({
  	series
  })
}
useEffect(() => {
  initChart();
}, []);

<div ref={chartRef} style={{ height: '100%' }} />

html引入方式

//https://echarts.apache.org/zh/builder.html
<script type="text/javascript" src="./echarts.min.js"></script>

//https://github.com/ecomfe/echarts-liquidfill
<script type="text/javascript" src="./echarts-liquidfill.min.js"></script>

<div id="LiquidfillChart" style="height: 100%" />

<script type="text/javascript">
      const chartDom = document.getElementById('LiquidfillChart');
      const myChart = echarts.init(chartDom);
      const option = {
        series
      };

      option && myChart.setOption(option);
  </script>

series配置

const series = [
   {
     // 水球图
     type: 'liquidFill', // 水球图
     radius: '90%', // 水球图半径
     top: 20,
     itemStyle: {
       // 水球图样式
       opacity: 1, // 水球图透明度
     },
     backgroundStyle: {
       color: '#213153', //水球图内部背景色
       opacity: 0.1,
     },
     data: [
       {
         // 水球图数据
         name: 'score', // 水球图数据名称
         direction: 'right', // 水球图数据方向
         value: .3, // 水球图数据值
         itemStyle: {
           // 水球图数据样式
           opacity: 1, // 水球图数据透明度
           normal: {
             // 水球图数据正常样式
             color: {
               type: 'linear',
               x: 0,
               y: 0,
               x2: 0,
               y2: 1,
               colorStops: [
                 {
                   offset: 0,
                   color: '#2876F7', // 0% 处的颜色
                 },
                 {
                   offset: 1,
                   color: '#35EBFB', // 100% 处的颜色
                 },
               ],
               global: false, // 缺省为 false
             }, // 水球图数据正常样式颜色
           },
         },
       },
     ],
     label: {
       // 设置百分比展示
       color: '#24FDFC', // 百分比颜色
       normal: {
         // 百分比正常样式
         textStyle: {
           // 百分比正常样式字体
           fontSize: 20, // 百分比正常样式字体大小
           color: '#A4DAFF',
         },
         formatter: function (param) {
           // 百分比正常样式字体格式
           return param.value * 100 + '%'; // 百分比正常样式字体格式
         },
       },
     },
     //外部细圆
     outline: {
       // 是否显示外圈
       show: true,
       borderDistance: 0, // 外部圆线距离水球的距离
       itemStyle: {
         // 外部圆线样式
         borderWidth: 1, // 外部圆线宽度
         borderColor: '#67abef',
       },
     },
   },
 ],