Apexchart Vue,当有大量数据时行消失

时间:2020-03-27 10:42:26

标签: javascript vue.js apexcharts

我使用三个数据系列,每个数据系列中有624条记录,并且所有内容都像一个迷住了 chart with 624 records

但是当我在每个人中使用三个带有1982记录的数据系列时,第二行消失了 chart with 1982 records

我的代码:

function apexchart(humList, dateList, tempList) {
  new Vue({
    el: '#apexchart',
    components: {
      apexchart: VueApexCharts,
    },
    data: {
      series: [{
          name: "Température",
          data: tempList
        },
        {
          name: 'Humidité',
          data: humList
        },
      ],
      chartOptions: {
        chart: {
          animations: {
            enabled: false,
          },
          toolbar: {
            show: true,
            tools: {
              download: true,
              selection: true,
              zoom: true,
              zoomin: true,
              zoomout: true,
              pan: true,
            },
            autoSelected: 'zoom'
          },
        },
        dataLabels: {
          enabled: true
        },
        stroke: {
          curve: 'straight',
          width: [, 2],
        },
        colors: ['#ff6347', '#1565c0'],
        title: {
          text: 'Capteur N°:3456789',
          align: 'left'
        },
        grid: {
          row: {
            colors: ['#f3f3f3', 'transparent'], // takes an array which will be repeated on columns
            opacity: 0.5
          },
        },
        yaxis: [{
            axisTicks: {
              show: true
            },
            axisBorder: {
              show: true,
              color: "#FF1654"
            },
            labels: {
              style: {
                colors: "#FF1654"
              }
            },
            title: {
              text: "Température (°C)",
              style: {
                color: "#FF1654"
              }
            },
          },
          {
            opposite: true,
            axisTicks: {
              show: true
            },
            axisBorder: {
              show: true,
              color: "#247BA0"
            },
            labels: {
              style: {
                colors: "#247BA0"
              }
            },
            title: {
              text: "Humidité (%)",
              style: {
                color: "#247BA0"
              }
            }
          }
        ],
        xaxis: {
          type: 'datetime',
          categories: dateList,
          labels: {
            rotate: -90,
            rotateAlways: true,
            hideOverlappingLabels: true,
            showDuplicates: false,
            trim: false,
            minHeight: 50,
            maxHeight: 50,
            style: {
              colors: [],
              fontSize: '8px',
              fontFamily: 'Helvetica, Arial, sans-serif',
              fontWeight: 400,
              cssClass: 'apexcharts-xaxis-label',
            },
            datetimeFormatter: {
              year: 'yyyy',
              month: 'MMM \'yy',
              day: 'dd MMM',
              hour: 'HH:mm'
            }
          }
        },
        legend: {
          position: 'top',
          onItemHover: {
            highlightDataSeries: true
          },
          labels: {
            colors: undefined,
            useSeriesColors: true
          },
        },
      },
    },

  })
}

0 个答案:

没有答案