詳細闡述echarts環形圖

一、echarts環形圖百分比

echarts環形圖是一種展示數據比例的常用圖表類型。在環形圖中，每個扇形區域的大小代表該項數據佔總數據的比例，因此其百分比非常重要。我們可以使用echarts的series.data.label.format配置項來設置每個扇形區域中百分比的顯示形式。

option = {
  series: [{
    type: 'pie',
    data: [
      {value: 335, name: '直接訪問'},
      {value: 310, name: '郵件營銷'},
      {value: 234, name: '聯盟廣告'},
      {value: 135, name: '視頻廣告'},
      {value: 1548, name: '搜索引擎'}
    ],
    label: {
      position: 'inside',
      formatter: '{c}%'
    }
  }]
}

在以上代碼中，我們使用label.format配置項將每個扇形區域中的數值轉換為百分比並加上百分號。

二、echarts環形圖引導線加圓圈

為了更好地展示echarts環形圖中的數據，我們可以在圖表中加入引導線和圓圈。引導線可以將數據標籤與對應的扇形區域相連，圓圈則可以將這個連接更加醒目。

option = {
  series: [{
    type: 'pie',
    data: [
      {value: 335, name: '直接訪問'},
      {value: 310, name: '郵件營銷'},
      {value: 234, name: '聯盟廣告'},
      {value: 135, name: '視頻廣告'},
      {value: 1548, name: '搜索引擎'}
    ],
    label: {
      show: true,
      formatter: '{b}: {c} ({d}%)'
    },
    labelLine: {
      show: true,
      length: 20,
      length2: 50,
      smooth: true
    },
    itemStyle: {
      borderWidth: 2,
      borderColor: '#fff'
    }
  }]
}

在以上代碼中，我們設置了label.show和labelLine.show配置項來顯示引導線和數據標籤。同時，我們使用了itemStyle來設置圓圈的樣式。

三、echarts環形圖懸浮框

在echarts環形圖中，我們可以使用tooltip配置項來展示一些與數據有關的詳細信息。

option = {
  tooltip: {
    trigger: 'item',
    formatter: '{b} : {c} ({d}%)'
  },
  series: [{
    type: 'pie',
    data: [
      {value: 335, name: '直接訪問'},
      {value: 310, name: '郵件營銷'},
      {value: 234, name: '聯盟廣告'},
      {value: 135, name: '視頻廣告'},
      {value: 1548, name: '搜索引擎'}
    ],
    label: {
      show: true,
      formatter: '{b}'
    }
  }]
}

四、echarts環形圖中間加入文字

使用echarts的圖形文本組件，我們可以在echarts環形圖的中間加入一些文字，從而更好地說明數據的含義。

option = {
  graphic: {
    type: 'text',
    left: 'center',
    top: 'center',
    style: {
      fill: '#000',
      text: 'echarts環形圖',
      font: 'bold 20px Microsoft YaHei'
    }
  },
  series: [{
    type: 'pie',
    data: [
      {value: 335, name: '直接訪問'},
      {value: 310, name: '郵件營銷'},
      {value: 234, name: '聯盟廣告'},
      {value: 135, name: '視頻廣告'},
      {value: 1548, name: '搜索引擎'}
    ]
  }]
}

五、echarts環形圖中間文字

除了在echarts環形圖的中心添加文字外，我們還可以在中心位置展示數據的總計。

option = {
  title: {
    text: '數據總計',
    x: 'center',
    y: '40%'
  },
  graphic: [
    {
      type: 'text',
      left: 'center',
      top: 'center',
      style: {
        text: '1617',
        textAlign: 'center',
        font: 'bold 20px Microsoft YaHei'
      }
    },
    {
      type: 'text',
      left: 'center',
      top: '55%',
      style: {
        fill: '#666',
        text: '總計',
        textAlign: 'center',
        font: 'bold 14px Microsoft YaHei'
      }
    }
  ],
  series: [{
    type: 'pie',
    data: [
      {value: 335, name: '直接訪問'},
      {value: 310, name: '郵件營銷'},
      {value: 234, name: '聯盟廣告'},
      {value: 135, name: '視頻廣告'},
      {value: 1548, name: '搜索引擎'}
    ]
  }]
}

六、echarts環形圖數據標籤

數據標籤可以直接在echarts環形圖中，顯示每個扇形區域的值，並且可以與文字、引導線等進行聯動。

option = {
  series: [{
    type: 'pie',
    data: [
      {value: 335, name: '直接訪問'},
      {value: 310, name: '郵件營銷'},
      {value: 234, name: '聯盟廣告'},
      {value: 135, name: '視頻廣告'},
      {value: 1548, name: '搜索引擎'}
    ],
    label: {
      show: true,
      formatter: '{b}: {c} ({d}%)'
    }
  }]
}

七、echarts環形圖位置

使用echarts環形圖時，我們有時需要調整其位置，以便更好地適應頁面的布局。

option = {
  position: ['50%', '50%'],
  series: [{
    type: 'pie',
    radius: ['40%', '70%'],
    data: [
      {value: 335, name: '直接訪問'},
      {value: 310, name: '郵件營銷'},
      {value: 234, name: '聯盟廣告'},
      {value: 135, name: '視頻廣告'},
      {value: 1548, name: '搜索引擎'}
    ]
  }]
}

八、echarts環形圖未選中效果

我們可以在echarts環形圖中給每個扇形區域設置未選中效果，從而提升用戶體驗。

option = {
  series: [{
    type: 'pie',
    data: [
      {value: 335, name: '直接訪問'},
      {value: 310, name: '郵件營銷'},
      {value: 234, name: '聯盟廣告'},
      {value: 135, name: '視頻廣告'},
      {value: 1548, name: '搜索引擎'}
    ],
    itemStyle: {
      emphasis: {
        shadowBlur: 10,
        shadowOffsetX: 0,
        shadowColor: 'rgba(0, 0, 0, 0.5)'
      }
    }
  }]
}

九、echarts環形圖大小設置

我們可以根據實際情況設置echarts環形圖的大小，以便更好地展示數據。

option = {
  series: [{
    type: 'pie',
    radius: ['50%', '70%'],
    data: [
      {value: 335, name: '直接訪問'},
      {value: 310, name: '郵件營銷'},
      {value: 234, name: '聯盟廣告'},
      {value: 135, name: '視頻廣告'},
      {value: 1548, name: '搜索引擎'}
    ]
  }]
}

總結

echarts環形圖是一種常用的數據展示類型，在實際開發中，我們可以根據需求使用不同的配置項來達到最好的展示效果。在本文中，我們詳細闡述了echarts環形圖的各種配置項，包括百分比、引導線加圓圈、懸浮框等。通過本文的學習，相信大家對echarts環形圖的應用有了更深入的理解和掌握。