echart折线图堆叠 y轴和实际数据不对应

谷艳爽faye

已于 2023-08-27 09:45:44 修改

阅读量9k

点赞数 6

分类专栏：前端文章标签： echarts 前端 javascript

于 2023-02-04 10:40:05 首次发布

本文链接：https://blog.csdn.net/weixin_45309155/article/details/128879095

版权

前端专栏收录该内容

1 篇文章 0 订阅

订阅专栏

常规操作

当使用 ECharts 绘制堆叠折线图时，有时会遇到 y 轴与实际数据不对应的问题。这种情况可能是由于以下几个原因导致的：

数据格式错误：首先，要确保数据格式正确。堆叠折线图的数据应该是一个二维数组，每个数组元素表示一个堆叠的系列数据。每个系列数据包含 x 值和 y 值，其中 x 值表示横坐标，y 值表示纵坐标。请检查数据格式是否正确，确保每个系列的数据都包含正确的 x 值和 y 值。
坐标轴配置错误：其次，要检查坐标轴的配置是否正确。堆叠折线图需要使用axis组件来配置坐标轴，确保坐标轴的类型和位置设置正确。特别是 y 轴的type属性应该设置为value，表示数值型坐标轴。
数据堆叠配置错误：堆叠折线图需要将不同系列的数据堆叠在一起显示。在系列配置中，需要设置stack属性来指定堆叠的分组名称。确保每个系列的stack属性值相同，以便将它们堆叠在一起。
下面是一个示例代码，展示了如何正确配置堆叠折线图的数据和坐标轴：

<template>
  <div>
    <ec-canvas id="mychart" :canvas-id="canvasId" :ec="ec"></ec-canvas>
  </div>
</template>

<script>
import * as echarts from 'echarts';

export default {
  data() {
    return {
      canvasId: 'mychart',
      ec: {
        lazyLoad: true
      }
    };
  },
  mounted() {
    this.initChart();
  },
  methods: {
    initChart() {
      this.ec.lazyLoad = true;
      this.ec.onInit = this.onInitChart;
    },
    onInitChart(canvas, width, height) {
      const chart = echarts.init(canvas, null, {
        width: width,
        height: height
      });
      
      // 数据格式示例
      const data = [
        { x: '1月', y: 100 },
        { x: '2月', y: 200 },
        { x: '3月', y: 300 },
        // ...
      ];
      
      // 配置坐标轴
      const option = {
        xAxis: {
          type: 'category',
          data: data.map(item => item.x)
        },
        yAxis: {
          type: 'value'
        },
        series: [
          {
            type: 'line',
            data: data.map(item => item.y),
            stack: '堆叠名称'
          }
        ]
      };
      
      chart.setOption(option);
      this.chart = chart;
      return chart;
    }
  }
};
</script>

在上述示例中，通过data数组定义了堆叠折线图的数据，每个数据对象包含 x 值和 y 值。然后，在配置坐标轴时，使用xAxis配置 x 轴，将 x 值作为横坐标；使用yAxis配置 y 轴，将 y 值作为纵坐标。最后，在系列配置中，将数据的 y 值作为系列的数据，并设置stack属性来指定堆叠的分组名称。

问题背景

最近在做前端echarts的折线图堆叠图标，发现问题是y轴的数据和后端接口返回的数据对应不上

解决办法

方案1

查看了前端代码发现在echart的图表中有一个‘stack’的属性，尝试把他删除之后y轴的数据和后端提供的数据就保持一致了。

方案2

把stack的属性值修改为不一样的属性值，比如：之前stack的属性值都为total，现在他他们的属性值设置为不一致的属性

stack属性分析

stack属性会把同一个维度上的数据进行加和的处理，所以体现在y的数据就会基数变大。进而每一个小的节点也会变大。

所以只需要修改stack属性，把他删除或者修改属性值即可

stack属性是在 ECharts 中用于堆叠折线图、柱状图等图表类型中的一个重要属性。它用于将同一系列的数据堆叠在一起显示，以形成堆叠效果。以下是对stack属性的分析总结：

堆叠分组：stack属性用于将同一系列的数据分组堆叠在一起。通过给不同系列设置相同的stack属性值，可以将它们堆叠在同一组中。同一组中的数据将按照堆叠的顺序依次显示。
堆叠顺序：堆叠的顺序由系列的stack属性值决定。具有较小stack值的系列将显示在较大stack值的系列之上。因此，在设置stack属性时，要注意确保较小stack值的系列在较大stack值的系列之前定义。
堆叠效果：堆叠折线图、柱状图等图表类型中的数据将按照堆叠的顺序叠加在一起显示。例如，在堆叠折线图中，每个数据点的值将是该点上方所有系列数据的和。这样可以形成堆叠的效果，更直观地显示各系列数据的总和和相对比例。
堆叠与坐标轴：堆叠折线图、柱状图等图表类型中的堆叠效果是基于纵向的 y 轴进行的。因此，在配置坐标轴时，要确保 y 轴的type属性设置为value，以表示数值型坐标轴。同时，堆叠的数据也应该是数值型数据。
堆叠的限制：堆叠折线图、柱状图等图表类型中的堆叠效果有一定的限制。首先，只能对同一系列的数据进行堆叠，不同系列的数据不能堆叠在一起。其次，堆叠的效果只能在同一坐标轴上实现，不同坐标轴之间的数据不能堆叠。