echarts甘特图案例

echarts甘特图案例

<div class="device-task-charts" id="task-charts`"></div>

// js

 this.handleChartData(row.executionHistoryDetailVos || [])
 this.getSimulateData(row.executionHistoryDetailVos)
 this.$nextTick(() => {
    this.initChart(row)
  })
       
       
initChart(row) {
      const chart = echarts.init(document.getElementById(`task-charts`))
      const min = 0
      this.minTime = new Date(min).getTime()

this.chatOption = {
          // 鼠标提示
          tooltip: {
              formatter: (params) => {
                return params.marker + '任务' + params.seriesName + '-' + params.data.deviceName + ': ' + params.name + '<br>' + '开始时间:' + this.$dayjs(params.value[1]).format('MM-DD HH:mm:ss') + '<br>' + '结束时间:' + this.$dayjs(params.value[2]).format('MM-DD HH:mm:ss')
              }
          },
          // 标题
          title: {
            ...
          },
        legend: {
              ...
          },
          // 缩放
          dataZoom: {
              type: 'inside',
              filterMode: 'weakFilter'
          },
          grid: {
              ...
          },
          xAxis: {
              min: this.minTime,
              scale: true,
              axisLabel: {
                  color: '#c6d8ff',
                  formatter: (val) => {
                    return this.$dayjs(val).format('MM-DD HH:mm:ss')
                  }
              }
          },
          yAxis: {
           ...
          },
          series: []
      }
      this.tasks.forEach((ele) => {
        const currentData = this.seiresData.filter(item => item.taskId * 1 === ele.name * 1)
        currentData.forEach(item => {
          // 因为value encode: {y:0} =>0维度的数据映射到y轴上,所在这一步将seires的数据与Y轴设备名称的顺序对应起来
          item.value[0] = this.devices.indexOf(item.deviceName)
        })
        this.chatOption.series.push({
          name: ele.name,
          type: 'custom',
          renderItem: this.renderItem,
          itemStyle: {
              opacity: 0.8,
              color: ele.color
          },
          encode: {
              x: [1, 2],
              y: 0
          },
          data: currentData
        })
      })
      chart.setOption(this.chatOption)
    },
    
    
    // 获取系列数据
    getSimulateData(list) {
      this.seiresData = []
      const that = this
      // 产生数据
      echarts.util.each(list, function (category, index) {
        that.seiresData.push({
            deviceName: category.deviceName,
            taskId: category.taskId,
            name: category.technologyDetailName,
            value: [
                index, //对应y的顺序
                new Date(category.startTime).getTime(), //对应x的顺序
                new Date(category.endTime).getTime(), //对应x的顺序
                new Date(category.endTime).getTime() - new Date(category.startTime).getTime()
            ]
        })
      })
    },
    
  // 自定义图表渲染函数  
renderItem(params, api) {
      var categoryIndex = api.value(0)
      var start = api.coord([api.value(1), categoryIndex])
      var end = api.coord([api.value(2), categoryIndex])
      var height = api.size([0, 1])[1] * 0.6

      var rectShape = echarts.graphic.clipRectByRect({
          x: start[0],
          y: start[1] - height / 2,
          width: end[0] - start[0],
          height: height
      }, {
          x: params.coordSys.x,
          y: params.coordSys.y,
          width: params.coordSys.width,
          height: params.coordSys.height
      })

      return rectShape && {
          type: 'rect',
          shape: rectShape,
          style: api.style()
      }
    },
    
    
  handleChartData(data = []) {
    this.tasks = []
      this.devices = Array.from(new Set(data.map(ele => ele.deviceName)))
      taskLists.forEach((ele, index) => {
        this.tasks.push({
          name: ele,
          color: this.colors[index]
        })
      })
    }

dataL [row,row1,...]
row: {
    "id": 1114149,
    "taskIdList": "[1213, 1214, 1215, 1216, 1217]",
    "startTime": "2024-01-15 14:03:41",
    "endTime": "2024-01-15 14:04:20",
    "executionHistoryDetailVos": [
        {
            "id": 1114150,
            "deviceName": "仓库1号",
            "technologyDetailName": "出库",
            "taskId": 1215,
            "startTime": "2024-01-15 14:03:41",
            "endTime": "2024-01-15 14:03:43"
        },
        {xxx},
        {xxx}
        ...
    ]
}
list: row.executionHistoryDetailVos

y轴设备名称,x轴时间,系列为任务编号,展示的是当前任务中对应设备的每个工艺流程的时间段

注意点:

series中的 encode

          encode: {
              x: [1, 2], // value的1,2纬度数据映射到x轴
              y: 0, // value的0纬度数据映射到y轴 
          },