图表多层上下钻1：双层简单版

echars官网：https://www.echartsjs.com/zh/index.html

首先看一下图表下钻的效果：
https://www.highcharts.com.cn/demo/highcharts/column-drilldown
这个是highcharts的示例，不过我在echarts没找到，所以根据echarts提供的点击事件琢磨了一下。期间遇到很多坑，幸好有大佬同事的灵感提示与指导帮忙，所以好好总结一下图表上下钻系列。

首先是点击事件的使用：

myChart.on('click', function (params) {
    // 判断是否已经下钻到底层
    if (params.data.isLast ===false) {
        // 处理异步加载，防止请求期间用户多次点击。如果后台是一次性把数据全给你，就不用这个方法。如果点击后需要二次请求，建议加上这个
        myChart.showLoading({
            text: '正在加载数据',
            color: '#fff',
            textColor: '#fff',
            maskColor: 'rgba(3, 27, 54, 0.7)',
            zlevel: 999
        });

       // 这里自己写逻辑，处理下钻后要展示的数据
       // ...... 省略N行......

       // 重新设置option的值，这里是根据你自己图表的option来的，不一定和我的一样
        option.xAxis[0].data = type;
        option.series[0].data = graphData;

        // 由于我是使用react，所以用的一个变量控制返回按钮的显示与隐藏。默认隐藏，下钻后显示
        that.setState({
            backVisible: true
        }, () => {
            // 关闭遮罩并重新加载图表配置
            myChart.hideLoading(); 
            myChart.setOption(option, true);
        })
    
    }
    
    });

点击事件完成后，基本下钻就能实现了。但是可以发现我点击事件里面有个判断，这个主要是用来判断是否下钻到最底层。变量可以自己设，放在数据里面，只要达到效果就行了，因为到达底层后是不再允许继续下钻的，避免报错。
效果图：


接着就是上钻的处理，也就是返回。在做返回之前，我们就要把原始数据给重新设个变量保存好，不做任何操作。比如第一次请求数据时，设个originalData进行保存。点击返回事件后，再拿出来重新展示。

// 返回
onBack() {
    this.setState({
        backVisible: false,
        graphData: this.state.originalData,
    }, () => {
        this.newGraph();
    })
}

newGraph是图表初始化的方法，就是写echarts.init()那里。
大致思路就是这样了，以上方法既适合柱形图也适合饼图。