Question

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

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

我正在使用最新的apexchart（3.8.0）和vue-apexcharts（1.3.6）版本。

使用新的Date（）正确创建了日期。

我尝试过的事情：

独立图表。可行，但我可能需要合并图表
删除apexchartGenericOptions.js对象中的xaxis.labels对象。有效，但轴未设置样式。
使用JSON.parse（JSON.stringify（options））深度克隆所有单独的选项对象。 mergeDeep（）函数使用Array.reduce创建一个完整的新对象，因此它不应该是突变的问题。不起作用。
重置几个创建的属性，我不知道convertedCatToNumeric: true和categories: []的位置。不起作用

我创建了一个codesandbox示例

apexchartGenericOptions.js中的xaxis配置

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 };
  },
  (...)
};

我希望x轴在折线图中作为类别绘制，而在列图中作为格式化的字符串日期时间绘制，但是它作为数字unix时代绘制。仅当我删除apexchartGenericOptions.js中的xaxis.labels对象或仅绘制一张图表时，才能正确绘制。

使用日期时间类型时

0 个答案: