VTable icon indicating copy to clipboard operation
VTable copied to clipboard

[Bug] 透视图表为多个颜色图例组,并且位置在顶部或左侧时,图例组会重叠。

Open zzsssssss opened this issue 9 months ago • 0 comments

Version

1.17.3

Link to Minimal Reproduction

https://applink.feishu.cn/client/message/link/open?token=AmU%2FQqHXB0ADZ%2BOZXI2DQAE%3D

Steps to Reproduce

1.复制以下代码,粘贴到官网实例 `VTable.register.chartModule('vchart', VChart); let tableInstance; const option ={ "indicatorsAsCol": false, "records": [ { "col_981": "2020", "col_983": 127412.52000000009, "col_987": "公司" }, { "col_981": "2020", "col_983": 84978.58999999998, "col_987": "小型企业" }, { "col_981": "2020", "col_983": 160620.18999999997, "col_987": "消费者" }, { "col_981": "2021", "col_983": 149120.56000000008, "col_987": "公司" }, { "col_981": "2021", "col_983": 249066.1199999998, "col_987": "消费者" }, { "col_981": "2021", "col_983": 73283.42000000001, "col_987": "小型企业" }, { "col_981": "2022", "col_983": 335807.3000000005, "col_987": "消费者" }, { "col_981": "2022", "col_983": 118795.0200000001, "col_987": "小型企业" }, { "col_981": "2022", "col_983": 167340.70000000004, "col_987": "公司" }, { "col_981": "2023", "col_983": 307599.0799999995, "col_987": "消费者" }, { "col_981": "2023", "col_983": 135421.5200000001, "col_987": "小型企业" }, { "col_981": "2023", "col_983": 238093.91000000024, "col_987": "公司" }, { "col_981": "2020", "col_985": 1545, "col_990": "家具" }, { "col_981": "2020", "col_985": 1314, "col_990": "技术" }, { "col_981": "2020", "col_985": 3851, "col_990": "办公用品" }, { "col_981": "2021", "col_985": 1579, "col_990": "技术" }, { "col_981": "2021", "col_985": 1904, "col_990": "家具" }, { "col_981": "2021", "col_985": 4529, "col_990": "办公用品" }, { "col_981": "2022", "col_985": 2157, "col_990": "技术" }, { "col_981": "2022", "col_985": 2100, "col_990": "家具" }, { "col_981": "2022", "col_985": 5644, "col_990": "办公用品" }, { "col_981": "2023", "col_985": 2942, "col_990": "家具" }, { "col_981": "2023", "col_985": 2592, "col_990": "技术" }, { "col_981": "2023", "col_985": 7377, "col_990": "办公用品" } ], "columns": [], "rows": [], "indicators": [ { "indicatorKey": "col_983", "id": "TJ09eb1a9575674cac82a34b1f094f7c", "title": "利润", "width": 50, "cellType": "chart", "chartModule": "vchart", "disableHeaderHover": true, "chartSpec": { "type": "common", "series": [ { "id": "col_983", "type": "bar", "data": { "id": "col_983" }, "barMinWidth": 1, "barMaxWidth": 30, "barMinHeight": 1, "xField": "col_981", "yField": "col_983", "stack": true, "seriesField": "col_987", "bar": { "state": { "selected_reverse": { "fill": "#ddd", "fillOpacity": 0.2 } }, "style": { "cursor": "pointer", "fill": { "0": "#", "1": "1", "2": "7", "3": "6", "4": "3", "5": "F", "6": "F", "scale": "col_983", "field": "col_987" } } } } ], "axes": [ { "orient": "left", "seriesId": [ "col_983" ], "type": "linear", "label": { "style": {} }, "min": 0, "max": 885449, "grid": {} }, { "orient": "right", "visible": false, "label": { "visible": false, "style": {} }, "min": 0, "max": 885449, "seriesId": [ "col_983" ], "type": "linear", "grid": {} }, { "orient": "bottom", "type": "band", "grid": {} } ], "scales": [ { "id": "col_983", "type": "ordinal", "range": [ "#72ccff", "#76f2f2", "#d2f5a6" ], "domain": [ "公司", "小型企业", "消费者" ] } ], }, }, { "indicatorKey": "col_985", "id": "TJ7510091ab7fe4c86a466ac353b863e", "title": "数量", "width": 50, "cellType": "chart", "chartModule": "vchart", "disableHeaderHover": true, "chartSpec": { "type": "common", "series": [ { "id": "col_985", "type": "bar", "data": { "id": "col_985" }, "barMinWidth": 1, "barMaxWidth": 30, "barMinHeight": 1, "xField": "col_981", "yField": "col_985", "stack": true, "seriesField": "col_990", "bar": { "state": { "selected_reverse": { "fill": "#ddd", "fillOpacity": 0.2 } }, "style": { "cursor": "pointer", "fill": { "0": "#", "1": "1", "2": "7", "3": "6", "4": "3", "5": "F", "6": "F", "scale": "col_985", "field": "col_990" } } } } ], "axes": [ { "orient": "left", "seriesId": [ "col_985" ], "type": "linear", "label": { "style": {} }, "min": 0, "max": 16785, "grid": {} }, { "orient": "right", "visible": false, "label": { "visible": false, "style": {} }, "min": 0, "max": 16785, "seriesId": [ "col_985" ], "type": "linear", "grid": {} }, { "orient": "bottom", "type": "band", "grid": {} } ], "scales": [ { "id": "col_985", "type": "ordinal", "range": [ "#72ccff", "#76f2f2", "#d2f5a6" ], "domain": [ "家具", "技术", "办公用品" ] } ], }, } ], "corner": { "titleOnDimension": "row" }, "widthMode": "autoWidth", "heightMode": "autoHeight", "dataConfig": {}, "defaultRowHeight": 200, "defaultHeaderRowHeight": 50, "defaultColWidth": 280, "defaultHeaderColWidth": 120, "autoFillWidth": true, "autoFillHeight": true, "tooltip": { "confine": false }, "hover": { "disableAxisHover": true }, legends:[{ orient: 'top', position:'start', type: 'discrete', data: [ { label: '消费者', shape: { fill: '#72ccff', symbolType: 'circle' } }, { label: '公司', shape: { fill: '#76f2f2', symbolType: 'square' } }, { label: '小型企业', shape: { fill: '#d2f5a6', symbolType: 'square' } } ] },{ orient: 'top', position:'start', type: 'discrete', data: [ { label: '家具', shape: { fill: '#dd6b66', symbolType: 'circle' } }, { label: '技术', shape: { fill: '#759aa0', symbolType: 'square' } }, { label: '办公用品', shape: { fill: '#e69d87', symbolType: 'square' } } ] }] }

tableInstance = new VTable.PivotChart(document.getElementById(CONTAINER_ID), option);
window.tableInstance = tableInstance;`
  1. 查看效果

Current Behavior

图例重叠

Expected Behavior

图例正常展示

Environment

- OS:windows
- Browser:chrome
- Framework:vue@3

Any additional comments?

No response

zzsssssss avatar Mar 26 '25 06:03 zzsssssss