Echarts柱状图下钻一级图表带切换

父组件index.vue

引入import levelDownChart from './components/levelDownChart.vue'

 <el-col :span="12" class="status">
        <levelDownChart :downlist="downlist" :searchobj="searchObj">
          <div slot="header" class="headre">
            <div class="headre-l">
              <div class="headre-lx" />
              <div class="headre-ln">处理情况</div>
            </div>
            <div class="headre-r">
              <el-button-group>
                <el-button :type="countType === '1' ? 'primary':''" label="1" round @click="getRbList('1')">切换1</el-button>
                <el-button :type="countType === '2' ? 'primary':''" label="2" round @click="getRbList('2')">切换2</el-button>
              </el-button-group>
            </div>
          </div>
        </levelDownChart>
      </el-col>
     data 定义数据
        downlist: [], 
        searchObj: { // 需要参数
        startTime: '',
        endTime: '',
        cvType: '1'
      },    
     调接口
         /**
     * @description: 各科室危急值处理情况的数据-下钻
     * @param {String} '1' 发生量;'2'预警量
     */
    async getRbList(type) {
      this.countType = type || '1'
      this.searchObj.countType = this.countType
      const res = await departmentChartApi.api(this.searchObj)
      this.downlist = res.body || []
      console.log(this.downlist)
      console.log(res, '下钻第一级各科室危急值处理情况')
    },

levelDownChart.vue子组件- //通过id下钻获取下一级数据

<template>
  <div class="home-view">
    <div class="home-view-t">
      <slot name="header" />
    </div>
    <div class="home-view-c">
      <div ref="rightB" />
      <div v-show="!isShow" class="no-data"> 暂无数据</div>
    </div>
  </div>
</template>
<script >
import { doctorChartApi } from '@/api/statistical-analysis/chart'
export default {
  name: 'LevelDownChart',
  props: {
    downlist: {
      type: Array,
      default: () => { [] }
    },
    searchobj: {
      type: Object,
      default: () => { return {} }
    }
  },
  data() {
    return {
      myChart: null,
      option: {},
      nextBool: false
    }
  },
  computed: {
    // 默认无数据不展示
    isShow() {
      let bool = false
      if (this.downlist && this.downlist.length) {
        bool = true
      }
      return bool
    }
  },
  watch: {
    downlist: {
      deep: true,
      handler: function(newV, oldV) {
        console.log(newV)
        console.log('-----------')
        if (this.isShow) {
          this.getList()
        }
      }
    },
    searchobj() {
      if (this.isShow) {
        this.getList()
      }
    }
  },
  mounted() {
    window.addEventListener('resize', () => {
      this.myChart && this.myChart.resize()
    })// 屏幕自适应
  },
  methods: {
    getList() {
      const yAxis = []
      const arr = []
      this.downlist.forEach(item => {
        yAxis.push(item.deptName)
        arr.push({
          dataGroupId: item.deptCode,
          value: item.cvCount,
          arr: item.arr
        })
      })
      console.log(yAxis)
      console.log(arr)
      this.change(yAxis, arr)
    },
    change(yAxis, arr) {
      this.myChart = this.$echarts.init(this.$refs.rightB)
      this.option = {
        graphic: [
          {
            type: 'text',
            left: 50,
            top: 10,
            style: {
              text: '',
              fontSize: 18
            }
          }
        ],
        tooltip: {
          trigger: 'axis',
          axisPointer: {
            type: 'shadow'
          }
        },
        grid: {
          top: '3%',
          left: '3%',
          right: '4%',
          bottom: '3%',
          containLabel: true
        },
        color: ['#62A9FF'],
        xAxis: {
          type: 'value',
          boundaryGap: [0, 0.01]
        },
        yAxis: {
          type: 'category',
          data: yAxis
        },
        series: [
          {
            name: '',
            type: 'bar',
            label: {
              show: true,
              position: 'right'
            },
            data: arr
          }

        ]
      }
      this.lookMsg()
      this.myChart.setOption(this.option)
    },
    //通过id下钻获取下一级数据
    async getNextList(dataGroupId) {
      const _this = this
      const obj = { deptCode: dataGroupId, ...this.searchobj }
      const res = await doctorChartApi.api(obj)
      const list = res.body || []
      const yAxis = []
      const arr = []
      list.forEach(item => { // 再次组装下砖的数据
        yAxis.push(item.doctorName)
        arr.push(item.cvCount)
      })
      this.myChart.setOption({
        color: ['#62A9FF'],
        yAxis: {
          data: yAxis
        },
        series: {
          type: 'bar',
          data: arr
        },
        grid: {
          top: '10%',
          left: '3%',
          right: '4%',
          bottom: '3%',
          containLabel: true
        },

        graphic: [
          {
            type: 'text',
            left: 50,
            top: 10,
            style: {
              text: 'Back',
              fontSize: 18
            },
            onclick: function() {
              _this.nextBool = false
              _this.myChart.setOption(_this.option)
            }
          }
        ]
      })
    },
    lookMsg() { // 监听点击下砖
      this.myChart.on('click', (event) => {
        if (event.data && !this.nextBool) {
          this.nextBool = true
          this.getNextList(event.data.dataGroupId)
        }
      })
    }
  }
}
</script>
<style lang="scss" scoped>
div{
    box-sizing:border-box;
}
.home-view{
    height:100%;
    width:100%;
    padding-bottom:15px;
    &-t{
        height:50px;
    }
    &-c{
        height:calc(100% - 50px);
        position: relative;
      >div{
        width: 100%;
        height:100%;
      }
      .no-data{
        display: flex;
        align-items: center;
        justify-content: center;
        color:#999;
        height: 100%;
        font-size: 10px;
        position: absolute;
        bottom:0;
        width: 100%;
        background: white;
      }
    }
}
</style>