如何在echart中添加格式化工具提示以获取饼图的多个值

Question

我正在使用 echart 饼图，但我想在工具提示中显示多个记录。

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%>:<% = 值 %><%\n%><%=name1%>:<%= value1%><%\n%><%=name2%>:<%= value2 %>' 此链接：https:// echarts.apache.org/examples/en/editor.html?c=pie-simple

Answer 1

如果您想自定义工具提示，则可以使用格式化程序属性的回调函数并访问所有相关数据。我已经为您创建了一个演示，如果您遇到任何问题，请告诉我。

\n\n

\r\n

\r\n

// \xe5\x9f\xba\xe4\xba\x8e\xe5\x87\x86\xe5\xa4\x87\xe5\xa5\xbd\xe7\x9a\x84dom\xef\xbc\x8c\xe5\x88\x9d\xe5\xa7\x8b\xe5\x8c\x96echarts\xe5\xae\x9e\xe4\xbe\x8b\r\nvar myChart = echarts.init(document.getElementById(\'main\'));\r\n\r\noption = {\r\n  tooltip: {\r\n    trigger: \'item\',\r\n    formatter: function (params) {\r\n      \r\n      return `${params.seriesName}<br />\r\n              ${params.name}: ${params.data.value} (${params.percent}%)<br />\r\n              ${params.data.name1}: ${params.data.value1}`;\r\n    }\r\n  },\r\n  legend: {\r\n    orient: \'vertical\',\r\n    left: \'left\',\r\n    data: [\'aa\', \'bb\', \'cc\', \'dd\', \'ee\']\r\n  },\r\n  series: [{\r\n    name: \'text name\',\r\n    type: \'pie\',\r\n    radius: \'55%\',\r\n    center: [\'50%\', \'60%\'],\r\n    data: [{\r\n        value: 335,\r\n        name: \'aa\',\r\n        value1: 335,\r\n        name1: \'xx\'\r\n      },\r\n      {\r\n        value: 310,\r\n        name: \'bb\',\r\n        value1: 335,\r\n        name1: \'yy\'\r\n      },\r\n      {\r\n        value: 234,\r\n        name: \'cc\',\r\n        value1: 335,\r\n        name1: \'zz\'\r\n      },\r\n      {\r\n        value: 135,\r\n        name: \'dd\',\r\n        value1: 335,\r\n        name1: \'ww\'\r\n      },\r\n      {\r\n        value: 1548,\r\n        name: \'ee\',\r\n        value1: 335,\r\n        name1: \'vv\'\r\n      }\r\n    ],\r\n  }]\r\n};\r\n\r\n// use configuration item and data specified to show chart\r\nmyChart.setOption(option);

\r\n

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

\r\n

\r\n

\r\n

\n