ApexCharts堆叠柱线图Fourth折线渲染位置异常问题排查

该问题由ApexCharts堆叠模式的默认计算规则与配置缺失共同导致：

• 全局设置chart.stacked = true后，所有未显式指定类型、未单独关闭堆叠属性的系列，都会被纳入堆叠值计算逻辑，和系列最终渲染成柱状还是折线样式无关
• 现有配置仅前两个柱状系列显式声明了type: 'column'，名为third、fourth的两个系列没有指定类型，仅通过stroke.width配置将线条宽度设为4实现了折线的视觉效果，底层仍被判定为需要参与堆叠的系列
• 堆叠计算时，fourth系列的渲染位置会叠加前面所有同组系列的数值总和，最终显示位置为「前两个柱状堆叠总值 + third系列数值 + fourth自身数值」，因此实际900多万的数值会显示在1900万对应的偏高位置。

给两个折线系列补充两项配置即可解决：

1. 显式声明系列类型为type: 'line'
2. 单独为折线系列设置stacked: false，使其脱离堆叠计算体系，以Y轴0刻度为基准独立渲染位置

修复后的完整可运行代码如下：

var options = {
  "chart": {
    "id": "chartMain",
    "locales": [
      {
        "name": "ru"
      }
    ],
    "defaultLocale": "ru",
    "stacked": true
  },
  "labels": [
    "2019-07",
    "2019-08"
  ],
  "xaxis": {
    "type": "text"
  },
  "yaxis": [
    {
      "show": true
    }
  ],
  "markers": {
    "size": 5,
    "shape": "square",
    "radius": 0
  },
  "stroke": {
    "width": [
      0,
      0,
      4,
      4
    ]
  },
  "colors": [
    "#008ffb",
    "#feb019",
    "#00e396",
    "#775dd0"
  ],
  "series": [
    {
      "name": "first",
      "type": "column",
      "data": [
        {
          "x": "2019-07",
          "y": 9027007.39
        },
        {
          "x": "2019-08",
          "y": 9415941.29
        }
      ]
    },
    {
      "name": "second",
      "type": "column",
      "data": [
        {
          "x": "2019-07",
          "y": 577201
        },
        {
          "x": "2019-08",
          "y": 577201.3
        }
      ]
    },
    {
      "name": "third",
      "type": "line",
      "stacked": false,
      "data": [
        {
          "x": "2019-07",
          "y": 9160489.34
        },
        {
          "x": "2019-08",
          "y": 9569882.8
        }
      ]
    },
    {
      "name": "fourth",
      "type": "line",
      "stacked": false,
      "data": [
        {
          "x": "2019-07",
          "y": 9944204.82
        },
        {
          "x": "2019-08",
          "y": 10375475.84
        }
      ]
    }
  ]
};

var chart = new ApexCharts(document.querySelector("#chart"), options);
chart.render();

内容的提问来源于stack exchange，提问作者rizort