vue圖表點擊聯動展示z-tree&echarts

1.點擊表格展示對應扇形統計圖，效果如下：

2.統計圖組件Statistics .vue代碼如下：

<template>
  <div>
    <div :id="idname" :style="{width: '100%', height: allheight+ 'px'}"></div>
  </div>
</template>

<script>
export default {
  name: 'Statistics',
  props: {
    statitle: {
      type: String
    },
    idname: {
      type: String
    },
    signlist: {
      type: Array
    },
    colorlist: {
      type: Array
    },
    showDatalist: {
      type: Array
    },
    staradios: {
      type: String
    },
    subtext: {
      type: String
    },
    legendbottom: {
      type: Number
    },
    allheight: {
      type: Number
    }
  },
  mounted () {
    this.refreshpic()
  },
  watch: {
    showDatalist: function (nval, oval) {
      this.refreshpic()
    }
  },
  methods: {
    refreshpic () {
      var that = this
      var dom = document.getElementById(this.idname)
      var myChart = this.echarts.init(dom)
      // 繪製圖表
      myChart.setOption({
        title: {
          text: this.statitle,
          subtext: this.subtext,
          left: 'center',
          top: 10
        },
        animation: false,
        tooltip: {
          trigger: 'item',
          formatter: '{a} <br/>{b} : {c} ({d}%)'
        },
        legend: {
          // orient: 'vertical',
          // top: 'middle',
          selectedMode: false,
          bottom: this.legendbottom,
          left: 'center',
          data: this.signlist,
          itemWidth: 20,
          itemHeight: 12,
          formatter: function (name) {
            let target
            let data = that.showDatalist
            let total = 0
            for (let i = 0; i < data.length; i++) {
              total += data[i].value
              if (data[i].name === name) {
                target = data[i].value
              }
            }
            let tmptarget = ((target / total) * 100).toFixed(2)
            if (total == 0) {
              tmptarget = total.toFixed(2)
            }
            if (tmptarget < 10) {
              tmptarget = '  ' + tmptarget
            }
            let arr = name + '(' + tmptarget + '%)'
            return arr
          }
        },
        series: [{
          name: '人數統計',
          type: 'pie',
          label: {
            normal: {
              position: 'inner',
              show: false
            }
          },
          radius: this.staradios,
          data: this.showDatalist,
          center: ['50%', '40%']
        }],
        color: this.colorlist
      })
    }
  }
}
</script>

<style scoped>
</style>

3.頁面代碼如下

<template>
  <div class="mainbody">
        <empty v-show="showEmpty"></empty>
