【问题标题】：Apex chart Charts order in Mixed chart顶点图表混合图表中的图表顺序
【发布时间】：2021-11-23 09:31:03
【问题描述】：

我目前正在使用库 ApexChart 和更特别的结合 nuxt 的 Vue 顶点图表。

我正在构建一个仪表板，我正在尝试构建一个由以下组成的混合图表：

面积图
条形图
折线图

三个图表按以下顺序显示（从后到前）：面积 - 条形 - 线

我想更改顺序以将条形图放在后面，但我不知道该怎么做。

我试过的

我已尝试更改系列的顺序以将条形图放在最后

series() {
  return [
    {
      name: 'My Line chart',
      type: 'line',
      data: this.capacityCalls
    },
    {
      name: 'My Area Chart',
      type: 'area',
      data: this.callsRealProd
    },
    {
      name: 'My Bar Chart',
      type: 'bar',
      data: this.callsToMake
    },
  ]
},

最小的可重现示例

这是一个最小的可重现事件。

<template>
  <VueApexCharts type="line" height="700" :options="chartOptions" :series="series" />
</template>

<script>
export default {
  name: "Hello",
  data: () => {
    return {
      series: [{
        name: 'TEAM A',
        type: 'line',
        data: [23, 11, 22, 27, 13, 22, 37, 21, 44, 22, 30]
      }, {
        name: 'TEAM B',
        type: 'area',
        data: [44, 55, 41, 67, 22, 43, 21, 41, 56, 27, 43]
      }, {
        name: 'TEAM C',
        type: 'bar',
        data: [30, 25, 36, 30, 45, 35, 64, 52, 59, 36, 39]
      }],
      chartOptions: {
        colors: ['#F44E7C','#FBBC04','#49619C'],
        plotOptions: {
          bar: {
            columnWidth: '100%'
          }
        },
        stroke: {
          curve: 'smooth',
          width: [3, 3, 1]
        },
        fill: {
          opacity: [1, 0.6, 0.2]
        },
      },
    }
  },
}
</script>

我正在使用 nuxt.js 并通过以下插件加载 npm 库 apexChart：

import Vue from 'vue'
import VueApexCharts from 'vue-apexcharts'

Vue.component('VueApexCharts', VueApexCharts);

【问题讨论】：

嗨，你介意在这里分享一些代码吗？没有帮助很难。

标签： javascript vue.js charts apexcharts

【解决方案1】：

当每个图表单独完成加载时，它可能会按顺序添加每个图表。如何为每个图表创建一个单独的组件并通过在模板中定义组件来定义顺序？

<line-chart></line-chart>
<area-chart></area-chart>
<bar-chart></bar-chart>

【讨论】：

我想这确实是正确的方法。

【解决方案2】：

我遇到了类似的问题，我不确定什么是合乎逻辑的解决方案。但问题通过 jquery 解决如下。

        chart: {
            events: {
                updated: function (chartContext, options) {
                     $('.apexcharts-area-series').insertAfter('.apexcharts-bar-series');
                },
                mounted: function (chartContext, options) {
                     $('.apexcharts-area-series').insertAfter('.apexcharts-bar-series');
                }
            }
        },

【讨论】：