What problem does this feature solve?

Hello,

found your great and powerfull echart plugin, now i have to do a simple chart and i spend a lot of hours to find the right configuration but every solution i found have any problem :(

I use the default template for a pie with 4 lines with a graph below.

Now i want just to add one simple bar to show avg BUT the AVG has ben excluded from the pie me and a friend we can't find a working configuration :(

At least we working with a sourc.map and filter but the collors then are wrong, we are use defined colors but will not work and be overwritten =(

I hope anyone can help me =(

Thank you

What does the proposed API look like?

My code i tryed:

var myChart = echarts.init(document.getElementById('testchart')),
option = {
    // theme: 'dark', // not working how we can toogle darkmode ?
    legend: {
        data: ['LvL 3','LvL 4','LvL 5','LvL 6','AVG']
    },
    tooltip: {
      trigger: 'axis',
      showContent: false
    },
    dataset: {
      source: [
        ['horses', '9/23', '10/23', '11/23', '12/23', '1/24', '2/24'],
        ['LvL 3', 56.5, 82.1, 88.7, 70.1, 53.4, 85.1],
        ['LvL 4', 51.1, 51.4, 55.1, 53.3, 73.8, 68.7],
        ['LvL 5', 40.1, 62.2, 69.5, 36.4, 45.2, 32.5],
        ['LvL 6', 25.2, 37.1, 41.2, 18, 33.9, 49.1],
        ['AVG', 8.0, 7.3, 7.9, 8.6, 9.6, 9.6]
      ]
    },
    xAxis: { type: 'category' },
    yAxis: { gridIndex: 0 },
    grid: { top: '55%' },
    series: [
     {
        name: 'LvL 3',
        type: 'line',
        smooth: true,
        seriesLayoutBy: 'row',
        emphasis: { focus: 'series' }
      },{
        name: 'LvL 4',
        type: 'line',
        smooth: true,
        seriesLayoutBy: 'row',
        emphasis: { focus: 'series' }
      },{
        name: 'LvL 5',
        type: 'line',
        smooth: true,
        seriesLayoutBy: 'row',
        emphasis: { focus: 'series' }
      },{
        name: 'LvL 6',
        type: 'line',
        color: '#ee6666',
        smooth: true,
        seriesLayoutBy: 'row',
        emphasis: { focus: 'series' }
      },{
        name: 'AVG', // Show on the legend and graph (bottom) but not on the pie
        type: 'bar',
        color: 'pink', // color in pie is blue and not pink -,-
        smooth: true,
        seriesLayoutBy: 'row',
        emphasis: { focus: 'series' },
        label: {
          show: true,
          position: 'top',
          valueAnimation: true
        }
      },{
        type: 'pie',
        id: 'pie',
        radius: '30%',
        center: ['50%', '25%'],
        emphasis: {
          focus: 'self'
        },
        label: {
          formatter: '{b}: {@9/23} ({d}%)'
        },
        encode: {
          itemName: 'horses',
          value: '9/23',
          tooltip: '9/23'
        },
      }
    ]
  };
  
myChart.on('updateAxisPointer', function(event){
  const xAxisInfo = event.axesInfo[0];
  if (xAxisInfo) {
    const dimension = xAxisInfo.value + 1;
    // const source = option.dataset.source.filter(row => row[0] !== 'AVG');
    // const newData = source.map(row => ({
    //   name: row[0],
    //   value: row[dimension]
    // }));
    
    myChart.setOption({
      series: [{
        id: 'pie',
        // data: newData
        label: {
            formatter: '{b}: {@[' + dimension + ']} ({d}%)'
        },
        encode: {
        value: dimension,
        tooltip: dimension
        }
      }]
    });
  }
});
myChart.setOption(option);
  
//   function initializePieChart(){
//     const initialDimension = 1; 
//     const source = option.dataset.source.filter(row => row[0] !== 'AVG');
//     const newData = source.map(row => ({
//       name: row[0],
//       value: row[initialDimension]
//     }));
    
//     myChart.setOption({
//       series: [{
//         id: 'pie',
//         // data: newData
//       }]
//     });
//   }
 
//   initializePieChart();