echarts饼图与柱状图联动展示

效果描述：点击左侧饼图动态更新右侧柱状图数据，维度多时增加滚动条

 <div id="operationTimeSettingChartPieBox" class="chart-box"></div>
 <span>手术时长与各维度相关性分析</span>
 <div id="operationTimeSettingChartBarBox" class="chart-box"></div>
 <span>单一维度平均手术时长分析</span>
 <style  scoped >
 .chart-box {
    
  min-height: 400px;
  min-width: 400px;
}
</style>

import echarts from 'echarts'
 data () {
   
    return {
   
    chartBar: null, // 柱状图
      chartPie: null, // 饼图
// 手术时长预测数据
      operationTimeData: {
   
        title: '',
        // table 数据
        tableData: [{
   
          gender: '男',
          age: '16',
          doctor: '李阳',
          time: '2小时30分钟'
        }, {
   
          gender: '男',
          age: '23',
          doctor: '郑多芬',
          time: '2小时15分钟'
        }, {
   
          gender: '女',
          age: '16',
          doctor: '张洋',
          time: '2小时20分钟'
        }, {
   
          gender: '男',
          age: '42',
          doctor: '张洋',
          time: '2小时05分钟'
        }, {
   
          gender: '女',
          age: '67',
          doctor: '李阳',
          time: '2小时30分钟'
        },
        {
   
          gender: '男',
          age: '72',
          doctor: '李阳',
          time: '2小时30分钟'
        }]
      },
      // 图表数据
      textDate: {
   
        chartPie: [
          {
   
            legend: {
   
              top: 'bottom',
              data: [{
    value: 335, name: '性别' },
              {
    value: 335, name: '年龄分段' },
              {
    value: 335, name: '手术医生' }]
            },
            data: [
              {
    value: 0.22, name: '性别' },
              {
    value: 0.38, name: '年龄分段' }<