Is there a way to hide data points with zero values in a pie chart when loading?

Question

I am trying to build a pie chart and a timeline chart using echarts.js. My goal is to hide the data points that have zero values from my pie chart.

For instance, I do not want these 0's to appear:

I just want to show the data points that have non-zero values, in this case, only the joy sentiment with number of tweets 3 and its percentage (100%).

This problem is two-fold:

1. I want to hide the data points with non-zero values when the chart load (the first time).

2. I want to hide the data points with non-zero values when I move the axisPointer.

I solved the 2).

myChart.on('updateAxisPointer', function (event) {
        const xAxisInfo = event.axesInfo[0];
        if (xAxisInfo) {
          const dimension = xAxisInfo.value + 1;
          myChart.setOption({
            series: {
              id: 'pie',
              label: {
                formatter: function(params) {
                  if (params.data[dimension] === 0) {
                    return '';
                  } else {
                    return params.name + ': ' + params.value[dimension] + ' (' + params.percent + '%)';
                  }
                }
              },
              encode: {
                value: dimension,
                tooltip: dimension
              }
            }
          });
        }
      });

The logic of this code block is from the official documentation of the library, found in this example, here. The difference is that I thought the solution of hiding the data points of non zero values with the if block. And it works. When I move my mouse, and the axisPointer updates, I only see data points with non-zero values, with the pie chart correctly displaying them, like so:

However, when my chart loads the first time, I see everything, because I have the label formatter in this form in my option object:

label: {formatter: '{b}: {@Tue Jan 26, 10:00} ({d}%)'}

How can I solve this?

I should add that I am new in learning the echarts.js library, and I have not yet fully understood the above code block found in the given example. The library does not provide a complete documentation, nor it explains the given example. I am blind, searching in the dark here.

Any help would be appreciated. Thank you.

Answer 1

I couldn't find the complete solution you were seeking, but I did experiment with the example you provided in your question. You can visit the link I've shared below to get a better idea of what you're trying to achieve. Here's the code for your reference:

Here

setTimeout(function () {
  option = {
    legend: {},
    tooltip: {
      trigger: 'axis',
      showContent: false
    },
    dataset: {
      source: [
        ['product', '2012', '2013', '2014', '2015', '2016', '2017'],
        ['Milk Tea', 0, 37.1, 88.7, 70.1, 53.4, 85.1],
        ['Matcha Latte', 0, 51.4, 55.1, 53.3, 73.8, 68.7],
        ['Cheese Cocoa', 0, 62.2, 69.5, 36.4, 45.2, 32.5],
        ['Walnut Brownie', 0, 82.1, 41.2, 18, 33.9, 49.1]
      ]
    },
    xAxis: { type: 'category' },
    yAxis: { gridIndex: 0 },
    grid: { top: '55%' },
    series: [
      {
        type: 'line',
        smooth: true,
        seriesLayoutBy: 'row',
        emphasis: { focus: 'series' },
        symbol: 'none',
        markPoint: { 
          data: [
            { type: 'max', name: 'max' },
            { type: 'min', name: 'min' }
          ],
          symbolSize: [0, 0], 
        },
      },
      {
        type: 'line',
        smooth: true,
        seriesLayoutBy: 'row',
        emphasis: { focus: 'series' },
        symbol: 'none',
        markPoint: { 
          data: [
            { type: 'max', name: 'max' },
            { type: 'min', name: 'min' }
          ],
          symbolSize: [0, 0], 
        },
      },
      {
        type: 'line',
        smooth: true,
        seriesLayoutBy: 'row',
        emphasis: { focus: 'series' },
        symbol: 'none', 
        markPoint: { 
          data: [
            { type: 'max', name: 'max' },
            { type: 'min', name: 'min' }
          ],
          symbolSize: [0, 0], 
        },
      },
      {
        type: 'line',
        smooth: true,
        seriesLayoutBy: 'row',
        emphasis: { focus: 'series' },
        symbol: 'none', 
        markPoint: { 
          data: [
            { type: 'max', name: 'max' },
            { type: 'min', name: 'min' }
          ],
          symbolSize: [0, 0], 
        },
      },
      {
        type: 'pie',
        id: 'pie',
        radius: '30%',
        center: ['50%', '25%'],
        emphasis: {
          focus: 'self'
        },
        label: {
          formatter: '{b}: {@2012} ({d}%)'
        },
        encode: {
          itemName: 'product',
          value: '2012',
          tooltip: '2012'
        }
      }
    ]
  };
  myChart.on('updateAxisPointer', function (event) {
    const xAxisInfo = event.axesInfo[0];
    if (xAxisInfo) {
      const dimension = xAxisInfo.value + 1;
      myChart.setOption({
        series: {
          id: 'pie',
          label: {
            formatter: function (params) {
              if (params.data[dimension] === 0) {
                return '';
              } else {
                return params.name + ': ' + params.value[dimension] + ' (' + params.percent + '%)';
              }
            }
          },
          encode: {
            value: dimension,
            tooltip: dimension
          }
        }
      });
    }
  });
  myChart.setOption(option);
});

Thank you.