用自定义js作图
用了antv/g2plot
import { Radar } from '@antv/g2plot';
fetch('https://gw.alipayobjects.com/os/antfincdn/svFjSfJkYy/radar.json')
.then((data) => data.json())
.then((data) => {
const radarPlot = new Radar($container, {
data,
xField: 'item',
yField: 'score',
seriesField: 'user',
meta: {
score: {
alias: '分数',
min: 0,
max: 80,
},
},
xAxis: {
line: null,
tickLine: null,
grid: {
line: {
style: {
lineDash: null,
},
},
},
},
yAxis: {
line: null,
tickLine: null,
grid: {
line: {
type: 'line',
style: {
lineDash: null,
},
},
alternateColor: 'rgba(0, 0, 0, 0.04)',
},
},
// 开启面积
area: {},
// 开启辅助点
point: {
size: 2,
},
});
radarPlot.render();
});
示例是这样的 我这边data是有的 [
{
"column1": "指标分类",
"column2": null,
"column3": null
},
{
"column1": "多品化",
"column2": 73.37239708999996,
"column3": 73.37239708999996
},
{
"column1": "回款",
"column2": 508.66103312999974,
"column3": 508.66103312999974
},
{
"column1": "集成烹饪中心完成率",
"column2": 678.67469674,
"column3": 678.67469674
},
{
"column1": "净水机完成率",
"column2": 639.81218514,
"column3": 639.81218514
},
{
"column1": "烹饪机完成率",
"column2": 683.8355367100008,
"column3": 683.8355367100008
},
{
"column1": "热水器完成率",
"column2": 597.5839085800003,
"column3": 597.5839085800003
},
{
"column1": "审核",
"column2": 615.2018985599998,
"column3": 615.2018985599998
},
{
"column1": "洗碗机完成率",
"column2": 623.7891982399999,
"column3": 623.7891982399999
},
{
"column1": "烟机审核核算价",
"column2": 606.9496718299995,
"column3": 606.9496718299995
}
] 怎么替换我的数据进去?
|
