如何自定义图例的图像和颜色？

Question

类似于（https://www.visactor.io/vchart/demo/pie-chart/basic-pie）的饼图可以具有可自定义的图例图标、颜色和内容吗？如何进行定制？

这是我的规格，我想将图例项目设置为某些图像，我该怎么做：

const spec = {
  type: 'pie',
  data: [
    {
      id: 'id0',
      values: [
        { type: 'oxygen', value: '46.60' },
        { type: 'silicon', value: '27.72' },
      ]
    }
  ],
  outerRadius: 0.8,
  valueField: 'value',
  categoryField: 'type',
  title: {
    visible: true,
    text: 'Statistics of Surface Element Content'
  },
  legends: {
    visible: true,
    orient: 'left'
  },
  label: {
    visible: true
  }
};

Answer 1

解决方案

图例是图表中常用的组件，很多类型的图表都支持图例的显示和配置。在 VChart 中： - 使用 legend.item 配置为所有图例项设置统一样式。 - 使用legend.data回调函数为每个图例项设置不同的内容和样式。

代码示例

• 使用

  legend.item

  配置为所有图例项设置统一的样式。

const spec = {
  type: 'pie',
  data: [
    {
      id: 'id0',
      values: [
        { type: 'oxygen', value: '46.60' },
        { type: 'silicon', value: '27.72' },
        { type: 'aluminum', value: '8.13' },
        { type: 'iron', value: '5' },
        { type: 'calcium', value: '3.63' },
        { type: 'sodium', value: '2.83' },
        { type: 'potassium', value: '2.59' },
        { type: 'others', value: '3.5' }
      ]
    }
  ],
  outerRadius: 0.8,
  valueField: 'value',
  categoryField: 'type',
  title: {
    visible: true,
    text: 'Statistics of Surface Element Content'
  },
  legends: {
    visible: true,
    orient: 'left',
    item: {
      width: '15%',
      shape: {
        style: {
          background: 'https://lf9-dp-fe-cms-tos.byteorg.com/obj/bit-cloud/log.jpeg',
          symbolType: 'rect',
          fill: false
        }
      },
      label: {
        style: {fontSize: 14, fontWeight: 'bold' }
      },
      value: {
        alignRight: true,
        style: {
          fill: '#333',
          fillOpacity: 0.8,
          fontSize: 10
        },
        state: {
          unselected: {
            fill: '#d8d8d8'
          }
        }
      }
    }
  },
  label: {
    visible: true
  },
  tooltip: {
    mark: {
      content: [
        {
          key: datum => datum['type'],
          value: datum => datum['value'] + '%'
        }
      ]
    }
  }
};

• 通过

  legend.data配置

  回调函数来为每个图例项设置不同的内容
• 使用

  legend.data

  回调函数为每个图例项设置不同的内容。

const values = [
  { type: 'oxygen', value: '46.60' },
  { type: 'silicon', value: '27.72' },
  { type: 'aluminum', value: '8.13' },
  { type: 'iron', value: '5' },
  { type: 'calcium', value: '3.63' },
  { type: 'sodium', value: '2.83' },
  { type: 'potassium', value: '2.59' },
  { type: 'others', value: '3.5' }
];
const spec = {
  type: 'pie',
  data: [
    {
      id: 'id0',
      values, 
    }
  ],
  outerRadius: 0.8,
  valueField: 'value',
  categoryField: 'type',
  title: {
    visible: true,
    text: 'Statistics of Surface Element Content'
  },
  legends: {
    visible: true,
    orient: 'left',
    data: (items, scale,c, d) => {
      console.log(items, scale, c, d);
      return items.map(item => {
        item.value = values.find(entry => entry.type === item.label).value;
        item.shape.symbolType = 'rect';
        item.shape.background = 'https://lf9-dp-fe-cms-tos.byteorg.com/obj/bit-cloud/log.jpeg';
        item.shape.fill = false;
        return item;
      });
    },
    item: {
      width: '15%',
      label: {
        style: { 
          fontSize: 14, 
          fontWeight: 'bold'
        }
      },
      value: {
        alignRight: true,
        style: {
          fill: '#333',
          fillOpacity: 0.8,
          fontSize: 10
        },
        state: {
          unselected: {
            fill: '#d8d8d8'
          }
        }
      }
    }
  },
  label: {
    visible: true
  },
  tooltip: {
    mark: {
      content: [
        {
          key: datum => datum['type'],
          value: datum => datum['value'] + '%'
        }
      ]
    }
  }
};

结果

在线演示：https://codesandbox.io/s/pie-chart-legend-2kzv8w

相关文档

图例选项：https://www.visactor.io/vchart/option/pieChart-legends-discrete#type

图例教程：https://www.visactor.io/vchart/guide/tutorial_docs/Chart_Concepts/Legend

github：https://github.com/VisActor/VChart