快捷導(dǎo)航

echarts實(shí)現(xiàn)餅圖扇區(qū)間隙及透明外描邊功能實(shí)例

更新時(shí)間：2026年03月19日 10:12:57 作者：黑幕困獸

餅圖主要是通過(guò)扇形的弧度表現(xiàn)不同類(lèi)目的數(shù)據(jù)在總和中的占比,它的數(shù)據(jù)格式比柱狀圖更簡(jiǎn)單,只有一維的數(shù)值,不需要給類(lèi)目,這篇文章主要介紹了echarts實(shí)現(xiàn)餅圖扇區(qū)間隙及透明外描邊的相關(guān)資料,需要的朋友可以參考下

以上是UI的效果圖。 功能實(shí)現(xiàn)思路：

1、因?yàn)轫?xiàng)目用到的技術(shù)棧是echarts來(lái)做圖標(biāo)，拿到需求首先想到的是去echarts官網(wǎng)找實(shí)例。 2、餅圖中，我們找到“餅圖扇區(qū)間隙” ，比較有參考性。

3、實(shí)例的配置項(xiàng)中，我們可以重點(diǎn)關(guān)注series的配置

    padAngle: 5,    //扇區(qū)之間的間距
    itemStyle: {
        borderRadius: 10   //扇區(qū)的圓角
    },

這兩項(xiàng)我們根據(jù)需要調(diào)整。

4、其次是扇區(qū)的透明外描邊如何實(shí)現(xiàn)呢？我這邊想到的方案是，series配置兩個(gè)餅圖（pie）。外圈的餅圖增加 radius: []的值，然后修改itemStyle的顏色透明度，即可實(shí)現(xiàn)UI稿的樣式

配置如下：

option = {
  tooltip: {
    trigger: 'item'
  },
  legend: {
    top: '5%',
    left: 'center'
  },
  series: [
    {
      name: 'Access From',
      type: 'pie',
      radius: ['40%', '50%'],
      avoidLabelOverlap: false,
      padAngle: 2,
      itemStyle: {
        borderRadius: 0
      },
      label: {
        show: false,
        position: 'center'
      },
      emphasis: {
        scaleSize: 15,
        label: {
          show: true,
          fontSize: 20,
          fontWeight: 'bold'
        }
      },
      labelLine: {
        show: false
      },
      data: [
        { value: 1048, name: 'A' },
        { value: 735, name: 'B' },
        { value: 580, name: 'C' },
        { value: 484, name: 'D' },
        { value: 300, name: 'E' }
      ]
    },
    {
      name: 'Access From',
      type: 'pie',
      radius: ['50%', '55%'],
      avoidLabelOverlap: false,
      padAngle: 2,
      itemStyle: {
        borderRadius: 0,
        opacity: 0.2
      },
      label: {
        show: false,
        position: 'center'
      },
      emphasis: {
        scale: false,
        label: {
          show: false
        }
      },
      labelLine: {
        show: false
      },
      data: [
        { value: 1048, name: 'A' },
        { value: 735, name: 'B' },
        { value: 580, name: 'C' },
        { value: 484, name: 'D' },
        { value: 300, name: 'E' }
      ]
    }
  ]
};

再根據(jù)需要，調(diào)整一些其他參數(shù)，基本上能滿足UI的效果，這里不詳細(xì)贅述。

總結(jié)

到此這篇關(guān)于echarts實(shí)現(xiàn)餅圖扇區(qū)間隙及透明外描邊的文章就介紹到這了,更多相關(guān)echarts餅圖扇區(qū)間隙及透明外描內(nèi)容請(qǐng)搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！

您可能感興趣的文章: