echarts实现一个3d效果柱形图

效果图：

思路是：
通过数组循环生成多个echarts实例盒子，生成的柱形图只有一条数据，是由多个图表设置barGap: '-100%'实现重叠，并通过设置柱形图中间颜色到边上颜色的渐变形成类似3d的视觉效果，实际每一个柱形图是由以下几个图表实现的：⛽️

1. 内层背景的body（bar）
2. 内层背景的顶部圆圈 （pictorialBar）
3. 外层绿色的实际值柱形图 （bar）
4. 外层顶部的圆圈 （pictorialBar）
5. 外层底部的圆圈 （pictorialBar）
   以及底部的圆盘是一个切图🥺
   

技术栈

vue3 TypeScript echarts
准备：
需要安装echarts和echarts-gl

yarn add echarts
yarn add echarts-gl

代码：
template:

<div class="bottom-bar">
    <div v-for="item, index in barList" :key="index" class="bottom-item">
        <img class="bar-bottom" src="@/assets/images/fiveWater/bar-bottom.png" alt="">
        <div class="top-rate num-18 mgb12">
            {
   {
    item.rate }}%
        </div>
        <div :ref="ref => item.dom = ref" class="bar-box mgb12" />
        <div class="bottom-name pang-18">
            {
   {
    item.name }}
        </div>
    </div>
</div>

javascript:

import 'echarts-gl'
import * as echarts from 'echarts'

const barList = reactive([
	{
    name: '基本能力', rate: 98, total: 100, done: 98, dom: ref() },
	{
    name: '考核情况', rate: 100, total: 100, done: 100, dom: ref() },
	{
    name: '推进情况', rate: 90, total: 100, done: 90, dom: ref() },
])
onMounted(() => {
   
    initBar()
})

const initBar = () => {
   
    data.barList.forEach((item) => {
   
        const series = [item.done]
        const staticData = toRaw(item)
        const output_3DBarCharts = echarts.init(item.dom)
        const options = get3DOptions(staticData, series)
        output_3DBarCharts.setOption(options)
        window.addEventListener('resize', () => {
   
            output_3DBarCharts.