запускать электронные диаграммы при наведении курсора и отображать данные

В круговых диаграммах обычно, когда я наводю указатель мыши на срез, я вижу название серии, значение, процент и ..., но когда указатель мыши находится на легенде, срез выделяется только и немного приподнимается. Я хотел бы видеть информацию также, когда указатель мыши находится на имени фрагмента в части легенды.

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

Спасибо.


echarts
person rahram    schedule 09.03.2019    source источник

Ответы (1)


arrow_upward
2
arrow_downward

Вам необходимо настроить всплывающую подсказку в легенде с вашим собственным форматом, как указано в

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

Вы можете использовать function (params) под legend.tooltip.formatter

Однако 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>

person Raymond    schedule 16.01.2020