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

rahram 发表于 Dev

147

拉兰

在echarts中，通常当我将鼠标悬停在一个切片上时，我可以看到序列名称，值，百分比和...，但是当鼠标在图例上时，只会选择该切片并将其稍微抬起。当鼠标位于图例部分中切片的名称上时，我也希望看到此信息。

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

谢谢。

雷蒙德

您需要按照自己的格式在图例中自定义工具提示，如

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

您可以function (params)在legend.tooltip.formatter

但是params仅包含以下值：

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

因此，我使用了find函数来获取相应的数据。

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>

本文收集自互联网，转载请注明来源。

如有侵权，请联系 [email protected] 删除。