echars官网：https://www.echartsjs.com/zh/index.html <br/> 首先看一下图表下钻的效果： https://www.highcharts.com.cn/demo/highcharts/column-drilldown 这个是highcharts的示例，不过我在echarts没找到，所以根据echarts提供的点击事件琢磨了一下。期间遇到很多坑，幸好有大佬同事的灵感提示与指导帮忙，所以好好总结一下图表上下钻系列。 <br/> 首先是点击事件的使用： ``` 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()那里。 大致思路就是这样了，以上方法既适合柱形图也适合饼图。