快捷導(dǎo)航

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

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

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

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

1、因為項目用到的技術(shù)棧是echarts來做圖標，拿到需求首先想到的是去echarts官網(wǎng)找實例。 2、餅圖中，我們找到“餅圖扇區(qū)間隙” ，比較有參考性。

3、實例的配置項中，我們可以重點關(guān)注series的配置

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

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

4、其次是扇區(qū)的透明外描邊如何實現(xiàn)呢？我這邊想到的方案是，series配置兩個餅圖（pie）。外圈的餅圖增加 radius: []的值，然后修改itemStyle的顏色透明度，即可實現(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的效果，這里不詳細贅述。

總結(jié)

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

您可能感興趣的文章: