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
          }
        }]
      }
  • 1
    点赞
  • 5
    收藏
    觉得还不错? 一键收藏
  • 1
    评论
Vue使用Echarts实现甘特图可以参考以下步骤: 1. 首先,需要在你的Vue项目中安装Echarts。你可以使用npm或yarn来安装Echarts依赖:npm install echarts --save 或者 yarn add echarts 2. 在你的Vue组件中引入Echarts库并初始化一个图表实例。你可以在created生命周期钩子函数中进行初始化: ```javascript import echarts from 'echarts'; export default { created() { this.initGanttChart(); }, methods: { initGanttChart() { const ganttChart = echarts.init(document.getElementById('gantt-chart')); // 在这里配置甘特图的相关选项和数据 // 然后使用 setOption 方法设置配置项 ganttChart.setOption({ // 配置项 }); } } } ``` 3. 在模板中添加一个用于显示甘特图的容器: ```html <template> <div> <div id="gantt-chart" style="width: 100%; height: 400px;"></div> </div> </template> ``` 4. 根据你的需求,配置甘特图的相关选项和数据。你可以参考Echarts官网的文档来了解所有可用的配置项和数据格式。 5. 最后,调用setOption方法来将配置项应用到图表中。 这样就可以在Vue使用Echarts实现甘特图了。记得引入Echarts库,初始化图表实例,配置选项和数据,然后将配置项应用到图表中。<span class="em">1</span><span class="em">2</span> #### 引用[.reference_title] - *1* [vue中echarts实现甘特图](https://blog.csdn.net/weixin_44104341/article/details/85238205)[target="_blank" data-report-click={"spm":"1018.2226.3001.9630","extra":{"utm_source":"vip_chatgpt_common_search_pc_result","utm_medium":"distribute.pc_search_result.none-task-cask-2~all~insert_cask~default-1-null.142^v93^chatsearchT3_2"}}] [.reference_item style="max-width: 50%"] - *2* [甘特图,用于项目计划等](https://download.csdn.net/download/qq_40349489/9989903)[target="_blank" data-report-click={"spm":"1018.2226.3001.9630","extra":{"utm_source":"vip_chatgpt_common_search_pc_result","utm_medium":"distribute.pc_search_result.none-task-cask-2~all~insert_cask~default-1-null.142^v93^chatsearchT3_2"}}] [.reference_item style="max-width: 50%"] [ .reference_list ]
评论 1
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值