快捷導(dǎo)航

Vue echarts繪制甘特圖的示例代碼

更新時(shí)間：2024年03月28日 09:21:32 作者：緣月敘文

甘特圖是一種條狀圖,直觀展示項(xiàng)目進(jìn)展隨時(shí)間的走勢(shì)及聯(lián)系,其中,項(xiàng)目時(shí)間由橫軸表示,項(xiàng)目活動(dòng)由縱軸表示,本文給大家介紹了Vue echarts繪制甘特圖的實(shí)現(xiàn)方法,并有詳細(xì)的代碼示例供大家參考,需要的朋友可以參考下

什么是甘特圖

甘特圖（Gantt chart）又稱為橫道圖、條狀圖(Bar chart)。其通過條狀圖來顯示項(xiàng)目、進(jìn)度和其他時(shí)間相關(guān)的系統(tǒng)進(jìn)展的內(nèi)在關(guān)系隨著時(shí)間進(jìn)展的情況。以提出者亨利·勞倫斯·甘特（Henry Laurence Gantt）先生的名字命名。

甘特圖以圖示通過活動(dòng)列表和時(shí)間刻度表示出特定項(xiàng)目的順序與持續(xù)時(shí)間。一條線條圖，橫軸表示時(shí)間，縱軸表示項(xiàng)目，線條表示期間計(jì)劃和實(shí)際完成情況。直觀表明計(jì)劃何時(shí)進(jìn)行，進(jìn)展與要求的對(duì)比。便于管理者弄清項(xiàng)目的剩余任務(wù)，評(píng)估工作進(jìn)度。

1、不同的顏色表示不同的階段。

2、每一行表示一個(gè)任務(wù)。

3、任務(wù)與任務(wù)之間的黑色箭頭表示任務(wù)之間的依賴關(guān)系，必需完成前面的才能完成后面的。

通過這一張甘特圖，能一眼看出以下信息：

今天應(yīng)該做什么任務(wù)
這個(gè)任務(wù)從什么時(shí)候開始，到什么時(shí)候結(jié)束
在某一段時(shí)間有哪些任務(wù)
應(yīng)該先做哪些任務(wù)再做哪些任務(wù)
哪些任務(wù)可以同時(shí)做
這個(gè)任務(wù)是否被其他任務(wù)依賴，如果是，那么這個(gè)任務(wù)就不能推遲，必需按時(shí)完成或者提前完成，否則會(huì)影響后面的任務(wù)
大任務(wù)下面有哪些子任務(wù)
可以顯示任務(wù)的里程碑是什么時(shí)候

使用場(chǎng)景

主要用于橫坐標(biāo)固定，比如一天24小時(shí)，這樣就可以根據(jù)Y軸數(shù)據(jù)可正可負(fù)

速用示例版

可以直接將option 復(fù)制即可

option = {
  tooltip: {
    trigger: 'axis'
  },
   grid: {
    top: '10%',
    left: '3%',
    right: '4%',
    bottom: '3%',
    containLabel: true
  },
  toolbox: {
    show: true,
    feature: {
      saveAsImage: {}
    }
  },
  xAxis: {
    type: 'category',
    boundaryGap: false,
    splitLine: {
      show: true
    },
    axisLabel: {
      padding: [0, 0, 0, -20]    // 四個(gè)數(shù)字分別為上右下左與原位置距離
    },
    data: ['00:00', '01:00', '02:00', '03:00', '04:00', '05:00', '06:00','07:00', '08:00', '09:00', '10:00', '11:00', '12:00', '13:00', '14:00', '15:00', '16:00', '17:00', '18:00', '19:00', '20:00', '21:00', '22:00', '23:00', '24:00']
  },
  yAxis: {
    type: 'value',
    name: '單位(kW)',
    // scale: true,
    splitLine: {
      show: false
    },
    axisLabel: {
      formatter: '{value}',
      
    }
  },
  series: [
    {
      name: '',
      type: 'line',
      smooth: true,
      showSymbol: false,
      symbol: false,
      lineStyle: {
        normal: {
          width: 10
        }
      },
      markPoint: {
        data: [
          {
            name: '最大值',
            type: 'max',
            valueIndex: 0
          }
        ]
      },
      data: [300, 300, 300, 300, 300, 300, 300],
    },
    {
      name: '',
      type: 'line',
      smooth: true,
      showSymbol: false,
      symbol: false,
      lineStyle: {
        width: 10
      },
      markPoint: {
        data: [
          {
            name: '最大值',
            type: 'max',
            valueIndex: 0
          }
        ]
      },
      data: ['','','','','','', 500, 500, 500, 500, 500]
    },
    {
      name: '',
      type: 'line',
      smooth: true,
      showSymbol: false,
      symbol: false,
      lineStyle: {
        normal: {
          width: 10
        }
      },
      markPoint: {
        data: [
          {
            name: '最大值',
            type: 'max',
            valueIndex: 0
          }
        ]
      },
      data: ['','','','','','','', '', '','',-100, -100,-100, -100,-100]
    },
    {
      name: '',
      type: 'line',
      smooth: true,
      showSymbol: false,
      symbol: false,
      lineStyle: {
        normal: {
          width: 10
        }
      },
      markPoint: {
        data: [
          {
            name: '最大值',
            type: 'max',
            valueIndex: 0
          }
        ]
      },
      data: ['','','','','','','', '', '','','','','','','',200,200,200,200,200,200,200,200,200,200]
    }
  ]
};

