象形条形图：自定义形状和矢量图形条

在展示那些需要立即视觉关联的分类指标时，象形条形图为标准矩形条提供了一种富有创意且引人入胜的替代方案。通过用自定义矢量图标、SVG路径或重复符号图案替换实心色块，象形条形图将常规的数据摘要转化为视觉上富有描述性的信息图——例如用人物图标表示人口统计数据，用车辆形状表示交通指标，用水果符号表示收获数量。

象形条形图的工作原理

在 Apache ECharts 中，象形条形图使用type: 'pictorialBar'。它们像普通条形图一样在标准的分类轴和数值轴上运行，但会用由symbol属性（如标准形状、图像 URL 或 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: ['团队阿尔法', '团队贝塔', '团队伽马'],
        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设置在活动系列上，以便自定义矢量形状按比例填充。
滚动至顶部