如何在ECharts中使用漏斗玫瑰圖展示資料佔比與轉換率-js教程-PHP中文網

如何在ECharts中使用漏斗玫瑰圖展示資料佔比與轉換率

王林

發布： 2023-12-18 08:10:10

原創

1346 人瀏覽過

如何在ECharts中使用漏斗玫瑰圖展示資料佔比與轉換率

如何在ECharts中使用漏斗玫瑰圖展示資料佔比和轉換率

概述：
漏斗玫瑰圖是一種常用的資料視覺化圖表，它能夠清晰地展示數據的佔比和轉換率。在ECharts中，我們可以透過簡單的資料處理和配置，輕鬆實現漏斗玫瑰圖的展示效果。本文將介紹如何使用ECharts中的漏斗玫瑰圖來展示資料佔比和轉換率，並提供對應的程式碼範例。

步驟一：準備資料
首先，我們要準備好要展示的資料。假設我們有以下資料：

var data = [
  { value: 100, name: '阶段1' },
  { value: 80, name: '阶段2' },
  { value: 60, name: '阶段3' },
  { value: 40, name: '阶段4' },
  { value: 20, name: '阶段5' }
];

登入後複製

其中，value表示各個階段的資料量，name表示各個階段的名稱。

步驟二：設定圖表
接下來，我們需要設定漏斗玫瑰圖的樣式和屬性。以下是一個簡單的設定範例：

var option = {
  series: [
    {
      name: '漏斗玫瑰图',
      type: 'pie',
      radius: ['40%', '55%'],
      center: ['50%', '50%'],
      roseType: 'radius',
      label: {
        show: false
      },
      emphasis: {
        label: {
          show: true
        }
      },
      data: data
    }
  ]
};

登入後複製

設定中的關鍵點包括：

type指定圖表類型為'pie'，即圓餅圖。
radius設定圓餅圖的內外半徑，這裡使用一個陣列表示。 ['40%', '55%']表示內半徑為40%，外半徑為55%。
center設定圓餅圖的中心點位置，這裡使用一個陣列表示。 ['50%', '50%']表示在畫布的中心位置。
roseType設定餅圖的類型為'radius'，表示漏斗玫瑰圖。
data設定餅圖的資料來源，這裡使用上述準備好的資料。

步驟三：繪製圖表
最後，我們需要透過ECharts實例來繪製圖表。在HTML頁面中，我們建立一個包含以下程式碼的script標籤：

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

登入後複製

上述程式碼中，我們使用document.getElementById('chart')方法取得到HTML頁面中用於展示圖表的容器div，並將其傳遞給echarts.init()方法，建立一個ECharts實例。然後，我們呼叫setOption()方法，為實例設定配置項。

綜上所述，我們經過以上三個步驟，就能夠在ECharts中使用漏斗玫瑰圖展示資料的佔比與轉換率了。完整的程式碼如下所示：

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title>漏斗玫瑰图</title>
    <script src="https://cdn.jsdelivr.net/npm/echarts@5.2.0/dist/echarts.min.js"></script>
  </head>
  <body>
    <div id="chart" style="width: 600px; height: 400px;"></div>

    <script>
      var data = [
        { value: 100, name: '阶段1' },
        { value: 80, name: '阶段2' },
        { value: 60, name: '阶段3' },
        { value: 40, name: '阶段4' },
        { value: 20, name: '阶段5' }
      ];

      var option = {
        series: [
          {
            name: '漏斗玫瑰图',
            type: 'pie',
            radius: ['40%', '55%'],
            center: ['50%', '50%'],
            roseType: 'radius',
            label: {
              show: false
            },
            emphasis: {
              label: {
                show: true
              }
            },
            data: data
          }
        ]
      };

      var myChart = echarts.init(document.getElementById('chart'));
      myChart.setOption(option);
    </script>
  </body>
</html>

登入後複製

透過上述程式碼，在瀏覽器中執行HTML頁面，就能夠看到一個名為「漏斗玫瑰圖」的圖表，展示了資料的佔比和轉換率。

結論：
本文介紹如何在ECharts中使用漏斗玫瑰圖展示資料的佔比與轉換率。透過簡單的資料處理和配置，我們能夠輕鬆地實現漏斗玫瑰圖的展示效果。希望讀者能夠透過本文，了解到基本的ECharts使用技巧，並在實際的資料視覺化專案中得到應用和拓展。

以上是如何在ECharts中使用漏斗玫瑰圖展示資料佔比與轉換率的詳細內容。更多資訊請關注PHP中文網其他相關文章！