Echarts typescript liquidfill 水球图波浪渐变色

最近在用vue3 + echarts 开发 需要做一个波浪渐变色的水球图

百度了好几个文章 终于摸索出liquidfill 水球图波浪渐变色的写法（其实和echarts其他图渐变色有相似之处）

<template>
  <div id="liquid-fill" ref="liquid-fill"></div>
</template>

关键代码在series中 data的itemStyle

<script  lang="ts" setup>
import * as echarts from "echarts";
import "echarts-liquidfill/src/liquidFill.js";//引入水球图
import {onMounted} from "vue";

onMounted(() => {

  type EChartsOption = echarts.EChartsOption
  const liquidfillchartDom = document.getElementById('liquid-fill')!;
  const liquidfillChart = echarts.init(liquidfillchartDom);
  let liquidfillOption: EChartsOption;

  liquidfillOption = {
   
    backgroundColor: 'transparent',
    title: {
      name: '全市',
      text: '下降' + 65 + '%',
      x: 'center',
      y: 'center',
      textStyle: {
        fontSize: '20',
        fontWeight: '400',
        fontFamily: 'Source Han Sans CN',
        color: '#63FAFA',
      },
    },
    tooltip: {
      show: true
    },
    series: [
      {
        type: 'liquidFill',
        radius: '53%',
        center: ['50%', '50%'],
        amplitude: 10,
        
        //关键代码
        data: [{value:0.5,
          itemStyle: {
            normal: {
              color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
                offset: 0,//0%时的颜色 从上往下看 最上面是0%
                color: '#2CB199'
              }, {
                offset: 1,//100%时的颜色 从上往下看 最上面是0%
                color: '#0E5B54'
              }],),
            }
          }
        },//波浪1的渐变色
          //波浪2的渐变色
           {value: 0.44,

          itemStyle: {
            normal: {
              color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
                offset: 0,
                color: '#2CB199'
              }, {
                offset: 1,
                color: '#0E5B54'
              }]),
            }
          }
        }],
      
        backgroundStyle: {
          borderWidth: 1,
          color: '#144548',
        },
        label: {
          normal: {
            formatter: '',
          },
        },
        outline: {
          show: false,
        },
      },
      {
        type: 'pie',
        clockWise: true,
        hoverAnimation: false,
        radius: ['63%', '67%'],
        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: ['70%', '72%'],
        center: ['50%', '50%'],
        data: _acc(),
      },
    ],

  }
  liquidfillOption && liquidfillChart.setOption(liquidfillOption);
})

function _acc() {
  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;
}

</script>

 

 color: new echarts.graphic.LinearGradient(0, 0, 0, 1)

echarts内置的渐变色生成器：echarts.graphic.LinearGradient
(0, 0, 0, 1）  4个参数用于配置渐变色的起止位置, 这4个参数依次对应
右、下、左、上 

(0, 0, 0, 1）的意思其实就是渐变色由上而下

代码运行的效果如下：