vue+highcharts使用甘特图

我在使用highCharts的曲线图,柱状图时,都没有任何问题,但是在使用甘特图时,控制台报错
missingModuleFor: xrange"
很明显是缺少甘特图的文件,问题是该怎么引入呢?

引入特殊图表,解决办法来自于这篇博客:参考博客

在这里插入图片描述

效果图:

在这里插入图片描述

参考option:

ganttOption: {
        chart: {
          backgroundColor: '#2d364b',
          type: 'xrange'
        },
        title: {
          text: ''
        },
        time: {
          useUTC: false
        },
        xAxis: {
          opposite: true,
          type: 'datetime',
          lineColor: '#525E89',
          tickColor: '#525E89',
          lineWidth: 1,
          labels: {
            style: {
              color: '#7F88AA'
            }
          }
        },
        yAxis: {
          gridLineColor: 'transparent',
          title: {
            text: ''
          },
          labels: {
            style: {
              color: '#7F88AA'
            }
          },
          categories: ['工作', '停机', '故障', '断网'],
          reversed: true
        },
        credits: {
          enabled: false// 隐藏右下角水印
        },
        tooltip: {
          headerFormat: '<span style="font-size: 10px">{point.x:%Y/%m/%d %H:%M:%S} - {point.x2:%Y/%m/%d %H:%M:%S}</span><br/>'
        },
        legend: {
          enabled: false
        },
        plotOptions: {
          series: {
            animation: false
          }
        },
        series: [{
          name: '设备运行状态',
          borderColor: 'gray',
          pointWidth: 10,
          borderRadius: 0,
          borderWidth: 0,
          data: [{
			x: 1620457337168,
			x2: 1620457338168,
			y: 0
		},{
			x: 1620457338168,
			x2: 1620457339168,
			y: 1
		},{
			x: 1620457339168,
			x2: 1620457340168,
			y: 2
		}],
          dataLabels: {
            enabled: true
          }
        }]
      }
相关推荐
©️2020 CSDN 皮肤主题: 技术黑板 设计师:CSDN官方博客 返回首页