echarts树图_echarts树图itemstyle

helper.js

import moreIcon from '@/assets/org/icon_more.png'
import personIcon from '@/assets/org/icon_person.png'
import orgIcon from '@/assets/org/icon_org.png'
//创建echarts 配置
export function createTreeOption(params) {
  const option = {
    tooltip: {
      trigger: 'item',
      triggerOn: 'none',//不触发
      height: '350px',
      enterable: true,//鼠标是否可进入提示框浮层中
      confine: true//是否将tooltip框限制在图表的区域内
    },
    series: {
      name: '树图',
      type: 'tree',
      orient: 'vertical', // vertical horizontal
      borderColor: 'black',
      edgeShape: 'polyline',//折线
      top: '10%',
      bottom: '10%',
      left: '0px',
      right: '0px',
      expandAndCollapse: false,//点击展开折叠
      itemStyle: {
        color: '#fff' // 节点背景色
      },
      label: {
        show: true,
        backgroundColor: '#fff',
        borderColor: '#333',
        borderWidth: 1,
        borderRadius: 5,
        distance: 100,
        color: '#000',
        fontSize: 14,
        rich: {//自定义label节点内容样式
          titleBg: {
            // 标题背景
            backgroundColor: '#16bc83',
            height: 30,
            align: 'right',
            borderRadius: [5, 5, 0, 0],
            width: '100%'
          },
          titleStyle: {
            // 标题
            align: 'left',
            color: '#eee',
            padding: [0, 4, 0, 4]
          },
          titleIcon: {
            // 标题图标
            height: 25,
            align: 'right',
            backgroundColor: {
              image: orgIcon
            }
          },
          staffIcon: {
            // 员工图标
            height: 25,
            align: 'right',
            verticalAlign: 'center',
            backgroundColor: {
              image: personIcon
            }
          },
          manageStaffName: {
            // 负责人样式
            align: 'center',
            color: '#16bc83',
            verticalAlign: 'center',
            padding: 10
          },
          centerBg: {
            height: 50,
            align: 'right',
            padding: [0, 20, 0, 0], // 上右下左
            width: '100%'
          },
          moreIcon: {
            // 更多图标
            height: 25,
            align: 'left',
            verticalAlign: 'center',
            backgroundColor: {
              image: moreIcon
            }
          },
          compileTitleStyle: {
            // 编制样式
            align: 'left',
            color: '#333',
            padding: [10, 0, 3, 3]
          },
          compileStyle: {
            // 编制样式
            align: 'left',
            color: '#333',
            padding: [10, 3, 3, 1]
          },
          unequal: {
            color: '#f00',
            align: 'left',
            padding: [10, 3, 3, 1]
          }
        }
      }
    }
  }
  option.series.data = [createNode(params)]
  return option
}
//创建树图label内容节点
export function createNode({
  orgId,
  orgName,
  manageStaffName,
  compileNum,
  onJobNum,
  children
}) {
  const node = {
    value: orgId,
    name: orgName,
    label: {
      formatter: function() {//自定义布局
        var arr = []
        arr.push(`{titleIcon|}{titleStyle|${orgName}}{titleBg|}`)
        arr.push(
          `    {staffIcon|}{manageStaffName|${
            manageStaffName || ''
          }}{moreIcon|}{centerBg|}`
        )
        arr.push(
          `{compileTitleStyle|编制:}{${
            onJobNum !== compileNum ? 'unequal' : 'compileStyle'
          }| ${onJobNum}/${compileNum}}`
        )
        return arr.join('\n')
      }
    }
  }
  if (children) {
    node.children = []
    children.forEach(item => {
      node.children.push(createNode(item))
    })
  }
  return node
}

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153

vue文件

<template>
  <div class="page">
    <div class="page-title">组织架构图</div>
    <div class="btn-box">
      <el-button
        size="mini"
        type="primary"
        @click="print"
      >打印</el-button>
    </div>
    <el-divider />
    <div class="canvas">
      <div
        id="infoTable"
        style="width: 0px;height: 0px;"
      >
        <div class="table-title">
          {{ nodeOrgName }}
        </div>
        <el-table
          ref="refTable"
          v-loading="loadingCompile"
          border
          style="maxWidth:600px;"
          max-height="300px"
          :data="tableData"
          :cell-style="cellStyle"
          header-row-class-name="table-list-header"
          row-key="orgId"
        >
          <el-table-column
            min-width="180"
            align="center"
            prop="postName"
            label="职位"
          />
          <el-table-column
            min-width="120"
            align="center"
            prop="compileNum"
            label="编制数"
          />
          <el-table-column
            min-width="120"
            align="center"
            prop="onJobNum"
            label="在职数"
          />
          <el-table-column
            min-width="120"
            align="center"
            :formatter="computdiff"
            label="差异"
          />
        </el-table>
      </div>
      <div id="diagram" /><!-- 内容画布 -->
    </div>
  </div>
</template>

