const legend1 = "image:///asset/get/s/data-1616488906907-TTcSsT2dL.png"; const legend2 = "image:///asset/get/s/data-1616488914803-Pen9H3XeG.png"; const legend3 = "image:///asset/get/s/data-1616488899626-PSUAyWzyA.png"; const symbol1 = "image:///asset/get/s/data-1616487032064-6FOUWYNk3.png"; const symbol2 = "image:///asset/get/s/data-1616487535227-ELoLLlCbe.png"; const symbol3 = "image:///asset/get/s/data-1616487247546-VOogMaQ_I.png"; const symbol4 = "image:///asset/get/s/data-1616487251844-2-ThXQ4Rw.png"; // tooltip const tooltip = { trigger: 'item', textStyle: { fontSize: '100%'}, // backgroundColor: 'none', formatter: params => { if(params.dataType === "edge") { return `

接触： 2021-01-24

` } switch (params.value.type) { case 0: return `

检测阳性：2021-02-17

出院：2021-03-03

` break; case 1: return `

发病：2021-01-31

确诊：2021-01-31

出院：2021-01-31

` break; default: break; } } } const legend = { show: true, bottom: '5%', right: '2%', textStyle: { color: '#fff' }, itemWidth: 20, itemHeight: 20, orient: 'vertical', data: [ { name: '未感染', icon: legend1 }, { name: '无症状感染', icon: legend2 }, { name: '确诊病例', icon: legend3 }, ] } const series = { type: 'graph', layout: 'none', // 图的布局 symbol: symbol1, // 默认是「未感染」 symbolSize: 90, categories: [ { name: "未感染" }, { name: "无症状感染" }, { name: "确诊病例" }], label: { show: true, align: 'center', textStyle: { fontSize: 12, color: '#fff' }, formatter: params => { return `{a${params.value.type}|密接人数：${params.value.num}}\n\n\n\n\n\n\n${params.name}` }, rich: { a0: { color: '#fff', padding: [4, 5], backgroundColor: 'rgba(255, 86, 76, .45)' }, a1: { color: '#fff', padding: [4, 5], backgroundColor: 'rgba(255, 86, 76, .35)' }, a2: { color: '#fff', padding: [4, 5], backgroundColor: 'rgba(239, 255, 55, .35)' }, a3: { color: '#fff', padding: [4, 5], backgroundColor: 'rgba(50, 233, 255, .35)' }, } }, edgeSymbol: ['circle', 'arrow'], edgeSymbolSize: [4, 8], edgeLabel: { show: true, textStyle: { fontSize: 10 }, formatter: "{c}" }, data: [ { name: '张三三', value: { num: 55, type: 0 }, draggable: true, x: 20, y: 40, symbol: symbol3 }, { name: '赵五', value: { num: 55, type: 1 }, category: 1, draggable: true, x: -20, y: 30, symbol: symbol4 }, { name: '刘六', value: { num: 55, type: 2 }, category: 1, draggable: true, x: -10, y: 50, symbol: symbol2 }, { name: '光头强', value: { num: 55, type: 1 }, category: 1, draggable: true, x: 0, y: 30, symbol: symbol4 }, { name: '熊大', value: { num: 55, type: 2 }, category: 1, draggable: true, x: 36, y: 39, symbol: symbol2 }, { name: '张芳芳', value: { num: 55, type: 3 }, category: 1, draggable: true, x: 10, y: 50 }, { name: '李四1', value: { num: 55, type: 3 }, category: 1, draggable: true, x: 36, y: 25 }, { name: '李四2', value: { num: 55, type: 3 }, category: 1, draggable: true, x: 45, y: 48 }, { name: '李四3', value: { num: 55, type: 3 }, category: 1, draggable: true, x: 35, y: 52 }, { name: '李四4', value: { num: 55, type: 3 }, category: 1, draggable: true, x: 34, y: 62 }, { name: '李四5', value: { num: 55, type: 3 }, category: 1, draggable: true, x: 18, y: 56 }, ], links: [ { source: 1, target: 2, value: '家人1', }, { source: 2, target: 3, value: '家人2', }, { source: 3, target: 0, value: '同事1', }, { source: 0, target: 4, value: '朋友1', }, { source: 0, target: 5, value: '同事2', }, { source: 0, target: 6, value: '朋友2', }, { source: 0, target: 7, value: '家人3', }, { source: 0, target: 8, value: '家人4', }, { source: 0, target: 9, value: '同事4', }, { source: 0, target: 10, value: '同事5', }, ], lineStyle: { opacity: 0.9, width: 1, curveness: 0, color: '#fff' } } option = { tooltip, series, legend, backgroundColor: 'rgba(0,0,0,0.8)' }

Echarts在线免费图表