VUE使用echarts编写甘特图（组件）

VUE使用echarts编写甘特图（组件）

直接上代码

<template>
  <div ref="chartContainer" class="chart-container" style="width: 100%; height: 600px;"></div>
</template>

<script>
import * as echarts from 'echarts'

export default {
  name: 'CustomGanttChart',
  data() {
    return {
      chartInstance: null,
      chartData: [
        { category: '任务一', start: '2024/09/01 09:00', end: '2024/09/03 17:00', status: '可用' },
        { category: '任务一', start: '2024/09/04 09:00', end: '2024/09/05 17:00', status: '故障' },
        { category: '任务一', start: '2024/09/06 09:00', end: '2024/09/08 17:00', status: '可用' },
        { category: '任务二', start: '2024/09/09 09:00', end: '2024/09/11 17:00', status: '故障' },
        { category: '任务二', start: '2024/09/12 09:00', end: '2024/09/15 17:00', status: '可用' },
        { category: '任务三', start: '2024/09/16 09:00', end: '2024/09/18 17:00', status: '可用' },
        { category: '任务三', start: '2024/09/19 09:00', end: '2024/09/21 17:00', status: '故障' },
        { category: '任务三', start: '2024/09/22 09:00', end: '2024/09/25 17:00', status: '可用' }
      ]
    }
  },
  mounted() {
    this.initChart()
    window.addEventListener('resize', this.chartInstance.resize)
  },
  methods: {
    initChart() {
      const chartContainer = this.$refs.chartContainer
      this.chartInstance = echarts.init(chartContainer)
      this.updateChart()
    },
    updateChart() {
      const colors = ['#2EC7C9']  // 只有一个颜色
      const states = ['可用']     // 只有一个状态名称

      const option = {
        color: colors,
        tooltip: {
          formatter: function (params) {
            return params.name + ': ' + params.value[1] + ' ~ ' + params.value[2]
          }
        },
        legend: {
          data: states,
          top: '1%',
          selectedMode: false,
          textStyle: {
            color: '#000'
          }
        },
        grid: {
          left: '3%',
          right: '3%',
          top: '10%',
          bottom: '15%',
          containLabel: true
        },
        xAxis: {
          type: 'time',
          interval: 3600 * 12 * 1000,
          axisLabel: {
            formatter: function (value) {
              const date = new Date(value)
              return `${date.getHours().toString().padStart(2, '0')}:${date.getMinutes().toString().padStart(2, '0')}\n${date.getDate()}/${date.getMonth() + 1}`
            },
            rotate: 45 // 旋转标签
          }
        },
        yAxis: {
          type: 'category',
          data: [...new Set(this.chartData.map(data => data.category))]
        },
        dataZoom: [
          {
            type: 'inside',
            xAxisIndex: 0,
            start: 0,
            end: 100
          },
          {
            type: 'slider',
            xAxisIndex: 0,
            start: 0,
            end: 100
          }
        ],
        series: [
          {
            name: states[0],
            type: 'bar',
            stack: 'status',
            data: [] // Empty series for legend
          },
          {
            type: 'custom',
            renderItem: function (params, api) {
              const categoryIndex = api.value(0)
              const start = api.coord([api.value(1), categoryIndex])
              const end = api.coord([api.value(2), categoryIndex])
              const height = 24

              return {
                type: 'rect',
                shape: 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
                }),
                style: api.style()
              }
            },
            encode: {
              x: [1, 2],
              y: 0
            },
            data: this.chartData.map(item => ({
              itemStyle: {
                color: item.status === '可用' ? colors[0] : 'transparent' // 设置可用为颜色，故障为透明
              },
              name: item.status,
              value: [item.category, item.start, item.end]
            }))
          }
        ]
      }

      this.chartInstance.setOption(option)
    }
  }
}
</script>

<style scoped>
.chart-container {
  width: 100%;
  height: 600px;
}
</style>

ByeBye