Open mengpangyu opened 3 years ago
import F2 from '@antv/f2'; const data = [{"fanAreaValue":24,"fanAreaValueDesc":"24.00%","fanAreaDesc":"IT、互联网","const":"const"},{"fanAreaValue":10,"fanAreaValueDesc":"10.00%","fanAreaDesc":"公务员","const":"const"},{"fanAreaValue":11,"fanAreaValueDesc":"11.00%","fanAreaDesc":"医护人员","const":"const"},{"fanAreaValue":3,"fanAreaValueDesc":"3.00%","fanAreaDesc":"外卖员","const":"const"},{"fanAreaValue":7,"fanAreaValueDesc":"7.00%","fanAreaDesc":"学生","const":"const"},{"fanAreaValue":1,"fanAreaValueDesc":"1.00%","fanAreaDesc":"房产中介","const":"const"},{"fanAreaValue":5,"fanAreaValueDesc":"5.00%","fanAreaDesc":"教育科研","const":"const"},{"fanAreaValue":2,"fanAreaValueDesc":"2.00%","fanAreaDesc":"服务人员","const":"const"},{"fanAreaValue":15,"fanAreaValueDesc":"15.00%","fanAreaDesc":"网约车司机","const":"const"},{"fanAreaValue":1,"fanAreaValueDesc":"1.00%","fanAreaDesc":"自媒体从业人员","const":"const"},{"fanAreaValue":7,"fanAreaValueDesc":"7.00%","fanAreaDesc":"蓝领工人","const":"const"},{"fanAreaValue":2,"fanAreaValueDesc":"2.00%","fanAreaDesc":"设计师","const":"const"},{"fanAreaValue":11,"fanAreaValueDesc":"11.00%","fanAreaDesc":"货运司机","const":"const"}] const chart = new F2.Chart({ id: 'container', pixelRatio: window.devicePixelRatio }); chart.source(data); chart.coord('polar', { transposed: true, radius: 0.9, innerRadius: 0.5 }); chart.axis(false); chart.legend(false); chart.tooltip(false); chart.guide() .html({ position: [ '50%', '50%' ], html: '<div style="text-align: center;width:150px;height: 50px;">\n <p style="font-size: 12px;color: #999;margin: 0" id="title"></p>\n <p style="font-size: 18px;color: #343434;margin: 0;font-weight: bold;" id="money"></p>\n </div>' }); chart.interval() .position('const*fanAreaValue') .adjust('stack') .color('fanAreaDesc', [ '#1890FF', '#13C2C2', '#2FC25B', '#FACC14' ]); chart.pieLabel({ sidePadding: 30, activeShape: true, label1: function label1(data) { return { text: data.fanAreaValueDesc, fill: '#343434', fontWeight: 'bold' }; }, label2: function label2(data) { return { text: data.fanAreaDesc, fill: '#999' }; }, onClick: function onClick(ev) { const data = ev.data; if (data) { $('#title').text(data.type); $('#money').text(data.money); } } }); chart.render();
根据官网例子改写数据后, 显示出bug
这个是因为容器高度问题, 如果数据过多, 会展示不开, 调整高度便可以完全展示
没发现线方向有问题吗..我的也会
没发现线方向有问题吗..我的也会
方向是图表内部判断的吧, 我没发现什么问题
根据官网例子改写数据后, 显示出bug