ECharts餅圖（環形）：如何展示資料佔比和結構變化

ECharts餅圖（環形）：如何展示資料佔比和結構變化

ECharts是一款基於JavaScript的資料視覺化庫，它提供了多種圖表類型，包括折線圖、長條圖、散點圖、地圖等。其中，圓餅圖是一種常用的圖表類型，可以用來展示資料的佔比和結構變化。本文將介紹如何使用ECharts餅圖來展示資料佔比和結構變化，並提供具體的程式碼範例。

一、數據格式

在使用ECharts餅圖之前，需要準備好數據，並將數據格式轉換為ECharts所需的格式。在圓餅圖中，資料格式通常會採用以下方式：

data:[
  {name:'数据1',value:100},
  {name:'数据2',value:200},
  {name:'数据3',value:300},
  {name:'数据4',value:400}
]

其中，name表示資料的名稱，value表示資料的值。要注意的是，資料中的value值一般是數值型的，如果是字串型的話需要使用parseInt()或parseFloat()來轉換。

二、基本圓餅圖

下方示範如何使用ECharts繪製基本的圓餅圖。首先需要引入ECharts庫和主題，建立一個DOM元素來顯示圖表，並初始化一個ECharts實例。然後，設定餅圖的基本配置，包括標題、圖例、顏色等。最後，將資料傳入到餅圖中進行渲染。

HTML程式碼：

<div id="pie1" style="width: 600px;height:400px;"></div>

JavaScript程式碼：

// 引入ECharts库和主题
<script src="https://cdn.jsdelivr.net/npm/echarts/dist/echarts.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/echarts/dist/theme/macarons.js"></script>

// 创建一个DOM元素用于显示图表
var chart1 = echarts.init(document.getElementById('pie1'),'macarons');

// 设置饼图的基本配置
var option1 = {
  title: {
    text: '基本饼图示例',
    subtext: '数据来自Demo',
    x: 'center'
  },
  tooltip: {
    trigger: 'item',
    formatter: "{a} <br/>{b}: {c} ({d}%)"
  },
  legend: {
    orient: 'vertical',
    left: 'left',
    data:['数据1','数据2','数据3','数据4']
  },
  series: [
    {
      name:'饼图',
      type:'pie',
      radius: ['50%', '70%'],
      avoidLabelOverlap: false,
      label: {
        normal: {
          show: false,
          position: 'center'
        },
        emphasis: {
          show: true,
          textStyle: {
            fontSize: '30',
            fontWeight: 'bold'
          }
        }
      },
      labelLine: {
        normal: {
          show: false
        }
      },
      data:[
        {value:100, name:'数据1'},
        {value:200, name:'数据2'},
        {value:300, name:'数据3'},
        {value:400, name:'数据4'}
      ],
      itemStyle: {
        emphasis: {
          shadowBlur: 10,
          shadowOffsetX: 0,
          shadowColor: 'rgba(0, 0, 0, 0.5)'
        }
      }
    }
  ]
};

// 将数据传入到饼图中进行渲染
chart1.setOption(option1);

上面的程式碼中，設定了圖表標題、資料提示、圖例、圓餅圖半徑、資料等。此圓餅圖的效果如下圖：

#三、環形餅圖

環形餅圖是基本餅圖的一種變體，它可以將餅圖中心部分挖空，形成一個環形的圖形。在ECharts中，可以設定餅圖的innerRadius屬性來實現此效果。下面的範例展示如何使用ECharts繪製環形餅圖。

HTML程式碼：

<div id="pie2" style="width: 600px;height:400px;"></div>

JavaScript程式碼：

// 创建一个DOM元素用于显示图表
var chart2 = echarts.init(document.getElementById('pie2'),'macarons');