潤雨細(xì)無聲版

<div ref="strategyDomRef"
 style="width: 800px;
        height: 600px;"
>

import * as echarts from 'echarts'

mounted() {
 let apiData = [
      {
        startTime: '00:00',
        endTime: '05:00',
        value: 200,
      },
      {
        startTime: '05:00',
        endTime: '12:00',
        value: 400,
      },
      {
        startTime: '12:00',
        endTime: '18:00',
        value: -200,
      },
      {
        startTime: '18:00',
        endTime: '20:00',
        value: 300,
      },
      {
        startTime: '20:00',
        endTime: '24:00',
        value: 500,
      },
    ]
    this.dealArr(apiData)
	this.echartsDraw()
},
methods:{
	//數(shù)據(jù)處理
	dealArr(apiData) {
      let YAxis = []
      apiData.forEach((element) => {
      let dealArr = new Array(
        element.endTime == '24:00' ? 25 : parseInt(element.endTime) + 1
      ).fill(Number(element.value))
      let yItem = {
        name: ' ',
        type: 'line',
        showSymbol: false,
        endLabel: {
          show: true,
          formatter: '{c}',
          position: 'start',
          fontSize: 12,
        },
        lineStyle: {
          width: 10,
          color: '#36CFC9',
        },
        data: dealArr.fill('', 0, parseInt(element.startTime)),
      }
      YAxis.push(yItem)
    })
    this.yAxis = YAxis
    },
    //圖表繪制
	echartsDraw(){
	 let charts = echarts.init(this.$refs.strategyDomRef)
            let option = {
        tooltip: {
          trigger: 'axis',
          formatter: function (params) {
            return '<br/> 功率 ： ' + params[0].value
          },
        },
        grid: {
          top: '10%',
          left: '3%',
          right: '4%',
          bottom: '3%',
          containLabel: true,
        },
        xAxis: {
          type: 'category',
          boundaryGap: false,
          splitLine: {
            // 網(wǎng)格線
            show: true,
            lineStyle: {
              //分割線
              color: '#C0C4CC',
              width: 1,
              type: 'dashed', //dotted：虛線 solid:實(shí)線
            },
          },
          axisLabel: {
            padding: [0, 0, 0, -20], // 四個(gè)數(shù)字分別為上右下左與原位置距離
          },
          data: [
            '00:00',
            '01:00',
            '02:00',
            '03:00',
            '04:00',
            '05:00',
            '06:00',
            '07:00',
            '08:00',
            '09:00',
            '10:00',
            '11:00',
            '12:00',
            '13:00',
            '14:00',
            '15:00',
            '16:00',
            '17:00',
            '18:00',
            '19:00',
            '20:00',
            '21:00',
            '22:00',
            '23:00',
            '24:00',
          ],
        },
        yAxis: {
          type: 'value',
          name: '單位(kW)',
          splitLine: {
            // 網(wǎng)格線
            show: true,
            lineStyle: {
              //分割線
              color: '#C0C4CC',
              width: 1,
              type: 'dashed', //dotted：虛線 solid:實(shí)線
            },
          },
          axisLabel: {
            formatter: '{value}',
          },
        },
        series: this.yAxis,
      }
      charts.setOption(option, true)
      //清空畫布，防止緩存
      charts.clear()
      //使用剛指定的配置項(xiàng)和數(shù)據(jù)顯示圖表。
      charts.setOption(option, true)
      window.addEventListener('resize', function () {
        charts.resize()
      })
	}
}