如何在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%>：<%= 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>

Answer 2

我们可以在 ECharts 中的工具提示、图例、标签选项中使用 Formatter 回调，并相应地更改它们的值。为了您的方便，我使用 Echats 创建了一个漂亮的饼图，您可以关注它。

选项字段代码-：

option = {
    tooltip: {
        trigger: 'item',
        // formatter: '{a} <br/>{b} : {c} ({d}%)'
        formatter: function (params) {
          return `
                 <b>${params.data.type}</b></br>
                  ${params.value} : ${params.data.name} <br />`
    }
    },
     legend: {
      
        left: 'right',
        orient: 'vertical',
        right: 10,
        top: 'center',
        bottom: 20,
        textAlign:'center',
        // formatter: function (value) {
        //     return  `${value}`
        //   }
        // data:['80%','90%','20%']
    },
    title : {
        text: 'Total Assets',
        subtext : 'J$200000',
        left: 'center',
        top:'center'
    },
    series: [
        {
            name: 'Dishant',
            type: 'pie',
            radius: ['40%', '70%'],
            label: {
                show: true,
                formatter: function (params) {
                    return `${params.data.type}`
                 }
            },
            emphasis: {
                label: {
                    show: true,
                    fontSize: '16',
                    fontWeight: 'bold'
                }
            },
            labelLine: {
                show: false
            },
            color : 
            [
                '#003F8D', '#42A1D3', '#A1C1E0', '#83A3D3','#29B3C4'
            ],
            data: [
                {value: 1048, name: '70%',type : 'Managed product'},
                {value: 735, name: '80%', type : 'Stocks'},
                {value: 580, name: '90%',type : 'Bonds'},
                {value: 484, name: '100%',type : 'Cambio'},
            ]
        }
    ]
};

Answer 3

你可以将你想要的数据传递给series对象 并通过数据键处的工具提示回调函数访问它

Answer 4

这与我猜测的问题有关：

我在添加

rich

格式时格式化标签，这是解决方案：

...
series: [
    {
      label: {
        alignTo: 'edge',
        show: true,
        formatter: function (params) {
          console.log('params', params)
          return `{b|${params.name}}\n{c|${Number(Number(params.value).toFixed(2)).toLocaleString(
            'us-US',
            { currency: 'usd' }
          )}}\n{d|${params.percent}%}\n`
        },
        // formatter: [
        //   // '{my_style|{a}}',
        //   '{b|{b}}',
        //   '{c|${c}}',
        //   '{d|{d}%}'
        // ].join('\n'),
        rich: {
          b: {
            // backgroundColor: 'red',
            lineHeight: 30,
            fontWeight: 'bold',
            borderWidth: 1,
            borderColor: 'orange',
            borderType: 'dashed',
            padding: 5
          },
          c: {
            // backgroundColor: 'red'
            fontWeight: 'bold',
            fontSize: 18
          },
          d: {
            fontWeight: 'normal'
          }
        },
        backgroundColor: 'white',
        padding: 10,
        borderRadius: 10,
        borderWidth: 1,
        borderColor: 'lightgray'
      },
      name: 'Branch',
      type: 'pie',
      radius: '50%',
      data: [
       
      ],
      emphasis: {
        itemStyle: {
          shadowBlur: 10,
          shadowOffsetX: 0,
          shadowColor: 'rgba(0, 0, 0, 0.5)'
        }
      }
    }
  ]
...