<!--        <loading v-show="showLoading"></loading>-->
    <div class="main-head">
      <div class="main-head-title">
        <el-menu default-active="0"
                 class="el-menu-demo"
                 mode="horizontal"
                 @select="selectPart">
          <el-menu-item index="0">崗位考覈</el-menu-item>
          <el-menu-item index="1" disabled>部門考覈</el-menu-item>
        </el-menu>
      </div>
      <div class="main-head-search">
        <el-cascader ref="seldatas" separator="年" :options="assessDates" v-model="seldates" @change="seldatesok">
        </el-cascader>
        <el-button type="primary" class="subbtn" @click="downloadData">數據導出</el-button>
      </div>
    </div>
    <div class="main-content" v-loading="showLoading">
      <div class="main-body">
        <div class="main-tableHead">
          <ul id="main-treeHeadPro" class="ztree">
            <li>
              <table class="mainTable">
                <colgroup>
                  <col class="mainTable-colTitle">
                  <col class="mainTable-colOther mainTable-col0">
                  <col class="mainTable-colOther mainTable-col0">
                  <col class="mainTable-colOther mainTable-col0">
                  <col class="mainTable-colOther mainTable-col0">
                  <col class="mainTable-colOther mainTable-col0">
                  <col class="mainTable-colOther mainTable-col0">
                  <col class="mainTable-colOther mainTable-col0">
                  <col class="mainTable-colOther mainTable-col0">
                  <col class="mainTable-colOther mainTable-col0">
                  <col class="mainTable-colOther mainTable-col0">
                  <col class="mainTable-colOther mainTable-col0">
                </colgroup>
                <thead>
                <tr>
                  <th rowspan="2">考覈部門</th>
                  <th colspan="6">考覈階段（人數統計）</th>
                  <th colspan="5">考覈結果（人數統計）</th>
                </tr>
                <tr>
                  <th>啓動<br/>考覈</th>
                  <th>制定<br/>目標</th>
                  <th>業績<br/>考評</th>
                  <th>素質<br/>考評</th>
                  <th>績效<br/>面談</th>
                  <th>個人<br/>總結</th>
                  <th>S</th>
                  <th>A</th>
                  <th>B</th>
                  <th>C</th>
                  <th>D</th>
                </tr>
                </thead>
              </table>
            </li>
          </ul>
        </div>
        <div class="table_body">
          <my-scroll :ops="ops" ref="mainScroll">
            <ul id="main-treePro" class="ztree"></ul>
          </my-scroll>
        </div>
      </div>
      <div class="main-Statistics">

        <my-scroll :ops="ops" ref="mainScroll1">
        <statistics class="stacontent" statitle="考覈階段人數統計" idname="echartstep"
                    ref="stepstatics"
                    :legendbottom="legendbottom"
                    :allheight="allheight"
                    :staradios="staradios"
                    :subtext="subtext"
                    :signlist="signlist"
                    :colorlist="colorlist"
                    :showDatalist="showDatalist"></statistics>

        <statistics style="margin-top:40px" class="stacontent" statitle="考覈結果人數統計" idname="echartpeo"
                    ref="peostatics"
                    :legendbottom="legendbottoms"
                    :allheight="allheight"
                    :staradios="staradios"
                    :subtext="subtexts"
                    :signlist="signlists"
                    :colorlist="colorlists"
                    :showDatalist="showDatalists"></statistics>
        </my-scroll>
      </div>
    </div>
  </div>
</template>

