ant-design-charts icon indicating copy to clipboard operation
ant-design-charts copied to clipboard

🧐[问题] 多图层图表如何给不同的图表设置legend

Open Shadow77728 opened this issue 6 months ago • 0 comments

💻 示例代码 例如pie和column

const config = { height: 500, padding: 'auto', tooltip: { showMarkers: false, }, plots: [ { type: 'column', region: { start: { x: 0, y: 0.4 }, end: { x: 1, y: 1 } }, options: { data: [ { city: '广州', sales: 1024 }, { city: '杭州', sales: 724 }, { city: '深圳', sales: 1256 }, ], xField: 'city', legend: { // 设置柱状图的图例 position: 'top', marker: { spacing: 8, symbol: 'circle', style: { fill: '#1982ff', stroke: '#1982ff', r: 4, // 半径 }, }, }, yField: 'sales', seriesField: 'city', }, }, { type: 'pie', region: { start: { x: 0.4, y: 0 }, end: { x: 1, y: 0.4 } }, options: { data: [ { city: '广州', sales: 1024 }, { city: '杭州', sales: 724 }, { city: '深圳', sales: 1256 }, ], angleField: 'sales', colorField: 'city', legend: { position: 'top', marker: { spacing: 8, symbol: 'triangle-down', // 自定义图标样式 style: { width: 10, height: 10, fill: "#1982ff", stroke: "#1982ff", }, }, }, label: { type: 'inner', offset: '-30%', content: '{name}', style: { textAlign: 'center', fontSize: 12, fill: '#fff', }, }, radius: 1, innerRadius: 0.6, }, }, ], }; return <Mix {...config} />; };

🚑 只有顶层的legend能设置

Shadow77728 avatar Aug 19 '24 12:08 Shadow77728