echarts饼图与柱状图联动展示

最新推荐文章于 2025-03-13 10:37:08 发布

落单の企鹅

最新推荐文章于 2025-03-13 10:37:08 发布

阅读量3.3k

点赞数 4

分类专栏： Vue 2.0 JavaScript 文章标签：数据可视化 echarts

本文链接：https://blog.csdn.net/hongyi_8848/article/details/118542028

版权

本文介绍如何实现ECharts中饼图与柱状图的联动效果，当点击饼图的某个部分时，右侧柱状图的数据会动态更新。在数据维度较多的情况下，柱状图会自动添加滚动条，提供更好的交互体验。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

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

 <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: '年龄分段' },
              {
    value: 0.5

最低0.47元/天解锁文章