圖示條形圖：自訂形狀與向量圖形條形

當呈現需要立即視覺關聯的分類指標時，圖示條形圖提供了一種創意且引人入勝的替代方案，取代標準的矩形條形。透過以自訂向量圖示、SVG 路徑或重複符號模式取代實心色塊，圖示條形圖能將一般的資料摘要轉化為視覺描述性圖表例如以人形圖示表示人口統計、車輛形狀表示交通指標，或以水果符號表示收成數量。

圖示條形圖的運作原理

在 Apache ECharts 中，圖示條形圖使用type: 'pictorialBar'。它們與一般條形圖一樣，運作於標準的類別與數值軸上，但會以由symbol屬性（例如標準形狀、圖片網址或 SVG 路徑字串）所定義的可自訂圖形來取代矩形條形。

1. 基本設定

要建立多系列圖示條形圖，需設定類別與數值軸，定義type: 'pictorialBar'於各系列中，並直接在data陣列中自訂個別點的符號：

ECharts


在 VPasCode 中編輯 ECharts
ECharts Edit ECharts in VPasCode 
option = {
  title: {
    text: "農夫市場收成",
    left: 'center'
  },
  legend: {
    data: ['春季', '夏季'],
    top: '8%'
  },
  tooltip: {
    trigger: 'axis',
    axisPointer: {
      type: 'shadow'
    }
  },
  grid: {
    containLabel: true,
    top: '18%',
    left: 20
  },
  yAxis: {
    data: ['蘋果', '橙子', '香蕉', '葡萄', '草莓'],
    inverse: true,
    axisLine: { show: false },
    axisTick: { show: false },
    axisLabel: {
      margin: 30,
      fontSize: 14
    }
  },
  xAxis: {
    splitLine: { show: false },
    axisLabel: { show: false },
    axisTick: { show: false },
    axisLine: { show: false }
  },
  series: [
    {
      name: '春季',
      type: 'pictorialBar',
      symbolRepeat: true,
      symbolSize: ['80%', '60%'],
      barCategoryGap: '40%',
      data: [
        { value: 320, symbol: 'circle' },
        { value: 180, symbol: 'rect' },
        { value: 410, symbol: 'diamond' },
        { value: 95, symbol: 'triangle' },
        { value: 240, symbol: 'roundRect' }
      ]
    },
    {
      name: '夏季',
      type: 'pictorialBar',
      barGap: '10%',
      symbolRepeat: true,
      symbolSize: ['80%', '60%'],
      data: [
        { value: 290, symbol: 'circle' },
        { value: 210, symbol: 'rect' },
        { value: 520, symbol: 'diamond' },
        { value: 130, symbol: 'triangle' },
        { value: 310, symbol: 'roundRect' }
      ]
    }
  ]
};
Edit ECharts in VPasCode



在 VPasCode 中編輯 ECharts

 

進階結構技術

圖示條形圖可依序重複圖示以建立基於單位的圖表計數，或使用剪裁路徑來創造填滿程度的視覺化效果。

1. 單系列單位計數模式

啟用symbolRepeat: true於單一數值軸上啟用，以呈現水平的單位基礎符號堆疊：

ECharts


在 VPasCode 中編輯 ECharts
ECharts Edit ECharts in VPasCode 
option = {
    tooltip: {
        trigger: 'axis'
    },
    xAxis: {
        type: 'value',
        max: 10,
        splitLine: { show: false }
    },
    yAxis: {
        type: 'category',
        data: ['團隊 Alpha', '團隊 Beta', '團隊 Gamma'],
        axisLine: { show: false },
        axisTick: { show: false }
    },
    series: [
        {
            type: 'pictorialBar',
            symbol: 'roundRect',
            symbolRepeat: true,
            symbolSize: [12, 30],
            symbolMargin: 4,
            data: [8, 5, 9],
            itemStyle: {
                color: '#91cc75'
            }
        }
    ]
};
Edit ECharts in VPasCode



在 VPasCode 中編輯 ECharts

 

微調佈局與自訂 SVG 形狀

使用自訂的向量 SVG 路徑字串，可讓您直接在圖表系列中渲染客製化圖示。

1. 自訂向量路徑與背景疊加

提供自訂的 SVG 路徑字串至symbol並在下方疊加全尺寸的背景圖形，以建立進度條樣式的儀表板：

ECharts


在 VPasCode 中編輯 ECharts
ECharts Edit ECharts in VPasCode 
const pathBattery = 'path://M16 4h-2V2a1 1 0 0 0-1-1H11a1 1 0 0 0-1 1v2H8a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h8a2 2 0 0 0 2-2V6a2 2 0 0 0-2-2z';

option = {
    title: {
        text: '裝置電池電量',
        left: 'center'
    },
    tooltip: {
        trigger: 'axis',
        axisPointer: { type: 'none' }
    },
    grid: {
        top: '20%',
        bottom: '15%',
        left: '10%',
        right: '10%'
    },
    xAxis: {
        type: 'category',
        data: ['節點 A', '節點 B', '節點 C', '節點 D'],
        axisLine: { show: false },
        axisTick: { show: false }
    },
    yAxis: {
        type: 'value',
        max: 100,
        show: false
    },
    series: [
        {
            name: '電池外殼',
            type: 'pictorialBar',
            symbol: pathBattery,
            symbolSize: ['60%', '100%'],
            symbolPosition: 'start',
            symbolBoundingData: 100,
            symbolClip: false,
            itemStyle: {
                color: '#e2e8f0' // 空的背景外殼
            },
            data: [100, 100, 100, 100],
            z: 1
        },
        {
            name: '充電等級',
            type: 'pictorialBar',
            symbol: pathBattery,
            symbolSize: ['60%', '100%'],
            symbolPosition: 'start',
            symbolBoundingData: 100,
            symbolClip: true, // 按值比例填充
            label: {
                show: true,
                position: 'top',
                formatter: '{c}%',
                fontSize: 14,
                fontWeight: 'bold',
                color: '#333'
            },
            itemStyle: {
                color: '#22c55e' // 活躍充電的綠色填充
            },
            data: [85, 45, 92, 20],
            z: 2
        }
    ]
};
Edit ECharts in VPasCode



在 VPasCode 中編輯 ECharts

 

戰略性最佳實務

  • 為不同類別的項目分配個別圖示： 傳遞個別symbol定義於資料物件內（例如，{ value: 320, symbol: 'circle' }）以視覺方式區分資料列，而不僅僅依賴顏色。
  • 保持圖示隱喻直覺化：選擇與資料主題直接相符的符號（例如，人口統計資料使用人物輪廓，電力指標使用電池圖示），以使視覺內容立即可讀。
  • 使用symbolClip: true作為填滿指示器： 在顯示百分比指標且背景完整時，設定symbolClip: true於活躍系列上，使自訂向量形狀能按比例填滿。
返回頂端