Open hsp-sz opened 2 months ago
环形图的Label线过于混乱,期望能够有简洁版的Label支持
期望支持配置简单版的Label,在3.x的时候能够画的,5.x画不出来了。 3.x的部分代码片段如下:
methods: { renderChart() { if (!this.chart && !this.props.genderData) return; const data = this.props.genderData.filter( (item) => item?.name !== '未知' || item?.cnt !== '0', ); const newData = sortBy(data || [], (item1: any, item2) => { return order.indexOf(item1?.name) - order.indexOf(item2?.name); }); const map = {}; newData.forEach(function(obj) { map[obj.name] = autoFormatNumber(obj.cnt); }); this.chart.source(newData); this.chart.coord('polar', { transposed: true, innerRadius: 0.6, radius: 1, }); this.chart.axis(false); this.chart.legend(false); this.chart.tooltip(false); this.chart.pieLabel({ sidePadding: 20, anchorOffset: -4, inflectionOffset: 8, anchorStyle: { opacity: 0, }, label1: function label1(data) { return { text: autoFormatRatioToFix2(data.percent), fill: '#333333', fontFamily: 'PingFangSC-Medium', fontWeight: 500, fontSize: 15, }; }, }); this.chart .interval() .position('const*percent') .color('name', ['#368CFF', '#F95777', '#BBBBBB']) .adjust('stack') .style({ lineWidth: 4, stroke: 'white', }); this.chart.render(); }, onInitChart(F2, config) { const chart = new F2.Chart( Object.assign(config, { padding: [36, 0, 0, 0], appendPadding: 0, plugins: PieLabel, }), ); this.chart = chart; this.renderChart(); // 注意:需要把chart return 出来 return chart; }, },
What problem does this feature solve?
环形图的Label线过于混乱,期望能够有简洁版的Label支持
What does the proposed API look like?
期望支持配置简单版的Label,在3.x的时候能够画的,5.x画不出来了。 3.x的部分代码片段如下: