4

我使用 vue-apexcharts 在仪表板中绘制图表。我创建了一个通用文件，其中包含所有图表的基本选项（以统一样式和代码可重用性），并在必要时使用mergeDeep() 函数扩展/覆盖此对象。xaxis 类型默认定义为“类别”，如果“日期时间”图表需要，此值稍后会更改。

将 xaxis.type 覆盖为“日期时间”时，图表会失败并显示 unix 纪元值而不是格式化的字符串日期。如果图表是独立的，或者我从基本选项文件中删除 de xaxis.labels 对象，则不会发生这种情况。

我正在使用最后一个 apexchart (3.8.0) 和 vue-apexcharts (1.3.6) 版本。

使用 new Date() 正确创建日期。

我尝试过的事情：

  1. 独立图表。有效，但我可能需要合并图表

  2. 删除 apexchartGenericOptions.js 对象中的 xaxis.labels 对象。工作，但轴没有样式。

  3. 使用 JSON.parse(JSON.stringify(options)) 深度克隆所有单独的选项对象。mergeDeep() 函数使用 Array.reduce 创建一个完整的新对象，因此它不应该是突变的问题。不工作。

  4. 重置几个我不知道在哪里创建的属性convertedCatToNumeric: true，和categories: []。不工作

我创建了一个代码沙盒示例

xaxis 配置在apexchartGenericOptions.js

export default {
  (...)
  xaxis: {
    type: 'category',
    labels: {
      show: true,
      style: { colors: '#bcc6d3', fontSize: '10px', fontFamily: 'Nunito Sans, sans-serif' },
    },
    axisBorder: { show: false },
    axisTicks: { show: false },
    tooltip: { enabled: false },
  },
  (...)
},

不同图表的新选项对象apexOptions.js

import mergeDeep from '../mergeDeep';
import apexchartGenericOptions from './apexchartGenericOptions';
import apexchartPieOptions from './apexchartPieOptions';

export default {
  columns: mergeDeep(apexchartGenericOptions, { xaxis: { type: 'datetime' } }),
  lines: mergeDeep(apexchartGenericOptions, { ... }),
  pie: mergeDeep(apexchartGenericOptions, apexchartPieOptions), 
};

在我的 vue 组件中，我将其存储到数据中或在计算中返回

<template lang="html">
  <div class="content">
    <apex-chart
      type="line"
      :options="apexOptions.lines"
      :series="categorySeries"
      height="300" />
    <apex-chart
      type="bar"
      :options="apexOptions.columns"
      :series="datetimeSeries"
      height="300" />
  </div>
</template>

import ApexChart from 'vue-apexcharts';
import apexOptions from '@/utils/charts/apexOptions';

export default {
  name: 'my-component',
  data() {
    return { apexOptions };
  },
  (...)
};

我希望 xaxis 在折线图中被绘制为类别，在柱状图中被绘制为格式化字符串日期时间，但它被绘制为数字 unix 纪元。仅当我删除 xaxis.labels 对象apexchartGenericOptions.js或仅绘制一个图表时才能正确绘制。

4

0 回答 0