echarts 折现图/柱状图与饼图的联动

最新推荐文章于 2025-06-15 09:06:09 发布

yun_hou

最新推荐文章于 2025-06-15 09:06:09 发布

阅读量1w

点赞数 8

CC 4.0 BY-SA版权

分类专栏： js 文章标签： echarts 图表联动 updateAxisPointer

本文链接：https://blog.youkuaiyun.com/yun_hou/article/details/90672979

js 专栏收录该内容

13 篇文章

订阅专栏

博客介绍了使用 ECharts 实现折线图/柱状图与饼图的联动效果，主要依赖 updateAxisPointer 事件。还提到以官方演示的折线图与饼图联动为例，若要实现柱状图与饼图联动，将折线图部分改为柱状图配置即可。

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

echarts 实现折现图/柱状图与饼图的联动效果，主要依赖 updateAxisPointer 事件

以下例子为官方演示，以折线图与饼图联动为例，如需要柱状图与饼图联动，可将折线图部分改为柱状图配置即可

<!DOCTYPE html>
<html style="height: 100%">

<head>
  <meta charset="utf-8">
</head>

<body style="height: 100%; margin: 0">
  <div id="container" style="height: 100%"></div>
  <!-- 此处注意插件script引入 -->
  <script type="text/javascript" src="http://echarts.baidu.com/gallery/vendors/echarts/echarts.min.js"></script>
  <script type="text/javascript">
    var dom = document.getElementById("container");
    var myChart = echarts.init(dom);
    var app = {};
    option = null;
    option = {
      legend: {},
      tooltip: {
        trigger: 'axis',
        showContent: false
      },
      dataset: {
        source: [
          ['product', '2012', '2013', '2014', '2015', '2016', '2017'],
          ['Matcha Latte', 41.1, 30.4, 65.1, 53.3, 83.8, 98.7],
          ['Milk Tea', 86.5, 92.1, 85.7, 83.1, 73.4, 55.1],
          ['Cheese Cocoa', 24.1, 67.2, 79.5, 86.4, 65.2, 82.5],
          ['Walnut Brownie', 55.2, 67.1, 69.2, 72.4, 53.9, 39.1]
        ]
      },
      xAxis: {
        type: 'category'
      },
      yAxis: {
        gridIndex: 0
      },
      grid: {
        top: '55%'
      },
      series: [{
          type: 'line',
          smooth: true,
          seriesLayoutBy: 'row'
        },
        {
          type: 'line',
          smooth: true,
          seriesLayoutBy: 'row'
        },
        {
          type: 'line',
          smooth: true,
          seriesLayoutBy: 'row'
        },
        {
          type: 'line',
          smooth: true,
          seriesLayoutBy: 'row'
        },
        {
          type: 'pie',
          id: 'pie',
          radius: '30%',
          center: ['50%', '25%'],
          label: {
            formatter: '{b}: {@2012} ({d}%)'
          },
          encode: {
            itemName: 'product',
            value: '2012',
            tooltip: '2012'
          }
        }
      ]
    };
    myChart.on('updateAxisPointer', function (event) {
      var xAxisInfo = event.axesInfo[0];
      if (xAxisInfo) {
        var dimension = xAxisInfo.value + 1;
        myChart.setOption({
          series: {
            id: 'pie',
            label: {
              formatter: '{b}: {@[' + dimension + ']} ({d}%)'
            },
            encode: {
              value: dimension,
              tooltip: dimension
            }
          }
        });
      }
    });
    myChart.setOption(option);
  </script>
</body>

</html>