<script>
import * as echarts from 'echarts/core'
import { TreeChart } from 'echarts/charts'
import { createTreeOption } from './helper'
import { TooltipComponent } from 'echarts/components'
import { CanvasRenderer } from 'echarts/renderers'
import { getOrgTreeById } from '@/api/org/info'
import { getByOrgId } from '@/api/org/compile'
import { printDom } from '@/utils/index'
export default {
  name: 'OrgArchitecture',
  data() {
    return {
      nodeOrgName: '',
      orgId: '',
      currentId: '',
      tableData: [],
      currentOrgTree: [],
      rotateNum: 0,
      myChart: null
    }
  },
  created() {
    this.orgId = this.$route.query.orgId
    echarts.use([
      TreeChart,
      TooltipComponent,
      CanvasRenderer
    ])
    this.createDiagram()
  },
  beforeDestroy() {
    if (this.myChart) {
      this.myChart.dispose()
    }
    this.myChart = null
  },
  methods: {
    computdiff(row) {
      return (row && (row.onJobNum !== row.compileNum)) ? String(row.onJobNum - row.compileNum) : ''
    },
    cellStyle({ row, columnIndex }) {
      var overflow = row && row.onJobNum > row.compileNum
      if (columnIndex > 1 && overflow) {
        return 'color:#f00'
      }
      return ''
    },
    createDiagram() {
      getOrgTreeById(this.orgId)
        .then(res => {
          var doc = document.getElementById('diagram')
          var myChart = echarts.init(doc)//初始化
          this.myChart = myChart
          this.currentOrgTree = []
          this.currentOrgTree.push(res.data)
          var op = createTreeOption(this.currentOrgTree[0])//创建配置参数
          const that = this
          op.tooltip.formatter = this.showCompile//tooltip显示内容
          myChart.on('click', (params) => {//点击事件处理
            that.getCompileDetial(params, myChart)
          })

          myChart.setOption(op)//设置配置
          var allNode = 0
          var nodes = myChart._chartsViews[0]._data._graphicEls
          for (var i = 0, count = nodes.length; i < count; i++) {
            var node = nodes[i]
            if (node === undefined) { continue }
            allNode++
          }
          var width = window.innerWidth
          var currentWidth = 120 * allNode
          var newWidth = Math.max(currentWidth, width)
          myChart.resize({//重置画布尺寸
            width: newWidth
          })
        })
    },
    closeTip() {
      if (this.myChart) {
      // 手动隐藏tooltip
        this.myChart.dispatchAction({
          type: 'hideTip'
        })
      }
    },
    showCompile() {
      return `<div class="table-box">${document.getElementById('infoTable').innerHTML}</div>`
    },
    getCompileDetial(params, myChart) {
      this.tableData = []
      if (params && params.data && params.data.value) {
        this.nodeOrgName = params.name
        getByOrgId(params.data.value)
          .then(res => {
            if (res && res.data) {
              this.tableData = res.data
              if (myChart) {
                setTimeout(() => {//手动显示tooltip
                  myChart.dispatchAction({
                    type: 'showTip',
                    position: [params.event.event.zrX, params.event.event.zrY],
                    seriesIndex: params.seriesIndex,
                    name: params.name
                  })
                }, 100)
              }
            } else {
              this.$message.error(res && res.msg ? res.msg : '查询编制失败')
            }
          })
      }
    },
    print() {
      this.closeTip()
      var canvas = echarts.getInstanceByDom(document.getElementsByTagName('canvas')[0].parentNode.parentNode)
      var dataUrl = canvas.getDataURL()//获取画布内容
      var parentDom = document.createElement('div')
      var translateDom = document.createElement('div')
      var newImg = document.createElement('img')
      newImg.src = dataUrl
      newImg.height = 800
      newImg.width = canvas.getWidth() / canvas.getHeight() * 800
      newImg.setAttribute(
        'style',
        'transform-origin:0% 0%;transform:rotate(90deg);'
      )
      translateDom.setAttribute(
        'style',
        `transform:translateX(100%);`
      )
      translateDom.append(newImg)
      parentDom.append(translateDom)
      printDom({
        parentDom,
        title: '组织架构图',
        zoom: 1
      })
    }
  }
}
</script>

<style lang="scss" scoped>
.page {
  display: flex;
  flex-direction: column;
}
.page-title {
  font-size: 14px;
  color: #333;
  font-weight: bold;
}
/deep/.el-divider--horizontal {
  margin-top: 12px;
}
.btn-box {
  display: flex;
  margin-right: 10px;
  align-items: center;
  justify-content: flex-end;
}
.canvas {
  flex: 1;
  #diagram {
    width: 100%;
    height: calc(100% - 10px);
    background: white;
    overflow: auto;
  }
  .table-box {
    border: #999 solid 1px;
    border-radius: 4px;
    background: #fff;
    z-index: 100;
  }
  .table-title {
    padding: 12px;
    color: #333;
    font-size: 12px;
    font-weight: bold;
    width: calc(100% - 24px);
    display: flex;
    justify-content: space-between;
  }
}
</style>

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
226
227
228
229
230
231
232
233
234
235
236
237
238
239
240
241
242
243
244
245
246
247
248
249
250
251