如何修改ECharts ThemeRiver显示为堆叠流面积图？

Question

我使用ECharts创建了一个图表，基于这个例子： https://echarts.apache.org/examples/en/editor.html?c=themeRiver-lastfm&edit=1&reset=1 但是，我希望图表显示为堆叠流区域，如上图所示。我不确定在哪里或如何修改代码来实现这一点。有人可以指导我如何进行这些调整吗？

我想要什么

虽然我认为这与问题没有直接关系，但我也在下面分享我的代码以供参考：

async function loadData() {
  try {
    const response = await fetch("h");

    const csvText = await response.text();

    const rows = csvText.split("\n").filter(row => row.trim() !== "");
    const userArray = [];
    const headers = rows[0].split(",");

    for (let i = 1; i < rows.length; i++) {
      const regex = /(".*?"|[^",\s]+)(?=\s*,|\s*$)/g;
      const values = rows[i].match(regex).map(value => value.replace(/^"|"$/g, "").trim());

      const releaseDate = new Date(values[1]);
      const releaseYear = releaseDate.getFullYear();

      if (releaseYear !== 2004) continue;

      const dailySales = values.slice(2).map(value => {
        if (!value || value === "") return 0;
        return parseInt(value.replace(/,/g, ""), 10);
      });

      const extendedDates = Array.from({ length: dailySales.length }, (_, index) => {
        const date = new Date(releaseDate);
        date.setDate(date.getDate() + index);

        const year = date.getFullYear();
        const month = String(date.getMonth() + 1).padStart(2, "0");
        const day = String(date.getDate()).padStart(2, "0");
        return `${year}/${month}/${day}`;
      });

      const dataObject = {
        영화: values[0],
        개봉일: releaseDate,
        개봉일차: extendedDates,
        일수_매출액: dailySales
      };

      userArray.push(dataObject);
    }
    return userArray;
  } catch (error) {
    console.error("데이터 로드 중 오류 발생:", error);
  }
}

function getISOWeek(date) {
  const tempDate = new Date(date);
  tempDate.setHours(0, 0, 0, 0);
  tempDate.setDate(tempDate.getDate() + 3 - ((tempDate.getDay() + 6) % 7));
  const week1 = new Date(tempDate.getFullYear(), 0, 4);
  return Math.round(((tempDate - week1) / (7 * 24 * 60 * 60 * 1000)) + 1);
}

async function createChart() {
  try {
    const userArray = await loadData();

    const chartDom = document.getElementById("root1");
    const myChart = echarts.init(chartDom);

    let labels = userArray.map(obj => obj.영화);
    let rawData = userArray.map(obj => obj.일수_매출액);
    let movieDates = userArray.map(obj => obj.개봉일);

    let data = [];
    for (let i = 0; i < rawData.length; i++) {
      const releaseWeek = getISOWeek(movieDates[i]); 

      let weeklySales = [];
      for (let j = 0; j < rawData[i].length; j += 7) {
        const weeklyTotal = rawData[i]
          .slice(j, j + 7) 
          .reduce((sum, value) => sum + value, 0); 
        weeklySales.push(weeklyTotal);
      }

      for (let k = 0; k < weeklySales.length; k++) {
        let label = labels[i];
        let weekNumber = releaseWeek + k; 
        data.push([weekNumber, weeklySales[k], label]);
      }
    }

    option = {
       singleAxis: {
        max: 'dataMax'
      },
      dataZoom: [
        {
          type: 'slider',
          show: true,
          start: 0,
          end: 100,
          handleSize: 8
        },
        {
          type: 'inside',
          start: 94,
          end: 100
        }
      ],
      series: [
        {
          type: 'themeRiver',
          data: data,
          label: {
            show: false
          },
          emphasis: {
            itemStyle: {
              shadowBlur: 20,
              shadowColor: 'rgba(0, 0, 0, 0.8)'
            },
            focus: 'self'
          },
        }
      ]
    };

    myChart.setOption(option);
  } catch (error) {
    console.error("Error creating chart:", error);
  }
}

createChart();

目标是找到一种方法来修改ECharts提供的ThemeRiver图表以堆叠流区域格式显示。

Answer 1

我没有找到一种方法来调整 themeRiver 使其水平到相应的轴，但你可以使用堆叠折线图来达到类似的效果。

示例：

let rawData = [
  [0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0],
  [0, 49, 67, 16, 0, 19, 19, 0, 0, 1, 10, 5, 6, 1, 1, 0, 25, 0, 0, 0],
  [0, 6, 3, 34, 0, 16, 1, 0, 0, 1, 6, 0, 1, 56, 0, 2, 0, 2, 0, 0],
  [0, 8, 13, 15, 0, 12, 23, 0, 0, 1, 0, 1, 0, 0, 6, 0, 0, 1, 0, 1],
  [0, 9, 28, 0, 91, 6, 1, 0, 0, 0, 7, 18, 0, 9, 16, 0, 1, 0, 0, 0],
  [0, 3, 42, 36, 21, 0, 1, 0, 0, 0, 0, 16, 30, 1, 4, 62, 55, 1, 0, 0],
  [0, 7, 13, 12, 64, 5, 0, 0, 0, 8, 17, 3, 72, 1, 1, 53, 1, 0, 0, 0],
  [1, 14, 13, 7, 8, 8, 7, 0, 1, 1, 14, 6, 44, 8, 7, 17, 21, 1, 0, 0],
  [0, 6, 14, 2, 14, 1, 0, 0, 0, 0, 2, 2, 7, 15, 6, 3, 0, 0, 0, 0],
  [0, 9, 11, 3, 0, 8, 0, 0, 14, 2, 0, 1, 1, 1, 7, 13, 2, 1, 0, 0],
  [0, 7, 5, 10, 8, 21, 0, 0, 130, 1, 2, 18, 6, 1, 5, 1, 4, 1, 0, 7],
  [0, 2, 15, 1, 5, 5, 0, 0, 6, 0, 0, 0, 4, 1, 3, 1, 17, 0, 0, 9],
  [0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0],
  [6, 27, 26, 1, 0, 11, 1, 0, 0, 0, 1, 1, 2, 0, 0, 9, 1, 0, 0, 0],
  [31, 81, 11, 6, 11, 0, 0, 0, 0, 0, 0, 0, 3, 2, 0, 3, 14, 0, 0, 12],
  [19, 53, 6, 20, 0, 4, 37, 0, 30, 86, 43, 7, 5, 7, 17, 19, 2, 0, 0, 5],
  [0, 22, 14, 6, 10, 24, 18, 0, 13, 21, 5, 2, 13, 35, 7, 1, 8, 0, 0, 1],
  [0, 56, 5, 0, 0, 0, 0, 0, 7, 24, 0, 17, 7, 0, 0, 3, 0, 0, 0, 8],
  [18, 29, 3, 6, 11, 0, 15, 0, 12, 42, 37, 0, 3, 3, 13, 8, 0, 0, 0, 1],
  [32, 39, 37, 3, 33, 21, 6, 0, 4, 17, 0, 11, 8, 2, 3, 0, 23, 0, 0, 17],
  [72, 15, 28, 0, 0, 0, 0, 0, 1, 3, 0, 35, 0, 9, 17, 1, 9, 1, 0, 8],
  [11, 15, 4, 2, 0, 18, 10, 0, 20, 3, 0, 0, 2, 0, 0, 2, 2, 30, 0, 0],
  [14, 29, 19, 3, 2, 17, 13, 0, 7, 12, 2, 0, 6, 0, 0, 1, 1, 34, 0, 1],
  [1, 1, 7, 6, 1, 1, 15, 1, 1, 2, 1, 3, 1, 1, 9, 1, 1, 25, 1, 72]
];
let labels = [
  'The Sea and Cake',
  'Andrew Bird',
  'Laura Veirs',
  'Brian Eno',
  'Christopher Willits',
  'Wilco',
  'Edgar Meyer',
  'B\xc3\xa9la Fleck',
  'Fleet Foxes',
  'Kings of Convenience',
  'Brett Dennen',
  'Psapp',
  'The Bad Plus',
  'Feist',
  'Battles',
  'Avishai Cohen',
  'Rachael Yamagata',
  'Norah Jones',
  'B\xc3\xa9la Fleck and the Flecktones',
  'Joshua Redman'
];
let series = [];
for (let i = 0; i < rawData.length; i++) {
  let data = [];
  for (let j = 0; j < rawData[i].length; j++) {
    data.push([j, rawData[i][j]]);
  }
  series.push({type: 'line', name: labels[i], data: data, smooth: true, stack: 'stack', symbol: 'none', areaStyle: {}});
}



option = {
  xAxis: {
    type: 'category'
  },
  yAxis: {
    type: 'value'
  },
  series: series
};