vue3+echarts實(shí)現(xiàn)漸變色環(huán)形圖過程

更新時(shí)間：2024年08月28日 14:24:54 作者：不吃辣椒不行

這篇文章主要介紹了vue3+echarts實(shí)現(xiàn)漸變色環(huán)形圖過程,具有很好的參考價(jià)值,希望對(duì)大家有所幫助,如有錯(cuò)誤或未考慮完全的地方,望不吝賜教

vue3 echarts實(shí)現(xiàn)漸變色環(huán)形圖

實(shí)現(xiàn)的效果大致是這樣

由于是公司的項(xiàng)目，指引線后標(biāo)注的內(nèi)容不展示了，大致是指引線上方是name，下邊是value+單位

1.定義圖表容器

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

2.我這邊所需要的數(shù)據(jù)形式大概是

const data = {
    equmentStatusEchart: [
    {name: '標(biāo)題1', value: 10}
    {name: '標(biāo)題2', value: 10}
    ]
}

通過接口拿到的數(shù)據(jù)類型一般是：[{} ,{}]這種類型的，寫一個(gè)方法將其轉(zhuǎn)變?yōu)槲宜枰男问?/p>

const convertArrayToObject = (array) => {
  const convertedObject = {
    equmentStatusEchart: array.map(item => ({
      name: item.name,
      value: item.value
    }))
  };
  return convertedObject;
};

具體的代碼如下：

將接口轉(zhuǎn)換成自己的就好了，我這個(gè)是隨機(jī)生成的顏色漸變，如果有需求可以固定一個(gè)顏色數(shù)組

import * as echarts from 'echarts';
import { ref, onMounted, nextTick } from 'vue';
import { getPersonnel } from '@/api'
const chartRef = ref(null)
//重點(diǎn)人員
const rangArr = ref([]);
const distribution = ref([])
const distributionList = ref([])
const deflag = ref(1)
const angleArr = ref({})
const data = ref([])
//轉(zhuǎn)換成所需對(duì)象數(shù)組
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)` // 終點(diǎn)顏色
      }],
      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()
  
})