// planProcessIntentionListByProcess中的intentionManager(组长) intentionMembers(组员)intentionReviewer(主审) 没有的话(无角色)
// jsonHand 中的数据表示人员横坐标表示
// processList 项目名称的数据纵坐标表示
其中回显意向点的数据与 选择项目组长,项目组员,项目主审操作按钮无关联,选择 按钮是独立功能
let intentionHandlerList = {
"jsonHand": [
{
"name": "宋会",
"oa": "SH"
},
{
"name": "李高",
"oa": "LIGAO"
},
{
"name": "王小明",
"oa": "WANGXIAOMING"
}
],
"processList": [
{
"processId": 289,
"processName": "33333333333"
},
{
"processId": 288,
"processName": "2222222222222"
},
{
"processId": 287,
"processName": "项目11111111"
}
]
}
let planProcessIntentionListByProcess = [
{
"id": 28,
"intentionManager": "WANGXIAOMING",
"intentionMembers": "",
"intentionReviewer": "",
"planProcessId": 289
},
{
"id": 29,
"intentionManager": "",
"intentionMembers": "WANGXIAOMING",
"intentionReviewer": "",
"planProcessId": 288
},
{
"id": 30,
"intentionManager": "",
"intentionMembers": "",
"intentionReviewer": "WANGXIAOMING",
"planProcessId": 287
},
{
"id": 31,
"intentionManager": "",
"intentionMembers": "LIGAO",
"intentionReviewer": "",
"planProcessId": 289
},
{
"id": 32,
"intentionManager": "",
"intentionMembers": "LIGAO",
"intentionReviewer": "",
"planProcessId": 288
},
{
"id": 33,
"intentionManager": "",
"intentionMembers": "LIGAO",
"intentionReviewer": "",
"planProcessId": 287
},
{
"id": 34,
"intentionManager": "",
"intentionMembers": "",
"intentionReviewer": "SH",
"planProcessId": 289
},
{
"id": 35,
"intentionManager": "",
"intentionMembers": "SH",
"intentionReviewer": "",
"planProcessId": 288
},
{
"id": 36,
"intentionManager": "SH",
"intentionMembers": "",
"intentionReviewer": "",
"planProcessId": 287
}
]
根据上述数据做一个带有四个项目角色的意向图,如上图所示,然后每个白点的时候允许勾选项目组长或项目组员或者项目主审,只能单选,选完后无需屏蔽,写一个demo。猿友们支援,解决后,提供绿泡泡后会有红包感谢~
个人暂时实现代码:
<template>
<div style="width: 800px; height: 800px" class="scatter-chart"></div>
</template>
<script>
import * as echarts from "echarts";
import { Scatter } from "echarts";
// import { intentionHandlerList, planProcessIntentionListByProcess } from './data'
export default {
mounted() {
const chart = echarts.init(document.querySelector(".scatter-chart"));
let intentionHandlerList = {
jsonHand: [
{ name: "宋会", oa: "SH" },
{ name: "李高", oa: "LIGAO" },
{ name: "王小明", oa: "WANGXIAOMING" },
],
processList: [
{ processId: 289, processName: "33333333333" },
{ processId: 288, processName: "2222222222222" },
{ processId: 287, processName: "项目11111111" },
],
};
let planProcessIntentionListByProcess = [
{
id: 28,
intentionManager: "WANGXIAOMING",
intentionMembers: "",
intentionReviewer: "",
planProcessId: 289,
},
{
id: 29,
intentionManager: "",
intentionMembers: "WANGXIAOMING",
intentionReviewer: "",
planProcessId: 288,
},
{
id: 30,
intentionManager: "",
intentionMembers: "",
intentionReviewer: "WANGXIAOMING",
planProcessId: 287,
},
{
id: 31,
intentionManager: "",
intentionMembers: "LIGAO",
intentionReviewer: "",
planProcessId: 289,
},
{
id: 32,
intentionManager: "",
intentionMembers: "LIGAO",
intentionReviewer: "",
planProcessId: 288,
},
{
id: 33,
intentionManager: "",
intentionMembers: "LIGAO",
intentionReviewer: "",
planProcessId: 287,
},
{
id: 34,
intentionManager: "",
intentionMembers: "",
intentionReviewer: "SH",
planProcessId: 289,
},
{
id: 35,
intentionManager: "",
intentionMembers: "SH",
intentionReviewer: "",
planProcessId: 288,
},
{
id: 36,
intentionManager: "SH",
intentionMembers: "",
intentionReviewer: "",
planProcessId: 287,
},
];
const data = [];
const colors = ["#ffffff", "#ff0000", "#0000ff", "#ffa500"];
const roles = ["", "项目组长", "项目组员", "项目主审"];
planProcessIntentionListByProcess.forEach((item) => {
console.log(item, "item");
const x = intentionHandlerList.jsonHand.findIndex(
(handler) => handler.oa === item.intentionManager
);
const y = planProcessIntentionListByProcess.findIndex(
(process) => process.planProcessId === item.planProcessId
);
const role = item.intentionManager
? 1
: item.intentionMembers
? 2
: item.intentionReviewer
? 3
: 0;
data.push({
name:
item.intentionManager ||
item.intentionMembers ||
item.intentionReviewer,
value: [x, y],
itemStyle: {
color: colors[role],
},
label: {
show: true,
formatter: roles[role],
},
});
});
const option = {
xAxis: {
type: "category",
data: intentionHandlerList.jsonHand.map((handler) => handler.name),
axisLabel: {
interval: 0,
rotate: 45,
},
},
yAxis: {
type: "category",
data: intentionHandlerList.processList.map(
(process) => process.processName
),
axisLabel: {
interval: 0,
},
},
series: [
{
type: "scatter",
data: data,
symbolSize: 20,
},
],
};
chart.setOption(option);
},
};
</script>
效果图为:
求牛人们帮助,谢谢~~