//关于这个图表我做的视频简介：https://www.bilibili.com/video/BV1pD4y127tW //各位观众老爷们一键三连，下次一定！ //宅男数量 var nodesnum = 360 //中二病下毒机会 var xiadu = 1 //中二病的传染性，接触就传染的概率 var infectivity = 0.2 //治疗天数 var cureday = 4 //死亡率 var dierate = 0.2 //社区结构大小 var shequsize = 90 //社区内连接强度 var density = 0.35 $(`

点击进行传播

传染性:0.2

潜伏期天数:4

致死率:0.2

估计R0:

`).appendTo( $('#chart-panel') ); $('.input-item').css({ 'position': 'absolute', 'top': '180px', left: '10px', display: '-ms-flexbox', display: 'flex', '-ms-flex-wrap': 'wrap', 'flex-wrap': 'wrap', '-ms-flex-align': 'center', 'align-items': 'center', width: '8rem', height: '2rem', }) $('.chuan').css({ display: '-webkit-box', display: '-ms-flexbox', display: 'flex', '-webkit-box-pack': 'center', '-ms-flex-pack': 'center', 'justify-content': 'center', '-webkit-box-align': 'center', '-ms-flex-align': 'center', 'align-items': 'center', border: '1px solid #ced4da', 'border-radius': '.25rem', 'background-color': '#e9ecef', color: '#495057', 'text-align': 'center', cursor: 'pointer' }) $('.slider').css({ 'position': 'absolute', 'top': '60px', left: '0.5rem', display: '-ms-flexbox', display: 'flex', '-ms-flex-wrap': 'wrap', 'flex-wrap': 'wrap', '-ms-flex-align': 'center', 'align-items': 'center', width: '6rem', height: '2rem', }) $('.text').css({ 'position': 'absolute', 'top': '60px', left: '7rem', display: '-ms-flexbox', display: 'flex', '-ms-flex-wrap': 'wrap', 'flex-wrap': 'wrap', '-ms-flex-align': 'center', 'align-items': 'center', width: '6rem', height: '2rem', }) $('.slidercure').css({ 'position': 'absolute', 'top': '100px', left: '0.5rem', display: '-ms-flexbox', display: 'flex', '-ms-flex-wrap': 'wrap', 'flex-wrap': 'wrap', '-ms-flex-align': 'center', 'align-items': 'center', width: '6rem', height: '2rem', }) $('.textcure').css({ 'position': 'absolute', 'top': '100px', left: '7rem', display: '-ms-flexbox', display: 'flex', '-ms-flex-wrap': 'wrap', 'flex-wrap': 'wrap', '-ms-flex-align': 'center', 'align-items': 'center', width: '10rem', height: '2rem', }) $('.sliderdie').css({ 'position': 'absolute', 'top': '140px', left: '0.5rem', display: '-ms-flexbox', display: 'flex', '-ms-flex-wrap': 'wrap', 'flex-wrap': 'wrap', '-ms-flex-align': 'center', 'align-items': 'center', width: '6rem', height: '2rem', }) $('.textdie').css({ 'position': 'absolute', 'top': '140px', left: '7rem', display: '-ms-flexbox', display: 'flex', '-ms-flex-wrap': 'wrap', 'flex-wrap': 'wrap', '-ms-flex-align': 'center', 'align-items': 'center', width: '10rem', height: '2rem', }) $('.r0').css({ 'position': 'absolute', 'top': '5px', left: '12rem', display: '-ms-flexbox', display: 'flex', '-ms-flex-wrap': 'wrap', 'flex-wrap': 'wrap', '-ms-flex-align': 'center', 'align-items': 'center', width: '10rem', height: '2rem', }) var nodes = [{ name: '0', category: 1 }] var nodeindexes = [] //生成节点 for (var i = 1; i < nodesnum; i++) { nodes.push({ name: i.toString(), category: 1 }) nodeindexes.push(i) } var links = [] //随机生成边 var items = [] function shequ(links, items, nodes, density) { var shequ1size = nodes.length for (var i = 0; i < shequ1size; i++) { for (var j = i; j < shequ1size; j++) { if (Math.random() < density*density * i / shequ1size * j / shequ1size && i != j) { links.push({ source: nodes[i].name, target: nodes[j].name }) items.push(nodes[i].name) items.push(nodes[j].name) } } } return links, items } for (var j = 0; j < nodesnum; j+=shequsize) { var start = Math.max(j-Math.floor(0.1*shequsize),0) var end = Math.min(j+shequsize+Math.floor(0.1*shequsize),nodesnum) var shequ1node = [] for (var i = start; i < end; i++) { shequ1node.push(nodes[i]) } links, items = shequ(links, items, shequ1node, density) } //补充边 for (var i = 0; i < nodesnum; i++) { if (items.indexOf(i.toString()) == -1) { nodeindexes.pop(i) links.push({ source: i, target: nodeindexes[Math.floor(Math.random() * nodeindexes.length)] }) } } //随机下毒一个人 nodes[Math.floor(Math.random()*nodesnum)].category = 0 //估计R0 var r0 = (2*cureday*infectivity*links.length/nodes.length).toFixed(2) $('.r0').text('估计R0:' + r0) $('.slider').change(function() { infectivity = this.value $('.text').text('传染性:' + infectivity) var r0 = (2*cureday*infectivity*links.length/nodes.length).toFixed(2) $('.r0').text('估计R0:' + r0) }) $('.slidercure').change(function() { cureday = this.value $('.textcure').text('潜伏期天数:' + cureday) var r0 = (2*cureday*infectivity*links.length/nodes.length).toFixed(2) $('.r0').text('估计R0:' + r0) }) $('.sliderdie').change(function() { dierate = this.value $('.textdie').text('致死率:' + dierate) var r0 = (2*cureday*infectivity*links.length/nodes.length).toFixed(2) $('.r0').text('估计R0:' + r0) }) //去重函数 function unique(arr) { return Array.from(new Set(arr)) } //病毒数 var viruscount = 1 var viruscounts = [[1, viruscount]] var viruscounts_new = [[1, 0]] var cures = [[1,0]] var dies = [[1,0]] //echarts的基础设置 option = { title: [{ text: '中二病患者数：0', subtext: '你还有' + xiadu + '次下毒机会（点击目标下毒）' }, { text: '说明:\n2020年的某一天\n未知疾病突然出现\n迅速在宅男之间传播\n这一传说中的疾病被命名为:中二病\n每个点表示一个宅男\n点之间的连线代表宅男之间二次元的灵魂交流\n\n参数：\n传染性：每天交流传染中二病的概率\n潜伏期天数：潜伏期内会传染，潜伏期结束后\n隔离治疗，并判断治愈还是死亡\n\n怎么玩:\n你可以前期疯狂传染，后期调整参数防控\n如何控制传播？\n1.减少人与人的接触（图的边密度减少）\n2.戴口罩降低传染性（有交流就传染的概率降低）\n3.早发现早隔离避免潜伏期内传播（潜伏期天数减少）\n\n实现群体免疫：\n在传播到后期大部分人都治愈时（有抗体）再下毒\n虽然传染性强但也传播不开了', textStyle: { fontSize: 12 }, top: 'bottom', left: 'left' } ], grid: [{ gridindex: 1, left: '35%', right: '3%', top: '5%', bottom: '75%', containLabel: true }], xAxis: [{ name: '天', type: 'value', show: true, min: 0, max: 10, gridIndex: 0 }], yAxis: [{ name: '人数', type: 'value', show: true, gridIndex: 0 }], tooltip: {}, animationDurationUpdate: 1500, animationEasingUpdate: 'quinticInOut', legend: [ {data: ['感染者','未感染','治愈','死亡'], orient: 'vertical', x: '0%', y: '220px'}, {data: ['中二病总患者数', '中二病新增患者数','中二病治愈数','中二病死亡数'], x: '70%', y: '0%'} ], series: [{ type: 'graph', name: '宅男', layout: 'force', symbolSize: 12, roam: true, top: '24%', label: { fontSize: 12, show: false }, edgeSymbol: ['circle', 'circle'], edgeSymbolSize: [4, 4], edgeLabel: { fontSize: 10 }, categories: [{ name: '感染者' }, { name: '未感染' }, { name: '治愈' }, { name: '死亡' }], data: nodes, // links: [], links: links, lineStyle: { opacity: 0.9, width: 1.5, curveness: 0 }, draggable: true, force: { repulsion: 20, gravity: 0.12, edgeLength: 1 } }, { xAxisIndex: 0, yAxisIndex: 0, name: '中二病总患者数', type: 'line', showSymbol: false, data: viruscounts, itemStyle: {normal: {color: '#C23531'}} }, { xAxisIndex: 0, yAxisIndex: 0, name: '中二病新增患者数', type: 'line', showSymbol: false, data: viruscounts, itemStyle: {normal: {color: '#2f4554'}} }, { xAxisIndex: 0, yAxisIndex: 0, name: '中二病治愈数', type: 'line', showSymbol: false, data: viruscounts, itemStyle: {normal: {color: '#61A0A8'}} }, { xAxisIndex: 0, yAxisIndex: 0, name: '中二病死亡数', type: 'line', showSymbol: false, data: viruscounts, itemStyle: {normal: {color: '#D48265'}} } ] }; myChart.setOption(option); var t = 1 var score = 0 var gameend = 0 $(".chuan").click(function() { //计算分数 score += parseInt(infectivity*100) //找到红的点 var virusitem = [] for (eachnodeinfo in nodes) { if (nodes[eachnodeinfo].category == 0) { virusitem.push(nodes[eachnodeinfo].name) } } //找到红的点连接的点,新的感染者 var virusitem_new = [] for (linkinfo in links) { //console.log(links[linkinfo].source.toString()) if (virusitem.indexOf(links[linkinfo].source.toString()) != -1) { if (Math.random() < infectivity) { if (nodes[links[linkinfo].target].category==1){ virusitem_new.push(links[linkinfo].target)} } } if (virusitem.indexOf(links[linkinfo].target.toString()) != -1) { if (Math.random() < infectivity) { if (nodes[links[linkinfo].source].category==1){ virusitem_new.push(links[linkinfo].source)} } } } //感染者加入 for (virusitem_new_id in virusitem_new) { virusitem_new_id = virusitem_new[virusitem_new_id] virusitem.push(virusitem_new_id.toString()) } virusitem = unique(virusitem) //更新患者信息 for (nodes_id in nodes) { if (virusitem.indexOf(nodes[nodes_id].name.toString()) != -1) { nodes[nodes_id].category = 0 if (nodes[nodes_id].infecttime){}else{ nodes[nodes_id].infecttime = t} } } //判断治愈情况 for (nodes_id in nodes) { if (t-nodes[nodes_id].infecttime>cureday & nodes[nodes_id].category==0){ if (Math.random() 0) { xiadu -= 1 //找到红的点 var virusitem = [] for (eachnodeinfo in nodes) { if (nodes[eachnodeinfo].category == 0) { virusitem.push(nodes[eachnodeinfo].name) } } //更新点击的点 nodes[p.name].category = 0 //重新计算感染者数量 for (eachnodeinfo in nodes) { if (nodes[eachnodeinfo].category == 0) { virusitem.push(nodes[eachnodeinfo].name) } } //去重 virusitem = unique(virusitem) //更新点 for (nodes_id in nodes) { if (virusitem.indexOf(nodes[nodes_id].name.toString()) != -1) { nodes[nodes_id].category = 0 nodes[nodes_id].infecttime = t } } optionchange = { title: [{ text: '中二病患者数：' + virusitem.length, subtext: '你还有' + xiadu + '次下毒机会（点击目标下毒）' }], xAxis: [{ max: 2 + t }], series: [{ data: nodes }] } myChart.setOption(optionchange); //病毒数 viruscount = virusitem.length } }})

Echarts在线免费图表