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

摘要

本文主要对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) {
        return {
          fill: 'red',
        }
      }
      return {
        fill: 'bule',
        fillOpacity: 0.5,
        stroke: 'black',
        lineWidth: 1,
        lineDash: [4, 5],
        strokeOpacity: 0.7,
        shadowColor: 'black',
        shadowBlur: 10,
        shadowOffsetX: 5,
        shadowOffsetY: 5,
        cursor: 'pointer'
      }
    },

    slider: {
      start: 0.1,
      end: 0.2,
    },
  };

打印结果

color属性

{a: '七台河'}

color属性+seriesField属性

{c: 2}

columStyle属性

{a: '七台河'}

columStyle属性+seriesField属性

{a: '七台河', b: 52827.32, c: 2}

3、 组件中使用

<Column {...config} ref={chartRef} />