ant-design/charts 使用记录

饼图

• 自定义颜色块

const allConfig = {
  scale: {
    color: {
      range: colors,
    },
  },
};
return <Pie {...allConfig} />;

• 排序

// orderBy变量一般设置为angleField对应变量
const allConfig = {
  transform: [{ type: 'stackY', orderBy: 'value', reverse: true }],
};
return <Pie {...allConfig} />;

设置颜色块并排序后，颜色块不会按照colors数组顺序排列，而是会按照源DATA数据顺序进行排列，此时需要先对源数据进行清洗。

const formattedData = data.sort((a, b) => b[angleField] - a[angleField]);
const allConfig = { 
  transform: [{ type: 'stackY' }], 
  scale: {
    color: {
      range: colors,
    },
  },
  data: formattedData
};
return <Pie {...allConfig} />;

柱状图

• 自定义颜色块

// colors定义为对象，通过key-value形式为每个变量设置颜色
const allConfig = {
  style: { fill: (data, index) => colors[index] },
};
// 如果设置了colorField，可以设置colors数组
const allConfig = { scale: { color: { range: colors } } };

return <Column {...allConfig} />;

• 排序

// 柱状图从大到小排序
const allConfig = { 
  transform: [{ type: 'sortX', by: 'y', reverse: true }],  
}; 
return <Column {...allConfig} />;

• 设置滚动条

const defaultRatio = 0.5;
// 默认显示最大个数
const defaultMaxCount = 10;
const allConfig = {
  axis: {
    x: {
      size: 40,
      transform: [{ type: "ellipsis", minLength: 30 }],
    },
  },
  scrollbar: {
    x: { ratio: Math.min(defaultRatio, defaultMaxCount / data.length) },
  },
}; 
return <Column {...allConfig} />;

• 设置缩略轴

const allConfig = {
  slider: {
    x: {
      showLabel: false,
      values: [0, 0.2],
    }
  },
}; 
return <Column {...allConfig} />;

条形图

• 自定义颜色块

// colors定义为对象，通过key-value形式为每个变量设置颜色
const allConfig = {
  style: { fill: (data, index) => colors[index] },
};
// 如果设置了colorField，可以设置colors数组
const allConfig = { scale: { color: { range: colors } } };

return <Bar {...allConfig} />;