说明

安装

npm install sgraph-report-vue -S

使用

// main.js

import STChart from 'graph-report-vue';

Vue.use(STChart);

JydTargetDetail 敬业度指标明细图 如图

import {JydTargetDetail} from 'graph-report-vue'

<JydTargetDetail :targets="jydTargets"/>

let jydTargets = [{
  name: '共同发展',
  questions: [
      {
          title: '我愿意与公司长期共同发展',
          high: 81.44,
          base: 10,
          low: 8.56,
          average: 50
      },{
          title: '我的工作对实现团队目标非常重要',
          high: 72,
          base: 10,
          low: 18,
          average: 35
      }
  ]
}]

JydSummary 敬业度概览图 如图

import {JydSummary} from 'graph-report-vue'

<JydSummary :employee="summary.employee" :organization="summary.organization" :conclusion="summary.conclusion"/>

let summary = {
    employee: 100,
    organization: 100,
    conclusion: '企业处于最佳地带'
}

GroupPeopleItem 人员分组单个饼图 如图

import {GroupPeopleItem} from 'graph-report-vue'

<GroupPeopleItem :title="item.title" :catalogs="item.catalogs" :serials="item.serials"/>

let item = {
    title: '性别',
    catalogs: ['男', '女', '老', '少'],
    serials: [4, 35, 36, 25]
}

GroupPeople 人员分组四个饼图 如图

import GroupPeople from "./components/GroupPeople";

<GroupPeople :groups="groups"/>

let groups = [
{
 name: '员工性别与学历分布',
 items: [
   {
     title: '性别',
     catalogs: ['男', '女'],
     serials: [45, 55]
   }, {
     title: '最高学历',
     catalogs: ['高中及以下', '大专', '本科', '硕士及以上'],
     serials: [5, 3, 46, 46]
   }
 ]
},{
 name: '员工层级与部门分布',
 items: [
   {
     title: '层级',
     catalogs: ['高层管理', '中层管理', '基层管理', '普通员工'],
     serials: [46, 46, 3, 5]
   }, {
     title: '部门',
     catalogs: ['法务部', '生产部', '人力资源', '财务部'],
     serials: [33, 23, 17, 27]
   }
 ]
}
];

SrlGroupReport 胜任力团队报告指标图表 如图

import SrlGroupReport from "./components/SrlGroupReport";

<SrlGroupReport :targets="srlTargets"/>

let srlTargets = [
 {
     name: '创新能力',
     scores: [50,10,20,0,20], //分值占比 依次为优秀，良好，一般，欠佳，不足
     average: 60
 },{
     name: '动机能力',
     scores: [20,10,20,30,20], //分值占比 依次为优秀，良好，一般，欠佳，不足
     average: 40
 },{
     name: '洞察效能',
     scores: [10,40,50,0,0], //分值占比 依次为优秀，良好，一般，欠佳，不足
     average: 50
 }
]

Zyxq 职业兴趣 如图

import Zyxq from "./components/Zyxq";

<Zyxq :targets="targets"/>

let targets =  [
    {name: '事务型', code: 'C', score: 40},
    {name: '调研型', code: 'I', score: 70},
    {name: '企业型', code: 'E', score: 20},
    {name: '艺术型', code: 'A', score: 50},
    {name: '社会型', code: 'S', score: 80},
    {name: '实际型', code: 'R', score: 60}
]

Zyjzg 职业价值观 如图

import Zyjzg from "./components/Zyjzg";

<Zyjzg :targets="targets"/>

let targets =  [
 {name: '工作待遇', score: 89},
 {name: '学习发展', score: 98},
 {name: '人际关系', score: 93},
 {name: '尊重认可', score: 54},
 {name: '独立自主', score: 62},
 {name: '风险偏好', score: 70}
]

teamRole 团队角色 如图

import TeamRole from "./components/TeamRole";

<TeamRole :targets="targets"/>

let targets = [
    {name: '协调者', score: 50},
    {name: '鞭策者', score: 60},
    {name: '凝聚者', score: 40},
    {name: '智多星', score: 80},
    {name: '智多星', score: 90},
    {name: '评审者', score: 20},
    {name: '执行者', score: 80},
    {name: '完成者', score: 30},
]

Disc DISC报告 如图

import Disc from "./components/Disc";

<Disc :targets="targets"/>

// 即产品结果中的 horizontals的值
let targets = [
    {name: 'D', score: 7},
    {name: 'I', score: 5},
    {name: 'S', score: 6},
    {name: 'C', score: -7}
]

Xwfxfz 行为风险与发展 如图

import Xwfxfz from "./components/Xwfxfz";

<Xwfxfz :targets="targets"/>

// positive: 是否是乐观指标 10个乐观积极指标 8个负面指标 score 为指标9分得分
let targets =  [
    {positive: true, score: 7},
    {positive: true, score: 5},
    {positive: true, score: 3},
    {positive: true, score: 8},
    {positive: true, score: 4},
    {positive: true, score: 5},
    {positive: true, score: 2},
    {positive: true, score: 2},
    {positive: true, score: 1},
    {positive: true, score: 6},
    {positive: false, score: 3},
    {positive: false, score: 8},
    {positive: false, score: 5},
    {positive: false, score: 7},
    {positive: false, score: 4},
    {positive: false, score: 9},
    {positive: false, score: 3},
    {positive: false, score: 1},
]

JxSquared 绩效数据 如图

import JxSquared from "./components/JxSquared";

<JxSquared :data="data"/>

// 一个二位数组 对应九宫格 左上角为0,0 位置九宫格数据如下所示
/* 
*  0,0 0,1 0,2
*  1,0 1,1 1,2
*  2,0 2,1 2,2
/
let data =  [
   [
       [{"name":"张0","depart":"部门00"},{"name":"张0","depart":"部门01"},
       [{"name":"张1","depart":"部门10"},{"name":"张1","depart":"部门11"},{"name":"张1","depart":"部门12"}],
       [{"name":"张2","depart":"部门20"},{"name":"张2","depart":"部门21"},{"name":"张2","depart":"部门22"}],
   ],
   [
       [{"name":"张3","depart":"部门30"},{"name":"张3","depart":"部门31"},{"name":"张3","depart":"部门32"}],
       [{"name":"张4","depart":"部门40"},{"name":"张4","depart":"部门41"},{"name":"张4","depart":"部门42"}],
       [{"name":"张5","depart":"部门50"},{"name":"张5","depart":"部门51"},{"name":"张5","depart":"部门52"}],
   ],
   [
       [{"name":"张6","depart":"部门60"}],
       [{"name":"张7","depart":"部门70"},{"name":"张7","depart":"部门71"}],
       [{"name":"张8","depart":"部门80"},{"name":"张8","depart":"部门81"}]
   ]
]