根据上述数据做一个带有四个项目角色的图表。 // jsonHand 中的数据表示人员横坐标表示 // processList 项目名称的数据纵坐标表示

Question

// 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>

效果图为：

求牛人们帮助，谢谢~~

Answer 1

建议换成你另一篇问答的那种采取实现方式，我已发布解答，能运行。如图所示。