echarts 圆柱体（带头部阴影）

<template>
  <div :id="echartsId"></div>
</template>
<script setup>
  import * as echarts from 'echarts'
  import { reactive, ref, onMounted, defineProps, watch, onUnmounted } from 'vue'
  const props = defineProps({
    echartsBool: {
      type: Boolean,
      default: false,
    },
    echartsId: {
      type: String,
      default: 'echartsId',
    },
    // 柱状宽度
    echartsBarWidth: {
      type: String,
      default: '30%',
    },
    // x轴数据
    xAxisDataJson: {
      type: Array,
      default: () => {
        return []
      },
    },
    // y轴数据
    yAxisJson: {
      type: Object,
      default: () => {
        return {
          name: '单位：数量',
        }
      },
    },
    // y轴字体样式
    nameTextStyle: {
      type: Object,
      default: () => {
        return {
          color: '#fff',
          fontSize: 14,
          fontWeight: 400,
          verticalAlign: 'bottom',
          // 左上字体位置
          padding: [0, -20, 10, 20],
          fontFamily: 'PingFang SC',
        }
      },
    },
    //  柱状图颜色
    barColorJson: {
      type: Object,
      default: () => {
        return {
          headColor1: 'rgba(43,194,195,1)',
          headColor2: 'rgba(43,194,195,0.5)',
          upBarColor: 'rgba(30,70,76,0.5)',
          bottomBarColor1: 'rgba(43,194,195,1)',
          bottomBarColor2: 'rgba(43,194,195,0.5)',
          topColor: 'rgba(30,70,76,1)',
        }
      },
    },
    // 数据展示
    dataList: {
      type: Array,
      default: () => {
        return [
          {
            name: '公司1',
            value: 73,
            max: 100,
          },
          {
            name: '公司2',
            value: 18,
            max: 100,
          },
          {
            name: '公司3',
            value: 43,
            max: 100,
          },
          {
            name: '公司4',
            value: 66,
            max: 100,
          },
        ]
      },
    },
    // legend方向
    legendDirection: {
      type: Object,
      default: () => {
        return {
          bottom: '0',
          top: '0',
          left: '0',
          right: '0',
        }
      },
    },
    // grid方向
    gridDirection: {
      type: Object,
      default: () => {
        return {
          bottom: '35',
          top: '25%',
          right: '0%',
          left: '10%',
        }
      },
    },
    // dataListLength 大小==长度约束柱状宽度  定时器==个数 两个不会同时出现大小暂时不用
    dataListLength: {
      type: Number,
      default: 8,
    },
  })
  const dataKey = reactive(['topData', 'bottomBar', 'bottomCircle', 'middleCircle', 'upBar'])
  const dataJs