vue3+echarts实现渐变色环形图过程

<div class="chart" ref="chartref" style="width: 610px; height: 260px;"></div>

const data = {
    equmentstatusechart: [
    {name: '标题1', value: 10}
    {name: '标题2', value: 10}
    ]
}

const convertarraytoobject = (array) => {
  const convertedobject = {
    equmentstatusechart: array.map(item => ({
      name: item.name,
      value: item.value
    }))
  };
  return convertedobject;
};

import * as echarts from 'echarts';
import { ref, onmounted, nexttick } from 'vue';
import { getpersonnel } from '@/api'
const chartref = ref(null)
//重点人员
const rangarr = ref([]);
const distribution = ref([])
const distributionlist = ref([])
const deflag = ref(1)
const anglearr = ref({})
const data = ref([])
//转换成所需对象数组
const convertarraytoobject = (array) => {
  const convertedobject = {
    equmentstatusechart: array.map(item => ({
      name: item.communityname,
      value: item.countsum,
      communityid: item.communityid
    }))
  };
  return convertedobject;
};
function getcoordinates(startarc, endarc) {
    const posi = [
      math.sin(startarc),
      -math.cos(startarc),
      math.sin(endarc),
      -math.cos(endarc)
    ];
    const dx = posi[2] - posi[0];
    const dy = posi[3] - posi[1];

    return getlocation(dx, dy);
  }

  function getlocation(dx, dy) {
    const tanv = dx / dy;
    const directsign = math.abs(tanv) < 1;
    const t = directsign ? tanv : 1 / tanv;

    const sign1 = t > 0 ? 1 : -1;
    const sign2 = dx > 0 ? 1 : -1;
    const sign = directsign ? sign1 * sign2 : sign2;

    const group1 = [0.5 - sign * t / 2, 0.5 + sign * t / 2];
    const group2 = sign > 0 ? [0, 1] : [1, 0];
    const group = [...group1, ...group2];
    const keys = directsign ? ['x', 'x2', 'y', 'y2'] : ['y', 'y2', 'x', 'x2'];

    let res = {};
    keys.foreach((k, idx) => {
      res[k] = group[idx];
    });
    return res;
  }
const getpersonnellist = async() => {
  distribution.value = await getpersonnel(deflag.value)
  distributionlist.value = distribution.value.data
  const obj = convertarraytoobject(distributionlist.value)
  console.log(obj)
  const totalvalue = ref(obj.equmentstatusechart.reduce((total, value) => total + value.value, 0));
  let cachenum = 0;
  for (let i = 0; i < obj.equmentstatusechart.length; i++) {
    const endnum = cachenum + obj.equmentstatusechart[i].value;
    rangarr.value.push([cachenum, endnum]);
    cachenum = endnum;
  }
  const anglearr = ref(rangarr.value.map(arr => arr.map(num => (num / totalvalue.value) * math.pi * 2)));
  data.value = obj.equmentstatusechart.map((item, index) => {
    const range = getcoordinates(anglearr.value[index][0], anglearr.value[index][1]);
    const startcolor = `rgb(${math.floor(math.random() * 256)}, ${math.floor(math.random() * 256)}, ${math.floor(math.random() * 256)})`;
    const color = {
      type: 'linear',
      x: range.x,
      x2: range.x2,
      y: range.y,
      y2: range.y2,
      colorstops: [{
        offset: 0, color: startcolor // 起始颜色
      }, {
        offset: 1, color: `${startcolor.substring(0, startcolor.length - 1)}, 0)` // 终点颜色
      }],
      global: false
    };

    return {
      name: item.name,
      value: item.value,
      itemstyle: {
        color: color
      }
    };
  })
}
 
  const getchart = async() => {
    await getpersonnellist()
    const option = {
      tooltip: {
        trigger: 'item',
        backgroundcolor: 'rgba(0, 0 , 0, .6)',
        bordercolor: "rgba(147, 235, 248, .8)",
        textstyle: {
          color: "#fff"
        },
      },
      series: [
        {
          type: 'pie',
          radius: ['65%', '75%'],
          center: ['50%', '50%'],
          avoidlabeloverlap: false,
          itemstyle: {
          },
          label: {
            show: true,
            position: 'outer',
            align: 'left',
            height: 50,
            lineheight: 10,
            formatter: function(params) {
            return (
              '{a|' + params.data.name + '}\n' +
              '{b|' + params.data.value  + ' } ' +
              '{value| 人}'
            );
            },
            borderwidth: 10,
            padding: [0, -60],
            rich: {
            a: {
              fontsize: 14,
              color: '#fff',
              fontweight: 400,
              lineheight: 35
            },
            b: {
              color: '#fff', 
              fontsize: 18,
              fontweight: 600,
              lineheight: 10
            },
            value: {
              color: '#fff',
              fontsize: 14,
              fontweight: 400,
            }
          }
          },
        labelline: {
          show: true,
          length: 20,
          length2: 160,
          smooth: 0,
          linestyle: {
            color: 'white'
          }
        },
          emphasis: {
            itemstyle:{
              shadowblur: 10,
              shadowoffsetx: 0,
              shadowcolor: 'rgba(0, 0, 0, 0.2)'
            }
          },
          data: data.value
        },

      ],
    };
    nexttick(() => {
      const chartdom = chartref.value;
      const mychart = echarts.init(chartdom);
      mychart.setoption(option)
    })
  }


onmounted(() => {
  getchart()
  
})