[JavaScript知识库]Vue-Echarts实现简单项目进度甘特图

echarts实现甘特图（项目进度/任务进度）

<template>
      <!-- Echarts 图表 -->
          <div ref="progressChart" class="progressChart"></div>
</template>

<script>
  mounted() {
    this.initChart()
  },
   /* 初始化图表 */
    initChart() {
      const progressChart = echarts.init(this.$refs.progressChart)
      const option = {
        grid: {
          containLabel: true,
          show: false,
          right: 80,
          left: 40,
          bottom: 40,
          top: 20,
          backgroundColor: '#fff'
        },
        legend: {
          // 图例组件
          data: ['持续时间'],
          align: 'auto',
          top: 'bottom'
        },
        xAxis: {
          type: 'time',
          position: 'top', // x 轴位置
          axisTick: {
            // 隐藏刻度
            show: false
          },
          axisLine: {
            // 隐藏轴线
            show: false
          },
          splitLine: {
            // 显示网格线
            show: true
          },
          interval: 3600 * 24 * 1000 * 30 // 坐标轴分割时间间隔
        },
        yAxis: {
          axisTick: {
            // 隐藏刻度
            show: false
          },
          axisLine: {
            // 隐藏轴线
            show: false
          },
          data: [
            '项目一',
            '项目二',
            '项目三',
            '项目四',
            '项目五',
            '项目六',
            '项目七'
          ].reverse()
        },
        series: [
          {
            name: '持续时间',
            type: 'bar',
            stack: 'duration',
            label: {
              normal: {
                // 显示标签的格式处理
                show: true,
                color: '#000',
                position: 'right', // 标签放置在 bar 右侧
                formatter: function (params) {
                  // 标签内容格式化
                  return params.name
                }
              }
            },
            itemStyle: {
              normal: {
                color: '#ed7d31',
                borderColor: '#fff',
                borderWidth: 1
              }
            },
            zlevel: -1,
            data: [
              new Date('2021-01-31'),
              new Date('2021-02-25'),
              new Date('2021-03-25'),
              new Date('2021-04-01'),
              new Date('2021-04-10'),
              new Date('2021-05-25'),
              new Date('2021-07-25')
            ].reverse()
          },
          {
            name: '持续时间',
            type: 'bar',
            stack: 'duration', // 堆叠标识符，同个类目轴上系列配置相同的s tack 值可以堆叠放置
            itemStyle: {
              normal: {
                color: '#fff'
              }
            },
            zlevel: -1, // zlevel 大的 Canvas 会放在 zlevel 小的 Canvas 的上面
            z: 9, // z值小的图形会被z值大的图形覆盖，z相比zlevel优先级更低，而且不会创建新的 Canvas
            data: [
              new Date('2021-01-01'),
              new Date('2021-01-31'),
              new Date('2021-02-25'),
              new Date('2021-03-25'),
              new Date('2021-04-01'),
              new Date('2021-04-10'),
              new Date('2021-05-25')
            ].reverse()
          }
        ]
      }
      progressChart.setOption(option)
      // 浏览器窗口大小变化，图标自适应
      window.addEventListener('resize', () => {
        progressChart.resize()
      })
    },
</script>
<style lang="scss" scoped>
.progressChart {
  width: 80%;
  height: 400px;
}
</style>