doc: add doc for stackOrder

[Justin-ZS]

apache/echarts#20998

[Justin-ZS]

@Ovilia Could you help to reivew this doc changes? Thanks!

[Ovilia]

Thanks!

[helgasoft]

tested with the 6 beta
It works, but the documentation should say "stackOrder should be defined for all series with the same stack name"
Example:
If stackOrder is defined for just one series ('Direct') and this series is deselected from legend, then the stack order in the chart will auto-reverse.

stackDesc.mp4

option = {
  tooltip: {
    trigger: 'axis',
    axisPointer: {
      // Use axis to trigger tooltip
      type: 'shadow' // 'shadow' as default; can also be 'line' or 'shadow'
    }
  },
  legend: { top: 26 },
  grid: { containLabel: true },
  xAxis: {},
  yAxis: { data: ['Mon', 'Tue', 'Wed'] },
  series: [
  {
    name: 'Direct', stackOrder: 'seriesDesc',
    type: 'bar',
    stack: 'total',
    label: { show: true },
    data: [320, 302, 301, 334, 390, 330, 320]
  },
  {
    name: 'Mail Ad', //stackOrder: 'seriesDesc',
    type: 'bar',
    stack: 'total',
    label: { show: true },
    data: [120, 132, 101, 134, 90, 230, 210]
  },
  {
    name: 'Affiliate Ad', //stackOrder: 'seriesDesc',
    type: 'bar',
    stack: 'total',
    label: { show: true },
    data: [220, 182, 191, 234, 290, 330, 310]
  },
  {
    name: 'Search Engine', //stackOrder: 'seriesDesc',
    type: 'bar',
    stack: 'total',
    label: { show: true },
    data: [820, 832, 901, 934, 1290, 1330, 1320]
  }]
};

[Justin-ZS]

tested with the 6 beta It works, but the documentation should say "stackOrder should be defined for all series with the same stack name" Example: If stackOrder is defined for just one series ('Direct') and this series is deselected from legend, then the stack order in the chart will auto-reverse.

stackDesc.mp4

option = {
  tooltip: {
    trigger: 'axis',
    axisPointer: {
      // Use axis to trigger tooltip
      type: 'shadow' // 'shadow' as default; can also be 'line' or 'shadow'
    }
  },
  legend: { top: 26 },
  grid: { containLabel: true },
  xAxis: {},
  yAxis: { data: ['Mon', 'Tue', 'Wed'] },
  series: [
  {
    name: 'Direct', stackOrder: 'seriesDesc',
    type: 'bar',
    stack: 'total',
    label: { show: true },
    data: [320, 302, 301, 334, 390, 330, 320]
  },
  {
    name: 'Mail Ad', //stackOrder: 'seriesDesc',
    type: 'bar',
    stack: 'total',
    label: { show: true },
    data: [120, 132, 101, 134, 90, 230, 210]
  },
  {
    name: 'Affiliate Ad', //stackOrder: 'seriesDesc',
    type: 'bar',
    stack: 'total',
    label: { show: true },
    data: [220, 182, 191, 234, 290, 330, 310]
  },
  {
    name: 'Search Engine', //stackOrder: 'seriesDesc',
    type: 'bar',
    stack: 'total',
    label: { show: true },
    data: [820, 832, 901, 934, 1290, 1330, 1320]
  }]
};

Thanks! I will open another PR to fix.