<script>
import { apiGet, api } from '@/api/index'
import empty from '@/components/Common/empty'
import loading from '@/components/Common/loading'
import Statistics from '@/components/PA/Task/Statistics'
export default {
  name: 'LeftTree',
  components: { empty, loading, Statistics },
  props: {
    SelectProductDetail: {
      type: Object
    },
    filterText: {
      type: String
    }
  },
  data: function () {
    let $this = this
    return {
      // 餅狀圖
      allheight: 360,
      staradios: '55%',
      signlist: ['啓動考覈', '制定目標', '業績考評', '素質考評', '績效面談', '個人總結'],
      colorlist: ['#f4c427', '#1ddef4', '#329dff', '#2f67d6', '#707aff', '#f17f7f'],
      showDatalist: [],
      smalltitle: '',
      subtext: '',
      legendbottom: 50,

      signlists: ['S', 'A', 'B', 'C', 'D'],
      colorlists: ['#9249e6', '#f04848', '#ff7700', '#fad000', '#b3b3b3'],
      showDatalists: [],
      smalltitles: '',
      subtexts: '',
      legendbottoms: 70,
      // 頭部數據
      assessDates: [],
      seldates: [],
      showLoading: false,
      showNoData: false,
      showEmpty: true,
      keyIndex1: 3,
      keyIndex2: 0,
      keyIndex3: 0,
      keyHistory: '',
      keyarr: [],
      classarr: [],
      comment: '',
      showDetail: false,
      showBuy: false,
      ProductStartYearList: [],
      ops: {
        scrollPanel: {
          scrollingX: false
        }
      },
      hiddenNodes: [],
      testdata: [],
      setting: {
        view: {
          showIcon: false,
          showLine: false,
          dblClickExpand: false,
          addDiyDom: $this.addDetailItem
        },
        check: {
          enable: true
        },
        data: {
          key: {
            name: 'CodeName'
          },
          simpleData: {
            enable: true,
            idKey: 'ID',
            pIdKey: 'ParentID'
          }
        },
        callback: {
          onNodeCreated: function (event, treeId, treeNode) {
            var treeObj = $.fn.zTree.getZTreeObj(treeId)
            if (treeNode.children && treeNode.children.length > 0) {
              treeObj.expandNode(treeNode, true, false, false)
            }
          },
          onClick: function (event, treeId, treeNode, clickFlag) {
            $this.subtext = treeNode.CodeName
            $this.subtexts = treeNode.CodeName
            $this.showDatalist = [{
              value: treeNode.StartCount,
              name: '啓動考覈'
            },
            {
              value: treeNode.TargetCount,
              name: '制定目標'
            },
            {
              value: treeNode.IndexCount,
              name: '業績考評'
            },
            {
              value: treeNode.QualityCount,
              name: '素質考評'
            },
            {
              value: treeNode.InterviewCount,
              name: '績效面談'
            },
            {
              value: treeNode.PersonCount,
              name: '個人總結'
            }]
            $this.showDatalists = [{
              value: treeNode.S,
              name: 'S'
            },
            {
              value: treeNode.A,
              name: 'A'
            },
            {
              value: treeNode.B,
              name: 'B'
            },
            {
              value: treeNode.C,
              name: 'C'
            },
            {
              value: treeNode.D,
              name: 'D'
            }]
            let treeObj = $.fn.zTree.getZTreeObj(treeId)
            if (!treeNode.hideCheck) {
              if (!treeNode.checked) {
                treeObj.checkNode(treeNode, true, true, true)
              } else {
                treeObj.checkNode(treeNode, false, true, true)
              }
            }
          }
        }
      }
    }
  },
  computed: {
  },
  watch: {
    filterText: function () {
      this.searchData()
    }
  },
  mounted () {
    console.log(document.body.clientWidth)
    if (document.body.clientWidth < 1057) {
      this.legendbottom = 0
      this.legendbottoms = 60
    }
    this.getDates()
  },
  methods: {
    getProductDetail (flag) {
      let $this = this
      $this.showEmpty = false
      $this.showDetail = false
      $this.showLoading = true
      $this.showBuy = false
      $this.keyarr = ['ID', 'StartCount', 'TargetCount', 'IndexCount', 'QualityCount', 'InterviewCount', 'PersonCount', 'S', 'A', 'B', 'C', 'D']
      $this.classarr = []
      $this.keyIndex2 = 16
      $this.keyIndex3 = 16
      $this.keyHistory = ''
      for (let i = 0; i < $this.keyIndex3; i++) {
        $this.classarr.push('mainTable-colOther mainTable-col0')
      }
      apiGet.taskresult.getTableList({
        UserID: this.ttknoa.user().ID,
        // UserID: '3129',
        PeriodID: this.seldates[1]
      }).then(response => {
        this.testdata = response.Content
        if (this.testdata.length == 0) {
          $this.showEmpty = true
        } else {
          $this.showEmpty = false
        }
        $.fn.zTree.init($('#main-treePro'), $this.setting, this.testdata)
        $this.subtext = this.testdata[0].CodeName
        $this.subtexts = this.testdata[0].CodeName
        $this.showDatalist = [{
          value: this.testdata[0].StartCount,
          name: '啓動考覈'
        },
        {
          value: this.testdata[0].TargetCount,
          name: '制定目標'
        },
        {
          value: this.testdata[0].IndexCount,
          name: '業績考評'
        },
        {
          value: this.testdata[0].QualityCount,
          name: '素質考評'
        },
        {
          value: this.testdata[0].InterviewCount,
          name: '績效面談'
        },
        {
          value: this.testdata[0].PersonCount,
          name: '個人總結'
        }]
        $this.showDatalists = [{
          value: this.testdata[0].S,
          name: 'S'
        },
        {
          value: this.testdata[0].A,
          name: 'A'
        },
        {
          value: this.testdata[0].B,
          name: 'B'
        },
        {
          value: this.testdata[0].C,
          name: 'C'
        },
        {
          value: this.testdata[0].D,
          name: 'D'
        }]
        $this.showLoading = false

        $('.firstroot')[0].click()
      })
    },
    addDetailItem (treeId, treeNode) {
      var spaceWidth = 13
      var checkObj = $('#' + treeNode.tId + '_check')
      var aObj = $('#' + treeNode.tId + '_a')
      var switchObj = $('#' + treeNode.tId + '_switch')
      var icoObj = $('#' + treeNode.tId + '_ico')
      var spanObj = $('#' + treeNode.tId + '_span')
      aObj.attr('title', '')
      checkObj.remove()
      switchObj.remove()
      spanObj.remove()
      icoObj.remove()
      var li_body = ''
      if (treeNode.children == null) {
        li_body += '<table class="mainTable mainTable-Child">'
      } else if (treeNode.getParentNode() == null) {
        li_body += '<table class="mainTable mainTable-Root firstroot">'
      } else {
        li_body += '<table class="mainTable mainTable-Root">'
      }

      li_body += '<tr class="trtest">'
      li_body += '<td class="mainTable-colTitle">'
      if (treeNode.children == null) {
        let num = 0
        for (let i = this.keyIndex2; i < this.keyIndex3; i++) {
          num += parseInt(treeNode[this.keyarr[i]])
        }
        if (num > 0) {
          // li_body += checkObj[0].outerHTML
        } else {
          // li_body +=
          //     '<span style="height:1px;display: inline-block;width:24px"></span>'
          // treeNode.hideCheck = true
        }
      } else {
        // li_body += checkObj[0].outerHTML
      }

      li_body +=
        '<span style="height:1px;display: inline-block;width:' +
        (spaceWidth * treeNode.level + 6) +
        'px"></span>'
      li_body += switchObj[0].outerHTML
      if (treeNode.children == null) {
        if (treeNode['ID'] !== treeNode['ParentID'] // && // treeNode['ParentID'].indexOf('合計') === -1
        ) {
          li_body +=
              '<span class="mainTable-code">' + '' + '</span>'
        }
      } else {
      }
      li_body += spanObj[0].outerHTML
      li_body += '</td>'
      let className = ''
      for (let i = 1; i < 12; i++) {
        // if (i == this.keyIndex2) {
        //   if (this.keyHistory !== '') {
        //     li_body +=
        //       '<td class="' +
        //       this.classarr[i - 3] +
        //       '">' +
        //       this.ttknoa.toFinancial(treeNode[this.keyHistory], 0, '') +
        //       '</td>'
        //   }
        // }
        className = this.classarr[i]
        // if (treeNode[this.keyarr[i]] != parseFloat(treeNode[this.keyarr[i]])) {
        //   className += ' mainTable-colWarp'
        // }
        li_body +=
            '<td class="' +
            className +
            '">' +
            this.ttknoa.toFinancial(treeNode[this.keyarr[i]], 0, '0') +
            '</td>'
      }
      // 加一列空
      li_body += '</tr>'
      li_body += '</table>'
      aObj.append(li_body)
    },
    searchChildren (keyword, children) {
      if (children == null || children.length == 0) {
        return false
      }
      for (var i = 0; i < children.length; i++) {
        var node = children[i]
        if (node['專輯名稱'].indexOf(keyword) != -1) {
          return true
        }
        // 遞歸查找子結點
        var result = this.searchChildren(keyword, node.children)
        if (result) {
          return true
        }
      }
      return false
    },
    searchParent (keyword, node) {
      if (node == null) {
        return false
      }
      if (node['ParentID'].indexOf(keyword) != -1) {
        return true
      }
      // 遞歸查找父結點
      return this.searchParent(keyword, node.getParentNode())
    },
    searchData: function () {
      var ztreeObj = $.fn.zTree.getZTreeObj('main-treePro')
      // 顯示上次搜索後隱藏的結點
      ztreeObj.showNodes(this.hiddenNodes)
      // 查找不符合條件的結點
      // 返回true表示要過濾，需要隱藏，返回false表示不需要過濾，不需要隱藏
      let $this = this
      function filterFunc (node) {
        var keyword = $this.filterText
        // 如果當前結點，或者其父結點可以找到，或者當前結點的子結點可以找到，則該結點不隱藏
        if (
          $this.searchParent(keyword, node) ||
            $this.searchChildren(keyword, node.children)
        ) {
          return false
        }
        return true
      }
      // 獲取不符合條件的葉子結點
      this.hiddenNodes = ztreeObj.getNodesByFilter(filterFunc)
      // 隱藏不符合條件的葉子結點
      ztreeObj.hideNodes(this.hiddenNodes)
    },
    // myself () {}
    // 切換考覈類別
    selectPart (key) {
      console.log(key)
    },
    seldatesok (key) {
      this.seldates = key
      this.getProductDetail()
    },
    // 獲取週期
    getDates () {
      apiGet.taskresult.getDates().then(response => {
        if (response.Code === 200) {
          let tempdates = response.Content
          let tmpseldates = []
          for (let i in tempdates) {
            for (let j in tempdates[i].children) {
              tempdates[i].children[j].value = tempdates[i].children[j].periodID
              if (tempdates[i].children[j].IsNow) {
                tmpseldates = [tempdates[i].value, tempdates[i].children[j].value]
              }
            }
          }
          this.assessDates = tempdates
          this.seldates = tmpseldates
          this.getProductDetail('init')
        }
      })
    },
    // 導出數據
    downloadData () {
      window.location.href = '/api/hrmanage/PA_Man/Download_Man_Report?accesstoken=' + this.ttknoa.getCookie('TTKNOA.SSO.V1.0.0') + '&UserID=' + this.ttknoa.user().ID + '&PeriodID=' + this.seldates[1]
    }
  }
}
</script>
<style scoped>
  .mainbody{
    height: calc(100vh - 20px);
    background: none;
    padding: 10px;
  }
