Echarts 多層環形圖實現數據可視化展示

一、為什麼需要多層環形圖

在實際的數據分析中，經常需要對數據進行分層的展示，以便更好地觀察數據之間的關係。而多層環形圖正是一種可以展示多個分層關係的可視化圖表。多層環形圖通過外層與內層的環形圖表現不同的維度，外層是總體，內層是進一步的分類，便於快速查看各個維度數據之間的大小關係與變化趨勢。例如，可以將一個企業的總體銷售額作為外層環形圖，內層分類為各產品線銷售額，直觀地比較各產品線對整個企業銷售額的貢獻度。

二、Echarts 多層環形圖實現

Echarts 是一款基於 Javascript 的數據可視化庫，開發者可以用它創建各種各樣的圖表與數據可視化。多層環形圖也可以使用 Echarts 來實現。

以下是一個簡單的實現 Echarts 多層環形圖的示例，利用 Echarts 基礎庫的餅圖組件和嵌套餅圖組件完成。

// 引入 Echarts
import echarts from 'echarts'

// 初始化 Echarts 實例
const myChart = echarts.init(document.getElementById('myChart'))

// 配置選項
const option = {
  series: [
    {
      type: 'pie',
      data: [
        { value: 100, name: '總體數據' },
      ],
      radius: ['0%', '40%'], // 外層餅圖半徑
      label: {
        show: true,
        position: 'center', // 文字在環形圖中間顯示
        formatter: '{b}',
      },
      itemStyle: {
        normal: {
          borderWidth: 5,
          borderColor: '#ffffff',
        },
      },
      tooltip: {
        show: false,
      },
      z: 1,
    },
    {
      type: 'pie',
      data: [
        { value: 60, name: '分類1' },
        { value: 40, name: '分類2' },
      ],
      radius: ['50%', '70%'], // 內層餅圖半徑
      itemStyle: {
        normal: {
          borderWidth: 5,
          borderColor: '#ffffff',
        },
      },
      labelLine: {
        show: false,
      },
      tooltip: {
        show: true,
        formatter: '{b}：{c}',
      },
      z: 2,
    },
  ],
};
// 顯示圖表
myChart.setOption(option)

在實現 Echarts 多層環形圖時，需要配置多個餅圖組件，並分別設置各自的數據、餅圖半徑等選項。其中，內層餅圖的半徑應該大於外層餅圖的半徑，否則會重疊在一起。

三、多層環形圖應用場景

多層環形圖可以用於分析數據的多個維度之間的關係。以下是一些多層環形圖的應用場景。

1. 企業銷售數據分析

在企業銷售數據分析中，可以使用多層環形圖將總體銷售額與不同產品線的銷售額進行對比。外層環形圖展示總體銷售額，內層環形圖則分為各產品線銷售額。這樣可以直觀地了解各產品線銷售額對整個企業銷售額的貢獻，有助於企業制定銷售策略。

2. 網站訪問數據分析

在網站訪問數據分析中，可以使用多層環形圖將總體訪問量與不同來源的訪問量進行對比。外層環形圖展示總體訪問量，內層環形圖則分為各來源的訪問量。這樣可以直觀地了解各個來源對整個網站訪問量的貢獻，有助於網站運營優化。

3. 產品分析

在產品分析中，可以使用多層環形圖將產品特點進行對比。例如外層環形圖展現各個產品線特點，內層環形圖展現該產品線下各個產品的特點和分布情況。這樣可以直觀地了解各個產品特點，有助於產品設計與定價決策。