效果图
wid记录页面宽度，均分各节点位置
categories记录category值 对应样式
let wid = (this.$refs["echart"].clientWidth || 1200) - 200;
this.echart = this.$echarts.init(this.$refs["echart"]);
let dataList = [
[
{
name: "工序1",
category: 1
},
{
name: "工序2",
category: 1
},
{
name: "工序3",
category: 0
},
{
name: "工序4",
category: 0
},
{
name: "工序5",
category: 0
},
{
name: "工序6",
category: 0
},
{
name: "工序7",
category: 0
},
{
name: "工序8",
category: 0
},
{
name: "工序9",
category: 0
},
{
name: "工序10",
category: 0
}
],
[
{
name: "工人自检1",
category: 0
},
{
name: "工人自检2",
category: 0
},
{
name: "工人自检3",
category: 0
},
{
name: "工人自检4",
category: 0
},
{
name: "工人自检5",
category: 0
},
{
name: "工人自检6",
category: 0
},
{
name: "工人自检7",
category: 1
},
{
name: "工人自检8",
category: 1
},
{
name: "工人自检9",
category: 0
},
{
name: "工人自检10",
category: 0
}
],
[
{
name: "班长检1",
category: 0
},
{
name: "班长检2",
category: 0
},
{
name: "班长检3",
category: 0
},
{
name: "班长检4",
category: 1
},
{
name: "班长检5",
category: 0
},
{
name: "班长检6",
category: 0
},
{
name: "班长检7",
category: 0
},
{
name: "班长检8",
category: 0
},
{
name: "班长检9",
category: 0
},
{
name: "班长检10",
category: 0
}
],
[
{
name: "出厂检",
category: 0
}
],
[
{
name: "入库检",
category: 0
}
]
];
let dataLink = [];
let dataInfo = [];
let len = dataList[0].length;
dataList.map((item, num) => {
item.map((temp, index) => {
let value = [];
if (temp.name.includes("工序")) {
value = [0, index * 50];
} else if (temp.name.includes("工人")) {
value = [wid / 4 + 50, index * 50];
} else if (temp.name.includes("班长")) {
value = [(wid * 2) / 4 + 50, index * 50];
} else if (temp.name.includes("出厂")) {
value = [(wid * 3) / 4 + 50, len * 25];
} else if (temp.name.includes("入库")) {
value = [(wid * 4) / 4 + 50, len * 25];
}
dataInfo.push({
name: temp.name,
category: temp.category,
symbolSize: [num === 0 ? 150 : num === 1 ? 60 : 50, 30],
value: value
});
let target = "";
switch (num) {
case 0:
target = `工人自检${index + 1}`;
break;
case 1:
target = `班长检${index + 1}`;
break;
case 2:
target = `出厂检`;
break;
case 3:
target = `入库检`;
break;
default:
break;
}
dataLink.push({
source: temp.name,
value: "",
target: target
});
});
});
let option = {
grid: {
top: 20,
bottom: 50
},
itemStyle: {
normal: {
color: "#000"
},
shadowBlur: 3
},
xAxis: {
show: false,
type: "value"
},
yAxis: {
show: false,
type: "value"
},
series: [
{
type: "graph",
coordinateSystem: "cartesian2d",
edgeSymbol: ["none", "arrow"],
edgeSymbolSize: [4, 10],
symbol: "rect",
symbolOffset: [8, 0],
edgeLabel: {
show: false,
normal: {
show: true,
position: "middle",
textStyle: {
fontSize: 12
},
formatter: "{c}"
}
},
categories: [
{
itemStyle: {
normal: {
color: "#f4f4f4"
}
}
},
{
itemStyle: {
normal: {
color: "#47f172"
}
}
}
],
label: {
normal: {
position: "inside",
show: true,
textStyle: {
color: "#333",
fontSize: 12,
padding: [0, 55]
},
formatter: parmas => {
if (parmas.name.includes("工人自检")) {
return "工人自检";
} else if (parmas.name.includes("班长检")) {
return "班长检";
}
return parmas.name;
}
}
},
force: {
repulsion: 10,
initLayout: "circular"
},
lineStyle: {
normal: {
opacity: 1,
width: 1,
curveness: 0
}
},
data: dataInfo,
links: dataLink,
emphasis: {
blurScope: "coordinateSystem"
}
}
]
};
this.echart.setOption(option);
this.echart.on("click", param => {
console.log("param: ", param);
});
文章链接
您阅读本篇文章共花了：
发表评论