Как добавить всплывающую подсказку форматера в echart для нескольких значений для диаграммы p ie

Question

Я использую диаграмму echart p ie, но хочу показать несколько записей во всплывающей подсказке.

option = {
    tooltip: {
        trigger: 'item',
        formatter: '{a} <br/>{b} : {c} ({d}%), <br/>{name1} : {value1} '
    },
    legend: {
        orient: 'vertical',
        left: 'left',
        data: ['aa', 'bb', 'cc', 'dd', 'ee']
    },
    series: [
        {
            name: 'text name',
            type: 'pie',
            radius: '55%',
            center: ['50%', '60%'],
            data: [
                {value: 335, name: 'aa',value1: 335, name1: 'xx'},
                {value: 310, name: 'bb',value1: 335, name1: 'yy'},
                {value: 234, name: 'cc',value1: 335, name1: 'zz'},
                {value: 135, name: 'dd',value1: 335, name1: 'ww'},
                {value: 1548, name: 'ee',value1: 335, name1: 'vv'}
            ],
        }
    ]
};

Я пробовал с этим форматером: '{a} {b}: {c} ({d}%), {e}: {f} ({g}%) 'и' <% = name%>: <% = value%> <% \ n%> <% = name1%>: <% = value1%> <% \ n%> <% = name2%>: <% = value2%> 'эта ссылка: https://echarts.apache.org/examples/en/editor.html?c=pie-simple

Answer 1

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

// 基于准备好的dom，初始化echarts实例
var myChart = echarts.init(document.getElementById('main'));

option = {
  tooltip: {
    trigger: 'item',
    formatter: function (params) {
      
      return `${params.seriesName}<br />
              ${params.name}: ${params.data.value} (${params.percent}%)<br />
              ${params.data.name1}: ${params.data.value1}`;
    }
  },
  legend: {
    orient: 'vertical',
    left: 'left',
    data: ['aa', 'bb', 'cc', 'dd', 'ee']
  },
  series: [{
    name: 'text name',
    type: 'pie',
    radius: '55%',
    center: ['50%', '60%'],
    data: [{
        value: 335,
        name: 'aa',
        value1: 335,
        name1: 'xx'
      },
      {
        value: 310,
        name: 'bb',
        value1: 335,
        name1: 'yy'
      },
      {
        value: 234,
        name: 'cc',
        value1: 335,
        name1: 'zz'
      },
      {
        value: 135,
        name: 'dd',
        value1: 335,
        name1: 'ww'
      },
      {
        value: 1548,
        name: 'ee',
        value1: 335,
        name1: 'vv'
      }
    ],
  }]
};

// use configuration item and data specified to show chart
myChart.setOption(option);

<script src="https://cdnjs.cloudflare.com/ajax/libs/echarts/3.7.2/echarts.min.js"></script>
<div id="main" style="width: 600px;height:400px;"></div>