ant-design-charts 对带缩略轴柱状图根据数据自定义列处理，以颜色为例

@秋野

已于 2024-02-24 14:28:22 修改

阅读量1.2k

点赞数 11

分类专栏：前端知识文章标签： javascript 前端 react anti-design-vue

于 2024-02-23 20:23:12 首次发布

本文链接：https://blog.youkuaiyun.com/BGMcat/article/details/136262963

版权

摘要

本文主要对ant-design-charts中带缩略柱状图进行自定义列处理
ant-design-charts版本：1.4.2

1、定义数据

const data1 = [
    {
      "a": "七台河",
      "b": 52827.32,
      'c': 2
    },
    {
      "a": "万县",
      "b": 20000,
      'c': 1
    },
]

2、自定义列

当需要对柱状图的列进行自定义处理时，可以用color属性，style属性，columStyle属性等
通过对每一列对应的数据对象进行分析，来进行自定义处理，但是以上属性只包含x轴，y轴对应的属性

如果需要依赖x轴，y轴对应的属性以外的属性进行判断时，可以用seriesField将该属性加入到数据中，增加属性。

const config = {
    data: data1,
    xField: 'a',
    yField: 'b',
    xAxis: {
      label: {
        autoRotate: false,
      },
    },
	///差异性
    seriesField:'c',
    
    columnStyle: (originData) => {
      console.log(originData);
      if (originData.c > 0) {