tsg-web/src/views/rcgl/jdkh/khtj/jgOptions.js

export default function jgOptions(personData) {
    let personObj = {};
    const Xdata = personData.map(item => item.taskName + '考核')
    // 查找所有人员并去重
    const allPerson= personData.map(item => {
    return  item.assessObjects.map(o => o.objectUserName )
    }).flat();
   const Ydata = Array.from(new Set(allPerson));
   
  // 所有人员数据
  const allData = personData.map(item => {
    return item.assessObjects.map(o => {
      return [item.taskName + '考核',o.objectUserName,o.assessScore||0,o.assessLevel]
    })
  }).flat()

  personObj.best = allData.filter(item => item[3] == 1);
  personObj.better = allData.filter(item => item[3] == 2);
  personObj.pass = allData.filter(item => item[3] == 3);
  personObj.nopass = allData.filter(item => item[3] == 4);
    return {
        legend: {
            show: true,
            itemGap:40,
          },
          tooltip: {},
          xAxis: {
            type: 'category',
            axisLabel: {
              interval: Xdata.length > 5 ? 0 : 1, // 强制显示所有标签
              rotate: Xdata.length > 5 ? 20 : 0 // 旋转角度
          },
            data: Xdata
          },
          yAxis: {
        
            type: 'category',
            data: Ydata,
            splitLine: {
              show: false,
              lineStyle: {
                color: '#000'
              }
            }
          },
          series: [
            {
              name: '优秀',
              type: 'scatter',
              symbol: 'rect',
              symbolSize: [(800/Xdata.length), (625/Ydata.length)],
              itemStyle:{
                color:"#91cc75"
              },
              label:{
                show:true,
                formatter: function (params) {
                            return params.value[2]; // 显示数据点的值
                        },
                        offset: [0, 0], // 调整标签位置
                        color: '#000' // 标签颜色
              },
              tooltip:{
                  backgroundColor: "#fff",
                  textStyle: {
                      color:"#000",
                  },
                  formatter: (data) => {
                      return `<div style="padding:5px">
                       <div style="display:flex;column-gap:10px; align-items: center;">
                         <span style="width:10px;height:10px;border-radius:50%;background-color:#91cc75;"></span>
                         <span>${data.value[1]}</span>
                       </div>
                       <div>
                         <span>考核任务：</span>
                         <span>${data.value[0]}</span>
                       </div>
                        <div>
                         <span>考核得分：</span>
                         <span>${data.value[2]}</span>
                       </div>
                        <div>
                         <span>考核等级：</span>
                         <span>${data.seriesName}</span>
                       </div>
                     </div>`
                }
              },
              data: personObj.best
            },
            {
              name: '良好',
              type: 'scatter',
              symbol: 'rect',
              symbolSize: [(800/Xdata.length), (625/Ydata.length)],
              itemStyle:{
                color:"#5470c6"
              },
              label:{
                show:true,
                formatter: function (params) {
                            return params.value[2]; // 显示数据点的值
                        },
                        offset: [0, 0], // 调整标签位置
                        color: '#fff' // 标签颜色
              },
              tooltip:{
                backgroundColor: "#fff",
                textStyle: {
                    color:"#000",
                },
                formatter: (data) => {
                    return `<div style="padding:5px">
                     <div style="display:flex;column-gap:10px; align-items: center;">
                       <span style="width:10px;height:10px;border-radius:50%;background-color:#5470c6;"></span>
                       <span>${data.value[1]}</span>
                     </div>
                     <div>
                       <span>考核任务：</span>
                       <span>${data.value[0]}</span>
                     </div>
                      <div>
                       <span>考核得分：</span>
                       <span>${data.value[2]}</span>
                     </div>
                      <div>
                       <span>考核等级：</span>
                       <span>${data.seriesName}</span>
                     </div>
                   </div>`
              }
            },
              data:personObj.better
            },
            {
                name: '合格',
                type: 'scatter',
                symbol: 'rect',
                symbolSize: [(800/Xdata.length), (625/Ydata.length)],
                itemStyle:{
                  color:"#fac858"
                },
                label:{
                  show:true,
                  formatter: function (params) {
                              return params.value[2]; // 显示数据点的值
                          },
                          offset: [0, 0], // 调整标签位置
                          color: '#000' // 标签颜色
                },
                tooltip:{
                    backgroundColor: "#fff",
                    textStyle: {
                        color:"#000",
                    },
                    formatter: (data) => {
                        return `<div style="padding:5px">
                         <div style="display:flex;column-gap:10px; align-items: center;">
                           <span style="width:10px;height:10px;border-radius:50%;background-color:#fac858;"></span>
                           <span>${data.value[1]}</span>
                         </div>
                         <div>
                           <span>考核任务：</span>
                           <span>${data.value[0]}</span>
                         </div>
                          <div>
                           <span>考核得分：</span>
                           <span>${data.value[2]}</span>
                         </div>
                          <div>
                           <span>考核等级：</span>
                           <span>${data.seriesName}</span>
                         </div>
                       </div>`
                  }
                },
                data: personObj.pass
              },
              {
                name: '不合格',
                type: 'scatter',
                symbol: 'rect',
                symbolSize: [(800/Xdata.length), (625/Ydata.length)],
                itemStyle:{
                  color:"#f07979"
                },
                label:{
                  show:true,
                  formatter: function (params) {
                              return params.value[2]; // 显示数据点的值
                          },
                          offset: [0, 0], // 调整标签位置
                          color: '#000' // 标签颜色
                },
                tooltip:{
                    backgroundColor: "#fff",
                    textStyle: {
                        color:"#000",
                    },
                    formatter: (data) => {
                        return `<div style="padding:5px">
                         <div style="display:flex;column-gap:10px; align-items: center;">
                           <span style="width:10px;height:10px;border-radius:50%;background-color:#f07979;"></span>
                           <span>${data.value[1]}</span>
                         </div>
                         <div>
                           <span>考核任务：</span>
                           <span>${data.value[0]}</span>
                         </div>
                          <div>
                           <span>考核得分：</span>
                           <span>${data.value[2]}</span>
                         </div>
                          <div>
                           <span>考核等级：</span>
                           <span>${data.seriesName}</span>
                         </div>
                       </div>`
                  }
                },
                data: personObj.nopass
              }
          ]
    }
}