</style>
<style>
  .el-cascader-menu{
    min-width: 125px;
    height:250px;
  }
  /*頭部*/
  .main-head{
    display: flex;
    align-items: center;
    justify-content: space-between;
    height: 50px;
    margin-bottom: 10px;
    background: #ffffff;
  }
  .main-head .el-menu.el-menu--horizontal{
    border-bottom: none;
  }
  .main-head .el-menu--horizontal>.el-menu-item{
    height:50px;
    line-height: 50px;
    padding: 0;
    margin-left: 10px;
    margin-right: 20px;
    font-size: 16px;
    font-weight: 500;
  }
  .main-head .el-menu--horizontal>.el-menu-item:last-child{
    cursor: not-allowed;
    color: #909399 !important;
    opacity: 1 !important;
  }
  .main-head .el-menu--horizontal>.el-menu-item:last-child:hover{
    background: none;
  }
  .main-head .el-menu--horizontal>.el-menu-item.is-active{
    border-bottom: 3px solid #267ceb;
  }
  .main-head .el-input__inner {
    height: 36px;
    color: #323232;
  }
  .subbtn {
    height: 36px;
    vertical-align: middle;
    margin: 0 10px;
    line-height: 0.5;
    background: linear-gradient( 45deg, #2470e8, #4b8efa );
  }
  .subbtn:hover{
    background: linear-gradient( 45deg, #2470e8, #4b8efa );
  }
  .main-head-title {
    height: 50px;
    line-height: 50px;
    text-align: center;
    font-weight: bold;
    color: #323232;
    font-size: 14px;
  }
  .main-head-title > span {
    font-size: 16px;
  }
  .main-content{
    width: 100%;
    overflow: hidden;
    box-sizing: border-box;
    height:calc(100% - 64px);
    padding: 10px;
    display: flex;
    background: #ffffff;
  }
  .main-body{
    flex: 1;
    height:100%;
    position: relative;
  }
  .main-Statistics{
    width: 300px;
    display: flex;
    flex-flow: column;
    padding: 0 10px;
    box-sizing: border-box;
    height:100%;
  }
  .mainTable {
    width: 100%;
    table-layout: fixed;
    border-collapse: collapse;
  }
  .mainTable .mainTable-colTitle {
    width: 180px;
  }
  .mainTable .mainTable-col0 {
    width: 50px;
  }
  .mainTable .mainTable-col1 {
    width: 120px;
  }
  .mainTable .mainTable-col2 {
    width: 150px;
  }
  .mainTable .mainTable-col3 {
    width: 200px;
  }
  .mainTable .mainTable-col4 {
    width: 300px;
  }
  .mainTable .mainTable-col5 {
    width: 400px;
  }
  .mainTable td.mainTable-colOther {
    text-align: right;
  }
  .mainTable th {
    text-align: center;
  }
  .mainTable .mainTable-colTitle {
    text-align: left;
    padding: 5px auto;
  }
  .mainTable tr {
    height: 40px;
  }
  .mainTable th {
    background-color: #609dff;
    color: #fff;
    border: 1px solid #f0f0f0;
    white-space: initial;
    word-break: break-all;
    word-spacing: inherit;
    line-height: 16px;
  }
  .mainTable .mainTable-colNoWarp {
    white-space: nowrap;
  }
  .mainTable td.mainTable-colWarp {
    white-space: normal;
    text-align: left;
    line-height: 20px;
    padding: 6px;
  }
  .mainTable td,
  .mainTable th {
    font-size: 14px;
  }
  .mainTable td {
    color: #323232;
    border-left: 1px solid #ddd;
    border-right: 1px solid #ddd;
    box-sizing: border-box;
    padding-right: 9px;
  }
  .mainTable td:first-child {
    font-weight: 600;
    border-left: 0;
  }
  .mainTable td:last-child {
    font-size: bold;
    border-right: 0;
  }
  .mainTable-Root td {
    font-weight: bold;
    border-top: 1px solid #ddd;
    border-bottom: 1px solid #ddd;
  }
  .mainTable td{
    border: 1px dashed #ddd;
  }
  .main-body ul > li:first-child > a > table.mainTable-Child {
    border-top: 1px solid #ddd;
  }
  .main-body ul > li:last-child > a > table.mainTable-Child {
    border-bottom: 1px solid #ddd;
  }
  .main-body ul > li:nth-child(odd) > a > table.mainTable td {
    background-color: #ffffff;
  }
  .main-body ul > li:nth-child(even) > a > table.mainTable td {
    background-color: #fff;
  }
  .main-body ul.level1 > li:nth-child(odd) > a > table.mainTable td{
    background: #f5f8ff;
  }
  .main-body ul.level0 > li:nth-child(odd) > a>table.mainTable-Root td{
    background: #ebf2ff;
  }
  .main-comment-title {
    height: 50px;
    line-height: 50px;
    font-weight: bold;
    font-size: 14px;
    padding-left: 10px;
  }
  .main-comment {
    line-height: 22px;
    font-size: 14px;
    padding-left: 20px;
    white-space: pre-line;
    color: #242424;
    padding-bottom: 20px;
    margin-bottom: 20px;
  }
  /*中間zTree樣式開始*/
  .main-body .ztree * {
    font-size: 14px;
  }
  .main-body .ztree {
    padding: 0;
  }
  .main-body .ztree li ul {
    margin: 0;
    padding: 0;
  }
  .main-body .ztree li {
    line-height: 26px;
  }

  .main-body .ztree li span {
    line-height: 16px;
    margin-right: 0px;
    /*color: #c4def5;*/
  }

  .main-body .ztree li span.node_name {
    white-space: initial;
    word-break: break-all;
    word-spacing: inherit;
    width: 58%;
    display: inline-block;
    line-height: 16px;
    vertical-align: top;
  }
  .main-body .ztree li span.mainTable-code {
    margin-right: 6px;
  }
  .main-body .ztree li span.mainTable-code {
    vertical-align: top;
    margin-top: 2px;
    display: inline-block;
  }

  .main-body .ztree li a {
    width: 100%;
    /*padding: 3px 3px 0 0; */
    padding: 0;
    display: inline-block;
    height: auto;
    margin: -1px 0;
  }
  .main-body .ztree li a:hover {
    text-decoration: none;
  }

  .main-body .ztree li .checkbox_true_full + a,
  .main-body .ztree li .checkbox_true_part + a,
  .main-body .ztree li .checkbox_true_full_focus + a,
  .main-body .ztree li .checkbox_true_part_focus + a {
    color: #2a8cd7;
  }

  .main-body .ztree li span.button.switch {
    width: 2px;
    height: 16px;
  }

  .main-body .ztree li a.curSelectedNode {
    padding: 0;
    border: none !important;
    opacity: 1;
  }
  .main-body .ztree li a.level0.curSelectedNode {
    padding: 0;
  }
  .main-body ul > li > a.curSelectedNode > table td {
    background: #b5cefb !important;
  }

  .main-body .ztree li span.button.center_close,
  .main-body .ztree li span.button.roots_close,
  .main-body .ztree li span.button.noline_close {
    background-image: url("../../../../assets/images/selectman2.png");
    width: 16px;
    height: 16px;
    background-position: 3px 2px;
  }

  .main-body .ztree li span.button.center_open,
  .main-body .ztree li span.button.roots_open,
  .main-body .ztree li span.button.noline_open {
    background-image: url("../../../../assets/images/selectman2.png");
    width: 16px;
    height: 16px;
    background-position: 3px -17px;
  }

  .main-body .ztree li span.button.chk {
    background-image: url("../../../../assets/images/selectedimg.png");
    width: 16px;
    height: 16px;
    margin: 2px 0px 0 10px;
    cursor: auto;
  }
  .ztree li span.button.chk.checkbox_false_full {
    background-position: -16px -1px;
  }

  .ztree li span.button.chk.checkbox_false_full_focus {
    background-position: -16px -19px;
  }

  .ztree li span.button.chk.checkbox_false_part {
    background-position: -16px -19px;
  }

  .ztree li span.button.chk.checkbox_false_part_focus {
    background-position: 0px -19px;
  }

  .ztree li span.button.chk.checkbox_true_full {
    background-position: 0px -1px;
  }

  .ztree li span.button.chk.checkbox_true_full_focus {
    background-position: 0px -1px;
  }

  .ztree li span.button.chk.checkbox_true_part {
    background-position: 0px -19px;
  }

  .ztree li span.button.chk.checkbox_true_part_focus {
    background-position: 0px -19px;
  }

  .ztree li span.button.chk.radio_false_full {
    background-position: -20px -38px;
  }

  .ztree li span.button.chk.radio_false_full_focus {
    background-position: -20px -57px;
  }

  .ztree li span.button.chk.radio_false_part {
    background-position: -20px -57px;
  }

  .ztree li span.button.chk.radio_false_part_focus {
    background-position: -2px -57px;
  }

  .ztree li span.button.chk.radio_false_disable {
    background-position: -20px -38px;
  }

  .ztree li span.button.chk.radio_true_disable {
    background-position: -2px -57px;
  }

  .ztree li span.button.chk.radio_true_full {
    background-position: -2px -38px;
  }

  .ztree li span.button.chk.radio_true_full_focus {
    background-position: -2px -38px;
  }

  .ztree li span.button.chk.radio_true_part {
    background-position: -2px -57px;
  }

  .ztree li span.button.chk.radio_true_part_focus {
    background-position: -2px -57px;
  }
  .mainbody .scroll_table {
    position: absolute !important;
    top: 50px;
    left: 0;
    right: 0;
    bottom: 10px;
    padding: 0 10px !important;
    height: auto !important;
  }
  .mainbody .table_body {
    position: absolute;
    top: 80px;
    left: 0;
    bottom: 0;
    width: 100%;
  }
  /*中間zTree樣式結束*/
  .__rail-is-horizontal {
    bottom: 0 !important;
    left: 20px !important;
    right: 20px !important;
  }
  .main-body .ztree li span.button,
  .main-body .ztree li span.button.switch {
    vertical-align: top;
    margin-top: 4px;
  }
  .main-body .ztree li span.button.noline_close {
    margin-top: 0;
  }
  .main-body .ztree li span.button.noline_close:first-child {
    margin-top: 4px;
  }
  .main-body .ztree li span.button.noline_open {
    margin-top: 0px;
  }
  .main-body .ztree li span.button.noline_close {
    margin-top: 1px;
  }
  .el-popper{
    margin-top:4px !important;
  }
  .el-cascader-menu__item.is-active{
    font-weight: 600;
  }
  .el-cascader__label span{
    color:#323232;
  }
  @media screen and (max-width: 1000px) {
    .main-Statistics{
      display: none;
    }
  }
</style>