因为涉及到的软件比较复杂,所以直接贴上了最终录制好的视频。
食品安全数据可视化
下面简单介绍下其中的鱼眼图的制作。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
</head>
<body>
<div id="container"></div>
<script src="https://gw.alipayobjects.com/os/antv/pkg/_antv.g6-3.7.1/dist/g6.min.js"></script>
<script>
let fisheye = new G6.Fisheye({
r: 100,
showLabel: true,
});
const colors = [
'#8FE9FF',
'#87EAEF',
'#FFC9E3',
'#A7C2FF',
'#FFA1E3',
'#FFE269',
'#BFCFEE',
'#FFA0C5',
'#D5FF86',
];
const graphDiv = document.getElementById('container');
const container = document.getElementById('container');
const width = container.scrollWidth || 100;
const height = container.scrollHeight || 550;
const graph = new G6.Graph({
container: 'container',
width,
height,
plugins: [fisheye],
});
fetch('./1.json')
.then((res) => res.json())
.then((data) => {
data.nodes.forEach((node) => {
node.label = node.id;
node.size = Math.random() * 30 + 10;
node.style = {
fill: colors[Math.floor(Math.random() * 9)],
lineWidth: 1,
};
});
graph.data(data);
graph.render();
graph.getNodes().forEach((node) => {
node
.getContainer()
.getChildren()
.forEach((shape) => {
if (shape.get('type') === 'text') shape.hide();
});
});
});
if (typeof window !== 'undefined')
window.onresize = () => {
if (!graph || graph.get('destroyed')) return;
if (!container || !container.scrollWidth || !container.scrollHeight) return;
graph.changeSize(container.scrollWidth, container.scrollHeight);
};
</script>
</body>
</html>
{
"nodes": [
{
"id": "鸡蛋",
"x": 622.22242753596396,
"y": 221.58991461580462
},
{
"id": "糖精",
"x": 565.1218339265034,
"y": 171.59761511302105
},
{
"id": "味精",
"x": 599.78639359854327,
"y": 133.57398015667923
},
{
"id": "豆浆",
"x": 582.69786358028415,
"y": 191.50678051232913
},
{
"id": "鹅肉",
"x": 634.4562033716733,
"y": 148.86340203151713
},
{
"id": "地瓜",
"x": 659.6758601570104,
"y": 158.51932058679517
},
{
"id": "兔肉",
"x": 608.6408107258377,
"y": 80.08978211784734
},
{
"id": "鲤鱼",
"x": 629.1208783621155,
"y": 89.50783923513406
},
{
"id": "菠萝",
"x": 651.31710942912247,
"y": 95.62381874446997
},
{
"id": "螃蟹",
"x": 490.0990966456606,
"y": 153.6649901350214
},
{
"id": "红糖",
"x": 603.2794454950651,
"y": 170.87469919068386
},
{
"id": "茶",
"x": 586.9038607953858,
"y": 94.82364610010669
},
{
"id": "牛奶",
"x": 637.7295856292113,
"y": 187.2760733153313
},
{
"id": "柿子",
"x": 583.8431887426204,
"y": 267.7101161193055
},
{
"id": "大米",
"x": 617.6539018281542,
"y": 300.0586304481375
},
{
"id": "蜂蜜",
"x": 643.4495217104461,
"y": 248.14013534143953
},
{
"id": "杏",
"x": 668.6281356589531,
"y": 263.5847126845181
},
{
"id": "马肉",
"x": 677.3520676841103,
"y": 176.72534157485532
},
{
"id": "苍耳",
"x": 691.75313851634024,
"y": 156.5212161097912
},
{
"id": "红豆",
"x": 534.8199749437348,
"y": 195.99976079362335
},
{
"id": "红枣",
"x": 586.4937544345336,
"y": 227.73420851527578
},
{
"id": "虾皮",
"x": 550.02919011143416,
"y": 231.2513211913802
},
{
"id": "红豆",
"x": 587.02919011143416,
"y": 181.2513211913802
},
{
"id": "羊肝",
"x": 480.02919011143416,
"y": 241.2513211913802
},
{
"id": "羊肚",
"x": 470.02919011143416,
"y": 152.2513211913802
},
{
"id": "盐",
"x": 590.02919011143416,
"y": 151.2513211913802
},
{
"id": "醋",
"x": 580.02919011143416,
"y": 131.2513211913802
},
{
"id": "猪骨汤",
"x": 620.02919011143416,
"y": 121.2513211913802
},
{
"id": "青菜",
"x": 620.02919011143416,
"y": 211.2513211913802
},
{
"id": "海参",
"x": 650.02919011143416,
"y": 231.2513211913802
},
{
"id": "鳗鱼",
"x": 675.4668487891018,
"y": 202.783515421686
},
{
"id": "鳝鱼",
"x": 670.1700307319093,
"y": 139.4810861650384
},
{
"id": "生葱",
"x": 704.6422482933774,
"y": 216.58364918349568
},
{
"id": "虾",
"x": 699.2513775912632,
"y": 183.03026453336724
},
{
"id": "皮蛋",
"x": 700.90996667472837,
"y": 194.79658513642403
},
{
"id": "甜酒",
"x": 719.38361105364334,
"y": 148.69180823448008
},
{
"id": "竹笋",
"x": 675.2946100421193,
"y": 307.66682817782345
},
{
"id": "蛋清",
"x": 560.66757416917164,
"y": 279.0949406815367
},
{
"id": "酒",
"x": 568.68796660221636,
"y": 365.8200533034293
},
{
"id": "鲫鱼",
"x": 534.53762633403787,
"y": 303.08504254821366
},
{
"id": "牛肉",
"x": 604.29126463264043,
"y": 254.05392981470945
},
{
"id": "豆腐",
"x": 650.35613429759803,
"y": 214.42252912270644
},
{
"id": "菠菜",
"x": 737.51920169330805,
"y": 160.14388411785757
},
{
"id": "猪肝",
"x": 750.1406569699257,
"y": 327.7456828911454
},
{
"id": "牛奶",
"x": 766.0856874797108,
"y": 368.0210264990602
},
{
"id": "羊肉",
"x": 693.6973181801981,
"y": 380.40382743216634
},
{
"id": "四环素",
"x": 638.1148595335302,
"y": 286.4434006942807
},
{
"id": "花生",
"x": 577.12320020410266,
"y": 317.4384382481713
},
{
"id": "黄瓜",
"x": 557.52167498720337,
"y": 306.4604520400414
},
{
"id": "小白菜",
"x": 607.71325168392366,
"y": 318.0074114921048
},
{
"id": "开水",
"x": 497.63137784390082,
"y": 325.2999365859076
},
{
"id": "大米",
"x": 594.4105849543593,
"y": 296.53686533697186
},
{
"id": "韭菜",
"x": 636.3436812430268,
"y": 350.8376519695578
},
{
"id": "白糖",
"x": 690.6807729530675,
"y": 322.9175698803163
},
{
"id": "羊肉",
"x": 666.77554563642803,
"y": 445.26666512175433
},
{
"id": "药",
"x": 676.9421415192702,
"y": 371.1750781444891
},
{
"id": "咖啡",
"x": 697.0516872015465,
"y": 416.38478793328625
},
{
"id": "香烟",
"x": 609.0241345496318,
"y": 426.44215271462605
},
{
"id": "黑木耳",
"x": 614.71137563489117,
"y": 456.80172690673896
},
{
"id": "啤酒",
"x": 632.8405296045364,
"y": 435.8881866127797
},
{
"id": "核桃",
"x": 643.1268360879219,
"y": 466.9404473411801
},
{
"id": "巧克力",
"x": 605.84814130923144,
"y": 382.89355947309724
},
{
"id": "果汁",
"x": 671.447442010866,
"y": 415.99688422022257
},
{
"id": "橘子",
"x": 670.72651876919826,
"y": 466.96671298340794
},
{
"id": "香蕉",
"x": 724.04457501182867,
"y": 461.9373924104361
},
{
"id": "生鱼",
"x": 644.1315821958891,
"y": 323.7890765583486
},
{
"id": "酸性饮料",
"x": 667.3969014122835,
"y": 319.2359576043117
},
{
"id": "生姜",
"x": 603.23885194199465,
"y": 347.8041412708572
},
{
"id": "汽水",
"x": 622.6528688110919,
"y": 330.01757397802925
},
{
"id": "烟熏食物",
"x": 606.6921797724685,
"y": 277.05255454452566
},
{
"id": "玉米",
"x": 661.1652068827243,
"y": 387.9769951347244
},
{
"id": "黄豆",
"x": 715.98942162128606,
"y": 432.37341762016945
},
{
"id": "米汤",
"x": 630.44198511493056,
"y": 394.6025799878689
},
{
"id": "钙粉",
"x": 694.43875881505835,
"y": 450.4056149101193
},
{
"id": "萝卜",
"x":700.43875881505835,
"y": 460.4056149101193
},
{
"id": "醋",
"x":710.43875881505835,
"y": 480.4056149101193
}
],
"edges": [
{
"source": "鸡蛋",
"target": "糖精",
"value": 1
},
{
"source": "鸡蛋",
"target": "味精",
"value": 8
},
{
"source": "鸡蛋",
"target": "豆浆",
"value": 10
},
{
"source": "鸡蛋",
"target": "鹅肉",
"value": 6
},
{
"source": "鸡蛋",
"target": "地瓜",
"value": 1
},
{
"source": "鸡蛋",
"target": "兔肉",
"value": 10
},
{
"source": "鸡蛋",
"target": "鲤鱼",
"value": 1
},
{
"source": "鸡蛋",
"target": "菠萝",
"value": 1
},
{
"source": "鸡蛋",
"target": "螃蟹",
"value": 2
},
{
"source": "鸡蛋",
"target": "树薯",
"value": 1
},
{
"source": "鸡蛋",
"target": "红糖",
"value": 1
},
{
"source": "鸡蛋",
"target": "茶",
"value": 3
},
{
"source": "鸡蛋",
"target": "牛奶",
"value": 3
},
{
"source": "鸡蛋",
"target": "柿子",
"value": 5
},
{
"source": "大米",
"target": "蜂蜜",
"value": 1
},
{
"source": "大米",
"target": "杏",
"value": 1
},
{
"source": "大米",
"target": "马肉",
"value": 1
},
{
"source": "大米",
"target": "苍耳",
"value": 1
},
{
"source": "大米",
"target": "红豆",
"value": 4
},
{
"source": "红枣",
"target": "虾皮",
"value": 4
},
{
"source": "红枣",
"target": "鳗鱼",
"value": 4
},
{
"source": "红枣",
"target": "鳝鱼",
"value": 4
},
{
"source": "红枣",
"target": "生葱",
"value": 4
},
{
"source": "红枣",
"target": "虾",
"value": 4
},
{
"source": "豆浆",
"target": "蜂蜜",
"value": 3
},
{
"source": "豆浆",
"target": "Listolier",
"value": 3
},
{
"source": "鸡蛋",
"target": "Fameuil",
"value": 3
},
{
"source": "红糖",
"target": "皮蛋",
"value": 4
},
{
"source": "红糖",
"target": "甜酒",
"value": 3
},
{
"source": "红糖",
"target": "竹笋",
"value": 3
},
{
"source": "红糖",
"target": "豆浆",
"value": 3
},
{
"source": "红糖",
"target": "茶",
"value": 3
},
{
"source": "红糖",
"target": "酒",
"value": 5
},
{
"source": "红糖",
"target": "鲫鱼",
"value": 3
},
{
"source": "红糖",
"target": "虾",
"value": 3
},
{
"source": "红糖",
"target": "牛肉",
"value": 3
},
{
"source": "豆腐",
"target": "蜂蜜",
"value": 3
},
{
"source": "豆腐",
"target": "葱",
"value": 4
},
{
"source": "豆腐",
"target": "菠菜",
"value": 4
},
{
"source": "豆腐",
"target": "牛奶",
"value": 3
},
{
"source": "豆腐",
"target": "猪肝",
"value": 3
},
{
"source": "豆腐",
"target": "羊肉",
"value": 3
},
{
"source": "花生",
"target": "螃蟹",
"value": 3
},
{
"source": "花生",
"target": "黄瓜",
"value": 4
},
{
"source": "花生",
"target": "小白菜",
"value": 4
},
{
"source": "蜂蜜",
"target": "豆腐",
"value": 4
},
{
"source": "蜂蜜",
"target": "大米",
"value": 2
},
{
"source": "蜂蜜",
"target": "韭菜",
"value": 9
},
{
"source": "茶",
"target": "白糖",
"value": 2
},
{
"source": "茶",
"target": "鸡蛋",
"value": 7
},
{
"source": "茶",
"target": "羊肉",
"value": 13
},
{
"source": "牛奶",
"target": "糖",
"value": 1
},
{
"source": "牛奶",
"target": "巧克力",
"value": 12
},
{
"source": "牛奶",
"target": "橘子",
"value": 4
},
{
"source": "牛奶",
"target": "韭菜",
"value": 31
},
{
"source": "牛奶",
"target": "生鱼",
"value": 1
},
{
"source": "牛奶",
"target": "黄豆",
"value": 1
},
{
"source": "牛奶",
"target": "红糖",
"value": 17
},
{
"source": "牛奶",
"target": "米汤",
"value": 5
},
{
"source": "牛奶",
"target": "钙粉",
"value": 5
},
{
"source": "牛奶",
"target": "酸性饮料",
"value": 1
},
{
"source": "牛奶",
"target": "菜花",
"value": 1
},
{
"source": "牛奶",
"target": "菠菜",
"value": 8
},
{
"source": "牛奶",
"target": "萝卜",
"value": 1
},
{
"source": "牛奶",
"target": "醋",
"value": 1
},
{
"source": "咖啡",
"target": "香烟",
"value": 1
},
{
"source": "咖啡",
"target": "黑木耳",
"value": 2
},
{
"source": "酒",
"target": "柿子",
"value": 1
},
{
"source": "酒",
"target": "韭菜",
"value": 2
},
{
"source": "酒",
"target": "茶",
"value": 3
},
{
"source": "酒",
"target": "咖啡",
"value": 2
},
{
"source": "酒",
"target": "核桃",
"value": 1
},
{
"source": "酒",
"target": "汽水",
"value": 1
},
{
"source": "酒",
"target": "生姜",
"value": 2
},
{
"source": "酒",
"target": "牛肉",
"value": 1
},
{
"source": "酒",
"target": "玉米",
"value": 3
},
{
"source": "红豆",
"target": "羊肝",
"value": 2
},
{
"source": "红豆",
"target": "羊肚",
"value": 3
},
{
"source": "红豆",
"target": "盐",
"value": 3
},
{
"source": "醋",
"target": "猪骨汤",
"value": 2
},
{
"source": "醋",
"target": "青菜",
"value": 2
},
{
"source": "醋",
"target": "胡萝卜",
"value": 2
},
{
"source": "醋",
"target": "鳗鱼",
"value": 2
},
{
"source": "醋",
"target": "海参",
"value": 1
}
]
}