在图例悬停时触发 echarts 饼图并显示数据

Question

在饼图中，通常，当我将鼠标悬停在切片上时，我可以看到系列名称、值、百分比和...，但是当鼠标在图例上时，切片仅被选中并且稍微向上。当鼠标在图例部分的切片名称上时，我也想看到信息。

https://www.echartsjs.com/examples/en/editor.html?c=pie-simple

谢谢。

Answer 1

您需要使用您自己的格式自定义图例中的工具提示，如

中所述

https://www.echartsjs.com/en/option.html#tooltip.formatter

您可以在 legend.tooltip.formatter

下使用 function (params)

然而 params 仅包含以下值：

{
  "componentType": "legend",
  "legendIndex": 0,
  "name": "直接访问",
  "$vars": [
    "name"
  ]
}

所以我用了一个查找函数得到了相应的数据。

tooltip: {
      trigger: 'item',
      formatter: function(params) {
        let datum = mydata.find(d => d.name == params.name)
        return '' + datum.name + ' : ' + datum.value + ' (' + (datum.value / sum * 100).toFixed(2) + '%)';
      },
      show: true
    }

let myChart = echarts.init(document.getElementById('myChart'));

const mydata = [
  {value: 335, name: '直接访问'},
  {value: 310, name: '邮件营销'},
  {value: 234, name: '联盟广告'},
  {value: 135, name: '视频广告'},
  {value: 1548,name: '搜索引擎'}
];

const sum = mydata.reduce(function(prev, current) {
  return prev + current.value
}, 0);

let myChartOption = {
  tooltip: {
    trigger: 'item',
    formatter: '{a} <br/>{b}: {c} ({d}%)'
  },
  legend: {
    orient: 'vertical',
    left: 10,
    tooltip: {
      trigger: 'item',
      formatter: function(params) {
        let datum = mydata.find(d => d.name == params.name)
        return '' + datum.name + ' : ' + datum.value + ' (' + (datum.value / sum * 100).toFixed(2) + '%)';
      },
      show: true
    }
  },
  series: [{
    name: '访问来源',
    type: 'pie',
    radius: ['50%', '70%'],
    avoidLabelOverlap: false,
    label: {
      normal: {
        show: false,
        position: 'center'
      },
      emphasis: {
        show: true,
        textStyle: {
          fontSize: '30',
          fontWeight: 'bold'
        }
      }
    },
    labelLine: {
      normal: {
        show: false
      }
    },
    data: mydata
  }]
};

myChart.setOption(myChartOption);

#myChart {
  width: 100%;
  min-height: 330px;
  margin: 0 auto;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/echarts/4.6.0/echarts.min.js"></script>
<div id="myChart"></div>

在图例悬停时触发 echarts 饼图并显示数据

trigger echarts pie on legend hover and show data

echarts