echarts数据共享图实现点击一个图，另一个图跟着变化

Posted 2023-03-20 zhaofen

tags:

篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了echarts数据共享图实现点击一个图，另一个图跟着变化相关的知识，希望对你有一定的参考价值。

setTimeout函数是JavaScript中的一个内置函数，它允许您在指定的时间后执行一段代码。在这种情况下，setTimeout函数用于在用户悬停在折线图上的某个点上时显示饼图之前等待一段时间。这是为了避免在用户快速移动鼠标时显示饼图。具体来说，setTimeout函数将在500毫秒后执行传递给它的函数，这将在myChart对象的选项中将饼图的show属性设置为true。

您可以删除setTimeout函数，但这可能会导致饼图在用户快速移动鼠标时显示。如果您决定删除setTimeout函数，请确保测试饼图是否在所有情况下都能正确显示。

updateAxisPointer事件是当用户悬停在折线图上的某个点时触发的事件。myChart.on(\'updateAxisPointer\', function (event) ...事件监听器监听此事件，并使用新的系列对象更新myChart对象的选项。新的系列对象是一个饼图，当用户悬停在折线图上的某个点时显示。饼图对象的encode属性指定了如何将数据映射到图表的可视元素。

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>ECharts</title>
    <!-- 引入 echarts.js -->
    <script src="https://cdn.jsdelivr.net/npm/echarts@5.2.1/dist/echarts.min.js"></script>
</head>
<body>
  <div id="main" style="width:500px;height:400px">
    
  </div>
  <script>
     var chartDom = document.getElementById(\'main\');
var myChart = echarts.init(chartDom);
var option;

setTimeout(function () 
  option = 
    legend: ,
    tooltip: 
      trigger: \'axis\',
      showContent: false
    ,
    dataset: 
      source: [
        [\'product\', \'2012\', \'2013\', \'2014\', \'2015\', \'2016\', \'2017\'],
        [\'Milk Tea\', 56.5, 82.1, 88.7, 70.1, 53.4, 85.1],
        [\'Matcha Latte\', 51.1, 51.4, 55.1, 53.3, 73.8, 68.7],
        [\'Cheese Cocoa\', 40.1, 62.2, 69.5, 36.4, 45.2, 32.5],
        [\'Walnut Brownie\', 25.2, 37.1, 41.2, 18, 33.9, 49.1]
      ]
    ,
    xAxis:  type: \'category\' ,
    yAxis:  gridIndex: 0 ,
    grid:  top: \'55%\' ,
    series: [
      
        name:"Milk Tea",
        symbol:"none",
        type: \'line\',
        smooth: true,
        seriesLayoutBy: \'row\',
        emphasis:  focus: \'series\' 
      ,
      name:"Matcha Latte",
        type: \'line\',
        symbol:"none",
        smooth: true,
        seriesLayoutBy: \'row\',
        emphasis:  focus: \'series\' ,
      ,
      name:"Cheese Cocoa",
        type: \'line\',
        symbol:"none",
        smooth: true,
        seriesLayoutBy: \'row\',
        emphasis:  focus: \'series\' 
      ,
      name:"Walnut Brownie",
        type: \'line\',
        symbol:"none",
        smooth: true,
        seriesLayoutBy: \'row\',
        emphasis:  focus: \'series\' 
      ,
      
        type: \'pie\',
        id: \'pie\',
        radius: \'30%\',
        center: [\'50%\', \'25%\'],
        emphasis: 
          focus: \'self\'
        ,
        label: 
          formatter: \'b: @2012 (d%)\'
        ,
        encode: 
          itemName: \'product\',
          value: \'2012\',
          tooltip: \'2012\'
        
      
    ]
  ;
  myChart.on(\'updateAxisPointer\', function (event) 
    const xAxisInfo = event.axesInfo[0];
    if (xAxisInfo) 
      const dimension = xAxisInfo.value + 1;
      myChart.setOption(
        series: 
          id: \'pie\',
          label: 
            formatter: \'b: @[\' + dimension + \'] (d%)\'
          ,
          encode: 
            value: dimension,
            tooltip: dimension
          
        
      );
    
  );
  myChart.on(\'click\', function (params) 
        console.log(params);
        const data = params.data;
        const option = myChart.getOption();
        // option.series[0].data = data.data;
        option.series.forEach(function(item)
            item.lineStyle=
                width:2,
            
            if(params.name!=item.name&&item.type!="pie")
            item.lineStyle=
                width:0,
            
        )
     
        console.log(option);
        myChart.setOption(option);
  );

    myChart.setOption(option);
);

option && myChart.setOption(option);
  </script>
</body>
</html>

以上是关于echarts数据共享图实现点击一个图，另一个图跟着变化的主要内容，如果未能解决你的问题，请参考以下文章

Echarts 堆积柱状图数据标签求和怎么实现

echarts2.*版本tree树图点击节点加载数据（或点击节点收缩）实现参考

echart 柱状图的双y轴怎么实现

echarts怎么实现堆积柱状图，数据来源数据库

重叠条形图 apache echarts 百度

echarts怎么实现堆积柱状图，数据来源数据库