摘要

本文主要对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} />