How to add formatter data in echarts pie chart

Achievement effect: When the mouse moves to the specified position, multiple corresponding numerical values ​​will appear.
Effect (screenshot - Figure 1):
insert image description here

formatter definition

Official explanation address: https://echarts.apache.org/zh/option.html#tooltip.formatter

The use of formatter

  1. The tooltip is at the same level as the series, and returns the corresponding data to be displayed after getting the data in the formatter
tooltip: {
    
    
    trigger: 'item',
    //formatter: '{a} <br/>{b} : {c} ({d}%)'
    formatter:function(data){
    
    
              return("程序号:"+data['name']
              +"</br>OK良率: "+ data['data'].datas[0].val1
              +"</br>Nok良率: "+data['data'].datas[1].val2
              + "</br>(良率占了"+data.percent.toFixed(1)+"%)"
              )
    },
  },
  1. It mainly depends on the data in the data. If the formatter is directly XXX (the format with the gray background below), what attribute is it? I tried to define it myself, but it was undefined

XXX:data.name + " < br/>“+ data.seriesName+ " : " + data.value + " (占了”+data.percent.toFixed(1)+“%)” data.

So I added the datas array in data, and put multiple data to be displayed in it

 series: [
    {
    
    
      name: '良率统计',
      type: 'pie',
      radius: [50, 250],
      center: ['50%', '50%'],
      roseType: 'area',
      itemStyle: {
    
    
        borderRadius: 8 //饼图各模块之间的圆润度
      },
      data: [
        {
    
     
          value: 40, 
          name: 'rose 1' , 
          datas:[	//主要在这里,datas数组里可以放多个对象
            {
    
    val1:111},
            {
    
    val2:111111}
          ]
        },
      ]
    }
  ],

PS: Let the data color show the legend component legend on the right

(This is an additional point, which has nothing to do with the above content and can be skipped)
You can view more attributes in the official website documentation: https://echarts.apache.org/zh/option.html#%2Fsearch%2Flegend%20
official website In the example of , if legend is not added, this row is placed at the bottom by default, and I want to achieve the left arrangement, so I added this sentence in it.
Screenshot - Figure 4:
insert image description here

  1. Legend is the same level as series,
  2. orient : Legend layout orientation (default horizontal layout, vertical layout value is 'vertical');
  3. left, right, top, bottom: the distance between the legend component and the left (right, top, bottom) side of the container (commonly used)
legend: {
    
    
            orient: 'vertical',
            left: 'left',
            data: ['rose 1','rose 2','rose 3','rose 4','rose 5','rose 6','rose 7','rose 8']
          },

Guess you like

Origin blog.csdn.net/weixin_42676530/article/details/121402104