admin管理员组

文章数量:1122833

I created a graph using ECharts, based on this example: .html?c=themeRiver-lastfm&edit=1&reset=1 However, I would like the chart to appear as a stacked stream area, like the image shown above. I'm not sure where or how to modify the code to achieve this. Can someone guide me on how to make these adjustments?

What I want

Although I don't think it's directly related to the issue, I am also sharing my code below for reference:

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();

The goal is to find a way to modify the ThemeRiver chart provided by ECharts to display in a stacked stream area format.

I created a graph using ECharts, based on this example: https://echarts.apache.org/examples/en/editor.html?c=themeRiver-lastfm&edit=1&reset=1 However, I would like the chart to appear as a stacked stream area, like the image shown above. I'm not sure where or how to modify the code to achieve this. Can someone guide me on how to make these adjustments?

What I want

Although I don't think it's directly related to the issue, I am also sharing my code below for reference:

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();

The goal is to find a way to modify the ThemeRiver chart provided by ECharts to display in a stacked stream area format.

  • javascript
  • graph
  • echarts
Share Improve this question edited Nov 23, 2024 at 3:19 홍준표 asked Nov 23, 2024 at 3:16 홍준표홍준표 11 bronze badge
Add a comment  | 

1 Answer 1

Reset to default 0

I didn't find a way to adjust the themeRiver to be leveled to the corresponding axis but u can use stacked line series to achieve a similar effect.

Example:

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
};

本文标签： javascriptHow to Modify ECharts ThemeRiver to Display as a Stacked Stream Area ChartStack Overflow

版权声明：本文标题：javascript - How to Modify ECharts ThemeRiver to Display as a Stacked Stream Area Chart? - Stack Overflow 内容由网友自发贡献，该文观点仅代表作者本人， 转载请联系作者并注明出处：http://www.betaflare.com/web/1736299938a1930638.html， 本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌抄袭侵权/违法违规的内容，一经查实，本站将立刻删除。