基于日期时间的 Apex 图表 x y 线性图表

Question

嘿，我正在使用 vue.js VueApexChart

的 Apex 图表

这是我的期权价值：

 export const option = {
    chartOptions: {
        chart: {
            height: 350,
            type: 'line',
            zoom: {
                enabled: false,
            },
            toolbar: {
                show: false,
            },
        },
        dataLabels: {
            enabled: false,
        },
        stroke: {
            curve: 'straight',
        },
        grid: {
            row: {
                colors: ['#f3f3f3', 'transparent'],
                opacity: 0.5,
            },
        },
        yaxis: {
            type: 'numeric',
        },
        xaxis: {
            type: 'datetime',
        },

    },
};

在我的组件数据中，这里是我的系列结构：

chartData = [{
    "name": "Chloride",
    "data": [{
        "x": "2021-02-08",
        "y": 40,
    }]
}, {
    "name": "M Alkalinity",
    "data": []
}]

然后我将这样调用我的组件：

 <apexchart
    type="line"
    height="350"
    :options="chartOptions"
    :series="chartData"
  />

图表上没有显示任何内容

Answer 1

运行它在 codesandbox 中工作正常。您确定这不仅仅是因为您没有任何图表数据吗？（我已经为示例添加了一些）

See it running here

我变了

chartData = [{
    "name": "Chloride",
    "data": [{
        "x": "2021-02-08",
        "y": 40,
    }]
}, {
    "name": "M Alkalinity",
    "data": []
}]

至：

export default {
  data() {
    return {
      chartOptions: {
        //..
      },
      series: [
        {
          name: "Chloride",
          data: [
            {
              x: "2021-02-08",
              y: 40,
            },
            {
              x: "2021-02-09",
              y: 50,
            },
          ],
        },
        {
          name: "M Alkalinity",
          data: [
            {
              x: "2021-02-08",
              y: 60,
            },
            {
              x: "2021-02-09",
              y: 20,
            },
          ],
        },
      ],
    };
  },
};

基于日期时间的 Apex 图表 x y 线性图表

Apex chart x y linear chart based on dateTime

javascript

vue.js

apexcharts