ECharts餅圖：如何展示資料佔比

隨著資料視覺化的廣泛應用，ECharts這個優秀的視覺化程式庫也受到越來越多的關注。其中，圓餅圖被廣泛應用於展示資料的佔比情況。本文將介紹如何使用ECharts餅圖展示資料佔比，並提供具體的程式碼範例。

一、ECharts餅圖的基礎概念

首先，我們需要了解餅圖的基礎概念。圓餅圖常用於表示資料的佔比情況，將具體的數值轉換為角度大小，再以扇形區域的大小來表示。各扇形區域的大小與它們的數值成比例。

二、ECharts餅圖實作方式

使用ECharts繪製圓餅圖，需要先引入ECharts庫，並建立一個帶有指定尺寸的div標籤，用於展示餅圖。具體程式碼如下：

<style type="text/css">
  #myChart {
    width: 400px;
    height: 400px;
  }
</style>
<div id="myChart"></div>
<script src="echarts.min.js"></script>

其中，style標籤用於指定餅圖所在的div標籤的尺寸。 script標籤則引進了ECharts庫的min版。

然後，我們需要透過JavaScript程式碼來實現圓餅圖。具體的程式碼如下：

var myChart = echarts.init(document.getElementById('myChart'));

var option = {
  title: {
    text: '饼图示例',
    left: 'center'
  },
  tooltip: {},
  legend: {
    data:['数据1', '数据2', '数据3']
  },
  series: [
    {
      name:'数据占比',
      type:'pie',
      radius: '55%',
      center: ['50%', '60%'],
      data:[
        {value:335, name:'数据1'},
        {value:310, name:'数据2'},
        {value:234, name:'数据3'}
      ],
      itemStyle: {
        emphasis: {
          shadowBlur: 10,
          shadowOffsetX: 0,
          shadowColor: 'rgba(0, 0, 0, 0.5)'
        }
      }
    }
  ]
};

myChart.setOption(option);

在上述程式碼中，我們先使用echarts.init()方法來初始化ECharts實例。然後，我們定義了一個JavaScript物件option，該物件定義了圓餅圖中所需的各種屬性和資料。最後，我們使用setOption()方法將這個option物件應用到ECharts實例中，從而產生餅圖。

具體來說，option物件包含了以下幾個屬性：

1. title：用於設定餅圖的標題；
2. tooltip：用於設定滑鼠浮動時的提示訊息；
3. legend：用於設定餅圖中每個扇形區域的標籤；
4. series：用於設定餅圖中具體的資料系列，包括半徑、數據、樣式等。

三、ECharts餅圖的樣式設定

除了基本的資料展示外，ECharts餅圖還提供了多種樣式設定的選項，可以透過修改對應屬性來實現不同樣式的圓餅圖。

1. 內外半徑

透過設定radius屬性來調整圓餅圖的內外半徑，從而控制扇形區域的大小。如下程式碼：

series: [
  {
    type: 'pie',
    radius: ['50%', '70%'],
    data: [
      {value: 335, name: '数据1'},
      {value: 310, name: '数据2'},
      {value: 234, name: '数据3'},
      {value: 135, name: '数据4'},
      {value: 1548, name: '数据5'}
    ]
  }
]

上述程式碼中，radius屬性包含了一個數組，數組中的兩個值分別代表內外半徑的百分比。在此例中，內半徑為50%，外半徑為70%。

2. 圖例位置

透過設定legend屬性中的x、y、orient屬性來調整圖例的位置和方向。如下程式碼：

legend: {
  x: 'left',
  y: 'center',
  orient: 'vertical',
  data: ['数据1', '数据2', '数据3', '数据4', '数据5']
}

上述程式碼中，x屬性設定圖例的水平位置為左側，y屬性設定圖例的垂直位置為中心，orient屬性設定圖例的方向為垂直方向。

3. 陰影效果

透過設定itemStyle屬性中的emphasis屬性，可以為扇形區域添加陰影等效果，從而增強餅圖的視覺效果。如下程式碼：

itemStyle: {
  emphasis: {
    shadowBlur: 10,
    shadowOffsetX: 0,
    shadowColor: 'rgba(0, 0, 0, 0.5)'
  }
}

上述程式碼中，shadowBlur代表陰影的模糊程度，shadowOffsetX和shadowOffsetY代表陰影的水平和垂直偏移量，shadowColor代表陰影的顏色。

四、ECharts餅圖的實例

下面，我們給出一個具體的ECharts餅圖實例，其中包含了以上提到的基礎資料以及樣式設定。程式碼如下：

<style type="text/css">
  #myChart {
    width: 400px;
    height: 400px;
  }
</style>
<div id="myChart"></div>
<script src="echarts.min.js"></script>
<script>
  var myChart = echarts.init(document.getElementById('myChart'));
  var option = {
    title: {
      text: '饼图示例',
      left: 'center'
    },
    tooltip: {
      trigger: 'item',
      formatter: '{a} <br/>{b}: {c} ({d}%)'
    },
    legend: {
      orient: 'vertical',
      left: 10,
      top: 20,
      data:['数据1', '数据2', '数据3', '数据4', '数据5']
    },
    series: [
      {
        name: '访问来源',
        type: 'pie',
        radius: ['40%', '60%'],
        avoidLabelOverlap: false,
        label: {
          show: false,
          position: 'center'
        },
        emphasis: {
          label: {
            show: true,
            fontSize: '30',
            fontWeight: 'bold'
          }
        },
        labelLine: {
          show: false
        },
        data:[
          {value:335, name:'数据1'},
          {value:310, name:'数据2'},
          {value:234, name:'数据3'},
          {value:135, name:'数据4'},
          {value:1548, name:'数据5'}
        ]
      }
    ]
  };
  myChart.setOption(option);
</script>

該圓餅圖包含了以下特點：

1. 新增了圖例，並將圖例位置調整為左上角；
2. #新增了滑鼠懸浮時的提示浮窗，並顯示了佔比百分比；
3. 增加了陰影效果，並設定了滑鼠懸浮時的高亮特效。

以上就是ECharts圓餅圖的基本實作方式和一些樣式設定範例的介紹，希望讀者能夠透過本文對ECharts餅圖有一定的了解，並且能夠在實際開發中正確應用。

以上是ECharts餅圖：如何展示資料佔比的詳細內容。更多資訊請關注PHP中文網其他相關文章！