// 设置饼图的基本配置
var option2 = {
  title: {
    text: '环形饼图示例',
    subtext: '数据来自Demo',
    x: 'center'
  },
  tooltip: {
    trigger: 'item',
    formatter: "{a} <br/>{b}: {c} ({d}%)"
  },
  legend: {
    orient: 'vertical',
    left: 'left',
    data:['数据1','数据2','数据3','数据4']
  },
  series: [
    {
      name:'饼图',
      type:'pie',
      radius: ['50%', '70%'],
      avoidLabelOverlap: false,
      label: {
        normal: {
          show: false,
          position: 'center'
        },
        emphasis: {
          show: true,
          textStyle: {
            fontSize: '30',
            fontWeight: 'bold'
          }
        }
      },
      labelLine: {
        normal: {
          show: false
        }
      },
      data:[
        {value:100, name:'数据1'},
        {value:200, name:'数据2'},
        {value:300, name:'数据3'},
        {value:400, name:'数据4'}
      ],
      itemStyle: {
        emphasis: {
          shadowBlur: 10,
          shadowOffsetX: 0,
          shadowColor: 'rgba(0, 0, 0, 0.5)'
        }
      },
      // 设置内半径
      innerRadius:'50%'
    }
  ]
};

// 将数据传入到饼图中进行渲染
chart2.setOption(option2);

上述程式碼與基本餅圖的程式碼幾乎相同，只是在series中設定了innerRadius屬性。此環形餅圖的效果如下圖所示：

四、資料結構變化

圓餅圖除了可以展示資料的佔比，還可以用來展示資料結構的變化。在ECharts中，可以透過資料的修改和重新渲染來實現這一效果。下面的範例示範如何在圓餅圖中對資料進行操作，完成資料結構變化的效果展示。

HTML程式碼：

<div id="pie3" style="width: 600px;height:400px;"></div>

JavaScript程式碼：

// 数据源
var data1 = [
  {value:100, name:'数据1'},
  {value:200, name:'数据2'},
  {value:300, name:'数据3'},
  {value:400, name:'数据4'}
];
var data2 = [
  {value:450, name:'数据5'},
  {value:250, name:'数据6'},
  {value:200, name:'数据7'},
  {value:150, name:'数据8'}
];

// 创建一个DOM元素用于显示图表
var chart3 = echarts.init(document.getElementById('pie3'),'macarons');

// 设置饼图的基本配置
var option3 = {
  title: {
    text: '数据结构变化示例',
    subtext: '数据来自Demo',
    x: 'center'
  },
  tooltip: {
    trigger: 'item',
    formatter: "{a} <br/>{b}: {c} ({d}%)"
  },
  legend: {
    orient: 'vertical',
    left: 'left',
    data:['数据1','数据2','数据3','数据4']
  },
  series: [
    {
      name:'饼图',
      type:'pie',
      radius: ['50%', '70%'],
      avoidLabelOverlap: false,
      label: {
        normal: {
          show: false,
          position: 'center'
        },
        emphasis: {
          show: true,
          textStyle: {
            fontSize: '30',
            fontWeight: 'bold'
          }
        }
      },
      labelLine: {
        normal: {
          show: false
        }
      },
      data:data1,
      itemStyle: {
        emphasis: {
          shadowBlur: 10,
          shadowOffsetX: 0,
          shadowColor: 'rgba(0, 0, 0, 0.5)'
        }
      },
      innerRadius:'50%'
    }
  ]
};

// 将数据1传入到饼图中进行渲染
chart3.setOption(option3);

// 点击事件
chart3.on('click', function (params) {
  // alert(params.name);
  if(params.name=='数据1'){
    option3.legend.data = ['数据5','数据6','数据7','数据8'];
    option3.series[0].data = data2;
  }else{
    option3.legend.data = ['数据1','数据2','数据3','数据4'];
    option3.series[0].data = data1;
  }
  chart3.setOption(option3);
});

在上述程式碼中，我們定義了兩個資料來源data1和data2，它們分別表示兩個不同的資料結構。在圓餅圖中設定了一個點擊事件，當點擊圓餅圖時，會根據點擊的資料名稱進行判斷，如果點擊的是data1中的資料1，則將legend和series中的資料修改為data2資料結構，否則將其修改為data1資料結構。最後，呼叫setOption()方法將修改後的圖表重新渲染。此資料結構變化的效果如下圖所示：

#綜上，本文介紹如何使用ECharts繪製圓餅圖，並提供了具體的程式碼範例。除了基本圓餅圖和環形餅圖之外，還示範如何在圓餅圖中對資料進行操作，完成資料結構變化的效果展示。讀者可以根據自己的需求和資料格式，進行相應的修改和最佳化。

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