echarts实现柱图的下钻功能

1、确保已安装了cnpm,使用cnpm命令安装echarts：

cnpm install echarts --save

2、在main.js文件中，全局引入echarts：

import * as echarts from "echarts";
// 开启echarts
Vue.prototype.$echarts = echarts;

3、创建柱状图test.vue文件

<template>
  <div>
    <a-button type="primary" @click="back" style="margin-left: 30px">返回</a-button>
    <div id="main" class="box-pie" style="height: 500px" ref="chart"></div>
  </div>
</template>

<script>
  //引入的调用后台封装的方法getAction，根据自己的项目引入
  import {downFile, getAction, httpAction, postAction} from "@api/manage";
  export default {
    name: "test",
    data() {
      return {
        char: null,
        option: {
          tooltip: {
            trigger: 'axis',
            axisPointer: {
              type: 'shadow'
            }
          },
          legend: {},
          grid: {
            left: '3%',
            right: '4%',
            bottom: '3%',
            containLabel: true
          },
          yAxis: {
            type: 'category',
            data: []   //后台加载数据
            // data: ['浙江全省', '杭州', '宁波', '温州', '金华', '嘉兴', '绍兴', '台州', '湖州', '丽水', '衢州', '舟山']
          },
          xAxis: {
            type: 'value'
          },
          dataGroupId: '',
          animationDurationUpdate: 500,
          series: [
            {
              name: '已完成',
              type: 'bar',
              stack: 'total',
              label: {
                show: true
              },
              data: [] //后台加载数据
              // data: [780, 302, 301, 334, 390, 330, 320, 320, 302, 301, 334, 200, 350]
            },
            {
              name: '未完成',
              type: 'bar',
              stack: 'total',
              label: {
                show: true
              },
              data: [] //后台加载数据
              // data: [600, 132, 101, 134, 90, 230, 210, 330, 320, 134, 90, 90]
            }]
        }
      }
    },
    mounted() {
      this.getPage();
    },
    methods: {
      getPage() {
      	//初始化chart模块
        this.chart = this.$echarts.init(this.$refs.chart);
		//后台返回数据，可以根据自己的业务逻辑返回
        let shiQuNameArray = [];
        let shiQuHandleData = [];//市区级别已完成任务个数
        let shiQuNoHandleData = [];//市区级别未完成任务个数
        let allprovinceName;//全省名称
        let provinceName;//省检验中心数据
        let param = {};
        getAction(url, param).then(res => {
          if (res.success) {
            let project = res.result.records || res.result;
            allprovinceName = project.allprovinceName;
            provinceName = project.provinceName;
            if (allprovinceName != null && allprovinceName != "") {
              shiQuNameArray.push(project.allprovinceName);//判断全省名称是否存在
              shiQuHandleData.push(project.allhandleNummber);
              shiQuNoHandleData.push(project.allnohandleNummber);
            }
            if (provinceName != null && provinceName != "") {
              shiQuNameArray.push(project.provinceName);
              shiQuHandleData.push(project.provinceHandleNummber);
              shiQuNoHandleData.push(project.provinceNohandleNummber)
            }
            if (project.shiQuList != null) {
              for (let i = 0; i < project.shiQuList.length; i++) {
                shiQuNameArray.push(project.shiQuList[i].shiQuareaName);
                shiQuHandleData.push(project.shiQuList[i].shiQuhandleNummber);
                shiQuNoHandleData.push(project.shiQuList[i].shiQunoHandleNummber);
              }
            }
			//获取后台数据后设置option
            this.option.yAxis.data = shiQuNameArray;
            this.option.series[0].data = shiQuHandleData;
            this.option.series[1].data = shiQuNoHandleData;
            this.chart.setOption(this.option);
          }
        })
        
        //点击某个柱状图
        const that = this;
        that.chart.on('click', function (object) {
          //获取到市级名称
          //排除点击全省，不下钻，（object.name是柱状图的名称，根据名称判断点击的是那个市区）
          if (object.name) {
            if (object.name == allprovinceName || object.name == provinceName) {
              return;
            }
            //只有市级别的才实现下钻，排除点击县区级别情况
            if (!shiQuNameArray.includes(object.name)) {
              return;
            }
			//再次从后台获取数据,根据自己后台返回数据进行解析
            let xianQuNamelist = [];
            let xianQuHandleNum = [];
            let xianQuNoHnandleNum = [];
            getAction(url, param).then(res => {
              if (res.success) {
                let project = res.result.records || res.result;       
                for (var i = 0; i < project.shiQuList.length; i++) {
                  //如果匹配到市区名称,筛选出对应的县区信息
                  if (object.name == project.shiQuList[i].shiQuareaName) {
                    for (var j = 0; j < project.shiQuList[i].xianQuList.length; j++) {
                      xianQuNamelist.push(project.shiQuList[i].xianQuList[j].xianQuareaName);
                      xianQuHandleNum.push(project.shiQuList[i].xianQuList[j].xianQuhandleNummber);                     xianQuNoHnandleNum.push(project.shiQuList[i].xianQuList[j].xianQuhandleNummber);
                    }
                    break;
                  }
                }
              }
              //如果县区级别数据为0，则阻止下钻功能
              if (xianQuNamelist.length == 0) {
                return;
              }
              //再次设置option
              that.chart.setOption({
                tooltip: {
                  trigger: 'axis',
                  axisPointer: {
                    type: 'shadow'
                  }
                },
                legend: {},
                grid: {
                  left: '3%',
                  right: '4%',
                  bottom: '3%',
                  containLabel: true
                },
                yAxis: {
                  type: 'category',
                  data: xianQuNamelist//从后台获取的县区名称       
                },
                xAxis: {
                  type: 'value'
                },
                dataGroupId: '',
                animationDurationUpdate: 500,
                series: [
                  {
                    name: '已处理',
                    type: 'bar',
                    stack: 'total',
                    label: {
                      show: true
                    },
                    data: xianQuHandleNum //从后台获取的县区已完成数量             
                  {
                    name: '未处理',
                    type: 'bar',
                    stack: 'total',
                    label: {
                      show: true
                    },
                    data: xianQuNoHnandleNum  //从后台获取的县区未完成数量    
                  }],
              });
            })     
          }
        });
      },
      back() {
      	//点击返回按钮，从新显示之前数据
        const that = this;
        that.chart.setOption(that.option);
      }
    }
  }
</script>
<style scoped>
</style>

4、引用test模块

<template>
  <div class="page-header-index-wide">
    <a-card :loading="loading" :bordered="false" :body-style="{padding: '0'}">
      <div class="salesCard">
          <a-tab-pane loading="true" tab="各市区数据" key="1">
            <test ref="test"></test>
          </a-tab-pane>   
      </div>
    </a-card>
  </div>
</template>

<script>
	//引入test文件
  import test from "@/components/chart/test"
  
  export default {
    name: "IndexChart",
    components: {
      test
    },
    data() {
      return {}, 
    }
  }
</script>
<style lang="less" scoped>
</style>

5、实现效果：
第一次加载数据加载的结果

点击其中一条后，实现市区对应下面县区数据，实现下钻功能。

点击返回按钮，即可返回第一次加载的数据。