缺陷诊断echarts graph配置项内容和展示
配置项如下
var nodes = [
{
x: 20,
y: 800,
nodeName: '历史缺陷报告数据',
svgPath:
'M375.712 636v247.984h-148.8V636h148.8z m-99.2 198.384h49.6V685.6h-49.6v148.784zM586.48 512v371.984h-148.8V512h148.8z m-99.2 322.384h49.6V561.6h-49.6v272.784zM797.264 388v495.984h-148.8V388h148.8z m-99.2 446.384h49.6V437.6h-49.6v396.784z m196.8 173.6H129.296c-54.56 0-99.2-44.64-99.2-99.2V164.816c0-81.84 114.96-148.8 196.8-148.8h545.568a24.784 24.784 0 1 1 0 49.6H226.896c-56.944 0-150.832 48.224-146.976 105.984 3.52 52.672 97.696 92.4 150.48 92.4h542.064a24.8 24.8 0 1 1 0 49.6H226.896c-38.08 0-120.8-14.608-147.2-38.352v633.536a49.6 49.6 0 0 0 49.6 49.6h765.568a49.6 49.6 0 0 0 49.6-49.6V239.2a49.6 49.6 0 0 0-49.6-49.584H235.568c-11.6 0-20.944-8.864-22.432-20.384l-0.064-0.496c-1.984-15.136 9.216-28.72 24.48-28.72h657.312c54.576 0 99.2 44.64 99.2 99.184v669.584c0 54.56-44.64 99.2-99.2 99.2z',
symbolSize: 20,
},
{
x: 20,
y: 600,
nodeName: '历史缺陷记录数据',
svgPath:
'M810.666667 85.333333a42.666667 42.666667 0 0 1 42.666666 42.666667v299.221333h-64V149.333333H234.666667v725.866667h235.562666v64H213.333333a42.666667 42.666667 0 0 1-42.666666-42.666667V128a42.666667 42.666667 0 0 1 42.666666-42.666667h597.333334z m19.370666 407.061334a21.333333 21.333333 0 0 1 30.165334 0l98.069333 98.069333a21.333333 21.333333 0 0 1 0 30.165333L661.589333 917.290667l-121.429333 17.344a21.333333 21.333333 0 0 1-24.128-24.106667l17.344-121.450667z m15.082667 60.352L583.68 814.208l-8.810667 61.610667 61.610667-8.810667L897.92 605.546667l-52.8-52.8zM512 597.333333a21.333333 21.333333 0 0 1 21.333333 21.333334v21.333333a21.333333 21.333333 0 0 1-21.333333 21.333333h-192a21.333333 21.333333 0 0 1-21.333333-21.333333v-21.333333a21.333333 21.333333 0 0 1 21.333333-21.333334z m192-170.666666a21.333333 21.333333 0 0 1 21.333333 21.333333v21.333333a21.333333 21.333333 0 0 1-21.333333 21.333334H320a21.333333 21.333333 0 0 1-21.333333-21.333334v-21.333333a21.333333 21.333333 0 0 1 21.333333-21.333333z m0-170.666667a21.333333 21.333333 0 0 1 21.333333 21.333333v21.333334a21.333333 21.333333 0 0 1-21.333333 21.333333H320a21.333333 21.333333 0 0 1-21.333333-21.333333v-21.333334a21.333333 21.333333 0 0 1 21.333333-21.333333z',
symbolSize: 20,
},
{
x: 20,
y: 400,
nodeName: '历史设备运行数据',
svgPath:
'M562.752 544H512.32a32 32 0 1 1 0-64h50.432l-41.28-41.28a32 32 0 1 1 45.12-45.44l96 96a32 32 0 0 1 0 45.12l-96 96a32 32 0 0 1-45.12-45.12l41.28-41.28zM384 544a32 32 0 1 1 0-64 32 32 0 0 1 0 64z m-150.912 40a288.096 288.096 0 0 0 557.824 0 32 32 0 1 0-61.952-16 224.096 224.096 0 0 1-433.92 0 32 32 0 0 0-61.952 16z m0.32 1.184a32 32 0 1 0 61.312-18.368 32 32 0 0 0-61.312 18.368zM295.04 456a224.096 224.096 0 0 1 433.92 0 32 32 0 0 0 61.952-15.936 288.096 288.096 0 0 0-557.824 0 32 32 0 0 0 61.952 15.936z m-0.064 0.288a32 32 0 1 0-61.824-16.512 32 32 0 0 0 61.824 16.512z',
symbolSize: 20,
},
{
x: 20,
y: 200,
nodeName: '历史设备在线监测数据',
svgPath:
'M950.857143 877.714286a73.142857 73.142857 0 0 1 0 146.285714H73.142857a73.142857 73.142857 0 0 1 0-146.285714h877.714286z m0-877.714286a73.142857 73.142857 0 0 1 73.142857 73.142857v585.142857a73.142857 73.142857 0 0 1-73.142857 73.142857H73.142857a73.142857 73.142857 0 0 1-73.142857-73.142857V73.142857a73.142857 73.142857 0 0 1 73.142857-73.142857h877.714286zM426.276571 162.377143L254.610286 422.180571l-109.202286 0.512 0.585143 146.285715 187.538286-0.877715 116.443428-176.201142 177.517714 176.128 249.197715 2.121142 1.243428-146.285714-189.659428-1.609143L426.276571 162.377143z',
symbolSize: 20,
},{
x: 20,
y: 200,
nodeName: '历史设备在线监测数据',
svgPath:
'M950.857143 877.714286a73.142857 73.142857 0 0 1 0 146.285714H73.142857a73.142857 73.142857 0 0 1 0-146.285714h877.714286z m0-877.714286a73.142857 73.142857 0 0 1 73.142857 73.142857v585.142857a73.142857 73.142857 0 0 1-73.142857 73.142857H73.142857a73.142857 73.142857 0 0 1-73.142857-73.142857V73.142857a73.142857 73.142857 0 0 1 73.142857-73.142857h877.714286zM426.276571 162.377143L254.610286 422.180571l-109.202286 0.512 0.585143 146.285715 187.538286-0.877715 116.443428-176.201142 177.517714 176.128 249.197715 2.121142 1.243428-146.285714-189.659428-1.609143L426.276571 162.377143z',
symbolSize: 20,
},
{
x: 300,
y: 500,
nodeName: '数据清洗结果',
svgPath:
'M765.5 215.5c0-9.9-6.6-18.1-14.8-18.1H650c-8.1 0-14.8 8.1-14.8 18.1v175.2h130.3V215.5zM678 743V599.7l-42.8-42.8v251.6c0 9.9 6.6 18.1 14.8 18.1h100.8c5.3 0 10-3.5 12.6-8.7l-79.4-63c-3-3-6-6-6-11.9zM407.6 197.5H306.8c-8.1 0-14.8 8.1-14.8 18.1v593c0 9.9 6.6 18.1 14.8 18.1h100.8c8.1 0 14.8-8.1 14.8-18.1v-593c-0.1-10-6.7-18.1-14.8-18.1zM537.7 459.4c-6-6-9-14.9-9-26.9 0-1.6 0.1-3.2 0.3-4.8h-53.7c-6.5 0-11.8 6.5-11.8 14.4v370.1c0 7.9 5.3 14.4 11.8 14.4h106.8c6.5 0 11.8-6.5 11.8-14.4V515.6l-53.2-53.2-3-3zM241.4 572.4H129.8c-5.2 0-9.4 5.2-9.4 11.5v231.2c0 6.3 4.2 11.5 9.4 11.5h111.6c5.2 0 9.4-5.2 9.4-11.5V583.9c-0.1-6.3-4.3-11.5-9.4-11.5z',
symbolSize: 20,
},
{
x: 600,
y: 500,
nodeName: '数据标注结果',
svgPath:
'M304.576 672.32h49.024a13.664 13.664 0 0 0 13.536-11.552l6.528-41.184a13.664 13.664 0 0 1 13.568-11.584h35.04c6.784 0 12.544 4.896 13.568 11.552l6.496 41.12a13.6 13.6 0 0 0 13.536 11.552h50.56c8.736 0 15.36-8.128 13.376-16.672l-66.304-296.992a13.664 13.664 0 0 0-13.376-10.688H372.8a13.824 13.824 0 0 0-13.408 10.592L291.2 655.488a13.728 13.728 0 0 0 13.376 16.832z m80.128-138.944l5.088-33.888c2.304-15.68 24.928-15.488 27.168 0.16l4.704 33.856a13.696 13.696 0 0 1-13.536 15.584h-9.76a13.76 13.76 0 0 1-13.664-15.712z m169.984 138.944h56.32c3.2 0 5.696-2.56 5.696-5.696 0-5.056 5.888-7.456 9.632-4a69.952 69.952 0 0 0 18.176 12.192 63.232 63.232 0 0 0 24.864 5.856c17.248 0 32.128-6.976 44.8-20.736s19.008-30.016 19.008-48.48v-113.44c0-24-5.632-42.592-17.024-55.808-11.392-13.12-25.216-19.712-41.408-19.712-5.248 0-10.72 0.768-16.576 2.208a76.8 76.8 0 0 0-17.504 7.04c-3.328 1.952-6.72 4.128-10.24 6.592a87.968 87.968 0 0 0-10.176 8.064v-97.28a5.632 5.632 0 0 0-5.632-5.632H554.88c-3.2 0-5.664 2.56-5.664 5.632v317.44c-0.288 3.264 2.272 5.76 5.472 5.76z m65.408-164.192c0-7.456 1.984-13.44 5.856-18.016a23.68 23.68 0 0 1 13.088-8.288h2.4c0.672 0 1.312 0.064 2.016 0.256a10.112 10.112 0 0 0 2.368 0.256c3.872 1.28 7.552 4.032 11.008 8.288 3.424 4.224 5.12 10.016 5.12 17.568v86.208c0 9.504-1.792 16.704-5.44 21.952-3.552 5.248-7.424 8.384-11.616 9.312h-2.432a10.464 10.464 0 0 1-2.208-0.32 11.136 11.136 0 0 0-2.208-0.256c-4.576-1.632-8.64-5.12-12.448-10.464-3.744-5.408-5.568-12.032-5.568-20.224v-86.336l0.064 0.064z M872 128H152a23.936 23.936 0 0 0-24 24v720c0 13.312 10.688 24 24 24h720c13.312 0 24-10.688 24-24V152a23.936 23.936 0 0 0-24-24zM864 842.016a21.92 21.92 0 0 1-21.984 21.984H182.016A21.92 21.92 0 0 1 160 842.016V182.016C160 169.824 169.824 160 182.016 160h660c12.16 0 21.984 9.824 21.984 22.016v660z',
symbolSize: 20,
},
{
x: 900,
y: 500,
nodeName: '缺陷案例库',
svgPath:
'M778.656 96a64 64 0 0 1 59.072 39.36L992 505.6V864a64 64 0 0 1-64 64H96a64 64 0 0 1-64-64V505.6L186.24 135.36A64 64 0 0 1 245.376 96zM96 864h832l-0.032-320h-226.688l-0.512 3.264a192.064 192.064 0 0 1-181.568 156.608L512 704a192.064 192.064 0 0 1-188.768-156.736L322.688 544H95.968L96 864zM778.656 160H245.344L112 480H384v32a128 128 0 0 0 255.84 6.4L640 512v-32h271.968L778.656 160zM704 352a32 32 0 0 1 0 64H320a32 32 0 0 1 0-64h384z m-64-128a32 32 0 0 1 0 64h-256a32 32 0 0 1 0-64h256z',
symbolSize: 20,
},
{
x: 210,
y: 560,
nodeName: '数据清洗',
svgPath: '',
symbolSize: 20,
},
{
x: 460,
y: 560,
nodeName: '数据标注',
svgPath: '',
symbolSize: 20,
},
{
x: 760,
y: 560,
nodeName: 'TF-IDF文本相似度分析',
svgPath: '',
symbolSize: 20,
},
];
var charts = {
nodes: [],
linesData: [
{
coords: [
[20, 800],
[150, 800],
[150, 500],
[300, 500],
],
},
{
coords: [
[20, 600],
[150, 600],
],
},
{
coords: [
[20, 400],
[150, 400],
[150, 500],
],
},
{
coords: [
[20, 200],
[150, 200],
[150, 400],
],
},
{
coords: [
[300, 500],
[600, 500],
],
},
{
coords: [
[600, 500],
[900, 500],
],
},
],
};
for (var j = 0; j < nodes.length; j++) {
const { x, y, nodeName, svgPath, symbolSize } = nodes[j];
var node = {
nodeName,
value: [x, y],
symbolSize: symbolSize || 50,
symbol: 'path://' + svgPath,
itemStyle: {
color: '#4BE2AC',
},
};
charts.nodes.push(node);
}
option = {
xAxis: {
min: 0,
max: 1000,
show: false,
type: 'value',
},
yAxis: {
min: 0,
max: 1000,
show: false,
type: 'value',
},
series: [
{
type: 'graph',
coordinateSystem: 'cartesian2d',
label: {
show: true,
position: 'bottom',
color: 'orange',
formatter: function (item) {
return item.data.nodeName;
},
},
data: charts.nodes,
},
{
type: 'lines',
polyline: true,
coordinateSystem: 'cartesian2d',
lineStyle: {
type: 'dashed',
width: 2,
color: '#175064',
curveness: 0.3,
},
effect: {
show: true,
trailLength: 0.1,
symbol: 'arrow',
color: 'orange',
symbolSize: 8,
},
data: charts.linesData,
},
],
};
截图如下
