echarts饼图鼠标移到图形上出现闪烁 无法点击问题

Posted

tags:

篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了echarts饼图鼠标移到图形上出现闪烁 无法点击问题相关的知识，希望对你有一定的参考价值。

参考技术A color颜色数组与数据数量对应问题

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的轮播实现方案

ECharts，基础

echarts局部刷新地图的时候出现白屏闪烁？怎么解决这个闪烁，最好附上代码

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

echarts饼状图的product显示出来

怎样将itemstyle写在echarts饼状图的data域中