JSFiddle - React, Tailwind, and code Playground
by gnijuohz
HTML
<script src="https://cdnjs.cloudflare.com/ajax/libs/echarts/4.0.2/echarts.js"></script>
<div id="chart">
</div>
CSS
#chart {
width: 800px;
height: 600px;
}
JavaScript
const sampleData = [{
threat: 'cpro.baidustatic.com',
level: 'Critical',
category: 'Malicious Websites',
logs: [{
"traffic_out": 15504,
"devtype": "Router/NAT Device",
"srcip_hostname": "",
"incidents": 29,
"f_user": "",
"threat_pass": 0,
"bandwidth": 99783,
"dev_src": "172.16.79.209",
"threat_block": 2320,
"unauthuser": "",
"traffic_in": 84279,
"srcintf": "79-software-m",
"appid": "",
"srcip": "172.16.79.209",
"fctuid": "",
"incident_block": 29,
"threatweight": 2320,
"incident_pass": 0
}, {
"traffic_out": 3924,
"devtype": "Windows PC",
"srcip_hostname": "",
"incidents": 14,
"f_user": "lyang",
"threat_pass": 0,
"bandwidth": 28583,
"dev_src": "lyang-PC",
"threat_block": 1120,
"unauthuser": "lyang",
"traffic_in": 24659,
"srcintf": "78-cc",
"appid": "",
"srcip": "172.16.78.179",
"fctuid": "F6B96B5627264FE58FDA54972C6B2EA9",
"incident_block": 14,
"threatweight": 1120,
"incident_pass": 0
}, {
"traffic_out": 2812,
"devtype": "Windows PC",
"srcip_hostname": "",
"incidents": 12,
"f_user": "jyang",
"threat_pass": 0,
"bandwidth": 23930,
"dev_src": "VAN-200314-PC",
"threat_block": 960,
"unauthuser": "jyang",
"traffic_in": 21118,
"srcintf": "832-FMG-FAZ",
"appid": "",
"srcip": "172.18.32.10",
"fctuid": "6A63D52CF9B14E25891447961D6181B3",
"incident_block": 12,
"threatweight": 960,
"incident_pass": 0
}, {
"traffic_out": 2367,
"devtype": "Linux PC",
"srcip_hostname": "",
"incidents": 3,
"f_user": "",
"threat_pass": 0,
"bandwidth": 16263,
"dev_src": "ubuntu",
"threat_block": 240,
"unauthuser": "",
"traffic_in": 13896,
"srcintf": "68-soft-url",
"appid": "",
"srcip": "172.16.68.190",
"fctuid": "",
"incident_block": 3,
"threatweight": 240,
"incident_pass": 0
}, {
"traffic_out":...