1. Python技术站首页
  2. 其他
  3. Vue

Vue echarts画甘特图流程详细讲解

• Vue

下面我将详细讲解“Vue echarts画甘特图流程详细讲解”的完整攻略。

1. 甘特图简介

甘特图是一种常用于项目管理的图表类型，用于展示任务的时间轴，显示各个任务的开始时间、结束时间和持续时间。它能够清晰地展示每个任务的进展情况，帮助团队掌握项目进展，及时协调、调整工作计划和资源分配。

2. 准备工作

在使用 Vue 和 echarts 画甘特图之前，我们需要做一些准备工作：

  1. 安装 Vue 和 echarts：
npm install vue echarts --save
  1. 在 Vue 项目中引用 echarts：
import echarts from 'echarts'
Vue.use(echarts)

3. 画甘特图

3.1 图表配置项

在画甘特图之前，我们需要先配置图表的样式和数据。以下是一个示例的配置项：

option = {
    tooltip: {
        formatter: '{b}'
    },
    timeline: {
        data: []
    },
    grid: {
        left: 100,
        right: 100,
        top: 50,
        bottom: 20,
        containLabel: true
    },
    xAxis: {
        type: 'value',
        scale: true,
        max: Date.now(),
        splitLine: {
            show: false
        },
        axisLabel: {
            formatter: '{value}ms'
        }
    },
    yAxis: {
        type: 'category',
        data: [],
        axisLabel: {
            interval: 0,
            rotate: 30
        },
        splitLine: {
            show: false
        },
        axisTick: {
            width: 2
        },
        axisLine: {
            onZero: false
        }
    },
    series: []
};

3.2 数据处理

在配置好图表的样式和数据之后，我们需要对数据进行处理，使其符合 echarts 的数据格式。以下是一个示例数据：

data = [
   {name:"task1",startTime:"2022-01-01",endTime:"2022-01-05"},
   {name:"task2",startTime:"2022-01-06",endTime:"2022-01-10"},
   {name:"task3",startTime:"2022-01-11",endTime:"2022-01-15"},
   {name:"task4",startTime:"2022-01-16",endTime:"2022-01-20"},
];

这个数据的格式与 echarts 的数据格式有所差异，我们需要对它进行处理。以下是一个将上述数据处理成 echarts 的 series 数据的示例：

let gData=[];
data.forEach((d,i)=>{
    gData.push({
        value: [
            d.startTime,
            d.endTime + ' ' + d.name
        ],
        itemStyle: {
            normal: {
                color: i % 2 === 0 ? '#FFEFD5' : '#FFF0F5'
            }
        }
    })
})
option.series.push({
    type: 'custom',
    renderItem: (params, api) => {
        const categoryIndex = api.value(3);
        const endX = api.coord([api.value(2), categoryIndex])[0] + 1;
        const rectShape = echarts.graphic.clipRectByRect({
            x: api.coord([api.value(0), categoryIndex])[0],
            y: api.coord([0, categoryIndex - 0.4])[1],
            width: endX - api.coord([api.value(0), categoryIndex])[0],
            height: api.size([0, 1])[1] * 0.8 //挑一个合适的高度
        }, {
            x: params.coordSys.x,
            y: params.coordSys.y,
            width: params.coordSys.width,
            height: params.coordSys.height
        });
        return rectShape && {
            type: 'rect',
            transition: ['shape'],
            shape: rectShape,
            style: { fill: params.itemStyle.color }
        };
    },
    data: gData
});

3.3 渲染图表

将以上配置项和数据处理代码添加到 Vue 的组件中，并通过 echarts 属性将其绑定到 echarts 的实例上，就可以渲染出甘特图了。以下是一个完整的示例代码：

<template>
  <div ref="chart" style="width: 100%; height: 400px;"></div>
</template>

<script>
import echarts from 'echarts';
export default {
  data() {
    return {
      option: {
        tooltip: {
          formatter: '{b}'
        },
        timeline: {
          data: []
        },
        grid: {
          left: 100,
          right: 100,
          top: 50,
          bottom: 20,
          containLabel: true
        },
        xAxis: {
          type: 'value',
          scale: true,
          max: Date.now(),
          splitLine: {
            show: false
          },
          axisLabel: {
            formatter: '{value}ms'
          }
        },
        yAxis: {
          type: 'category',
          data: [],
          axisLabel: {
            interval: 0,
            rotate: 30
          },
          splitLine: {
            show: false
          },
          axisTick: {
            width: 2
          },
          axisLine: {
            onZero: false
          }
        },
        series: []
      }
    }
  },
  mounted() {
    const chart = echarts.init(this.$refs.chart);
    const data = [
      {name:"task1",startTime:"2022-01-01",endTime:"2022-01-05"},
      {name:"task2",startTime:"2022-01-06",endTime:"2022-01-10"},
      {name:"task3",startTime:"2022-01-11",endTime:"2022-01-15"},
      {name:"task4",startTime:"2022-01-16",endTime:"2022-01-20"},
    ];
    //数据处理
    let gData=[];
    data.forEach((d,i)=>{
      gData.push({
        value: [
          d.startTime,
          d.endTime + ' ' + d.name
        ],
        itemStyle: {
          normal: {
            color: i % 2 === 0 ? '#FFEFD5' : '#FFF0F5'
          }
        }
      })
    })
    //添加甘特图series
    this.option.series.push({
      type: 'custom',
      renderItem: (params, api) => {
        const categoryIndex = api.value(3);
        const endX = api.coord([api.value(2), categoryIndex])[0] + 1;
        const rectShape = echarts.graphic.clipRectByRect({
          x: api.coord([api.value(0), categoryIndex])[0],
          y: api.coord([0, categoryIndex - 0.4])[1],
          width: endX - api.coord([api.value(0), categoryIndex])[0],
          height: api.size([0, 1])[1] * 0.8 //挑一个合适的高度
        }, {
          x: params.coordSys.x,
          y: params.coordSys.y,
          width: params.coordSys.width,
          height: params.coordSys.height
        });
        return rectShape && {
          type: 'rect',
          transition: ['shape'],
          shape: rectShape,
          style: { fill: params.itemStyle.color }
        };
      },
      data: gData
    });
    //渲染图表
    chart.setOption(this.option);
  },
}
</script>

4. 示例展示

4.1 滑动条时间轴甘特图

以下是一个基于 echarts 时间轴的甘特图示例：

<template>
  <div ref="chart" style="width: 100%; height: 400px;"></div>
</template>

<script>
import echarts from 'echarts';
export default {
  data() {
    return {
      option: {
        tooltip: {
          formatter: '{b}'
        },
        timeline: {
          data: [
            '2022-01-01', '2022-01-02', '2022-01-03', '2022-01-04', '2022-01-05',
            '2022-01-06', '2022-01-07', '2022-01-08', '2022-01-09', '2022-01-10',
            '2022-01-11', '2022-01-12', '2022-01-13', '2022-01-14', '2022-01-15',
            '2022-01-16', '2022-01-17', '2022-01-18', '2022-01-19', '2022-01-20'
          ],
          label: {
            formatter: (s) => {
              return echarts.format.formatTime('dd', s);
            }
          },
          currentIndex: 0,
          autoPlay: true,
          playInterval: 500
        },
        grid: {
          left: 100,
          right: 100,
          top: 50,
          bottom: 20,
          containLabel: true
        },
        xAxis: {
          type: 'value',
          scale: true,
          max: Date.now(),
          splitLine: {
            show: false
          },
          axisLabel: {
            formatter: '{value}ms'
          }
        },
        yAxis: {
          type: 'category',
          data: ['task1', 'task2', 'task3', 'task4'],
          axisLabel: {
            interval: 0,
            rotate: 30
          },
          splitLine: {
            show: false
          },
          axisTick: {
            width: 2
          },
          axisLine: {
            onZero: false
          }
        },
        series: []
      }
    }
  },
  mounted() {
    const chart = echarts.init(this.$refs.chart);
    const data = [
      {name:"task1",startTime:"2022-01-01",endTime:"2022-01-05"},
      {name:"task2",startTime:"2022-01-06",endTime:"2022-01-10"},
      {name:"task3",startTime:"2022-01-11",endTime:"2022-01-15"},
      {name:"task4",startTime:"2022-01-16",endTime:"2022-01-20"},
    ];
    let gData = [];
    data.forEach((d, i) => {
      gData.push({
        value: [
          d.startTime,
          d.endTime + ' ' + d.name
        ]
      })
    });
    this.option.series = [{
      type: 'custom',
      renderItem: (params, api) => {
        const categoryIndex = api.value(1);
        const endX = api.coord([api.value(1), categoryIndex])[0] + 1;
        const rectShape = echarts.graphic.clipRectByRect({
          x: api.coord([api.value(0), categoryIndex])[0],
          y: api.coord([0, categoryIndex - 0.4])[1],
          width: endX - api.coord([api.value(0), categoryIndex])[0],
          height: api.size([0, 1])[1] * 0.8
        }, {
          x: params.coordSys.x,
          y: params.coordSys.y,
          width: params.coordSys.width,
          height: params.coordSys.height
        });
        return rectShape && {
          type: 'rect',
          transition: ['shape'],
          shape: rectShape,
          style: { fill: '#4a94ff' }
        };
      },
      data: gData
    }];
    chart.setOption(this.option);
    //时间轴自动播放
    setInterval(() => {
      chart.dispatchAction({
        type: 'timelineChange',
        currentIndex: (this.option.timeline.currentIndex + 1) % this.option.timeline.data.length
      });
    }, this.option.timeline.playInterval);
  }
}
</script>

4.2 线性时间轴甘特图

以下是一个基于 echarts 线性时间轴的甘特图示例：

<template>
  <div ref="chart" style="width: 100%; height: 400px;"></div>
</template>

<script>
import echarts from 'echarts';
export default {
  data() {
    return {
      option: {
        tooltip: {
          formatter: '{b}'
        },
        xAxis: {
          type: 'time',
          min: '2022-01-01',
          max: '2022-01-20',
          splitLine: {
            show: false
          }
        },
        yAxis: {
          type: 'category',
          data: ['task1', 'task2', 'task3', 'task4'],
          axisLabel: {
            interval: 0,
            rotate: 30
          },
          splitLine: {
            show: false
          }
        },
        series: []
      }
    }
  },
  mounted() {
    const chart = echarts.init(this.$refs.chart);
    const data = [
      {name:"task1",startTime:"2022-01-01",endTime:"2022-01-05"},
      {name:"task2",startTime:"2022-01-06",endTime:"2022-01-10"},
      {name:"task3",startTime:"2022-01-11",endTime:"2022-01-15"},
      {name:"task4",startTime:"2022-01-16",endTime:"2022-01-20"},
    ];
    let gData = [];
    data.forEach((d, i) => {
      gData.push({
        value: [
          d.startTime,
          d.endTime + ' ' + d.name
        ]
      })
    });
    this.option.series = [{
      type: 'custom',
      renderItem: (params, api) => {
        const categoryIndex = api.value(1);
        const endX = api.coord([api.value(1), categoryIndex])[0] + 1;
        const rectShape = echarts.graphic.clipRectByRect({
          x: api.coord([api.value(0), categoryIndex])[0],
          y: api.coord([0, categoryIndex - 0.4])[1],
          width: endX - api.coord([api.value(0), categoryIndex])[0],
          height: api.size([0, 1])[1] * 0.8
        }, {
          x: params.coordSys.x,
          y: params.coordSys.y,
          width: params.coordSys.width,
          height: params.coordSys.height
        });
        return rectShape && {
          type: 'rect',
          transition: ['shape'],
          shape: rectShape,
          style: { fill: '#4a94ff' }
        };
      },
      data: gData
    }];
    chart.setOption(this.option);
  }
}
</script>

以上是基于 Vue 和 echarts 画甘特图的详细讲解和示例。希望这个攻略对你有所帮助！

本站文章如无特殊说明，均为本站原创，如若转载，请注明出处：Vue echarts画甘特图流程详细讲解 - Python技术站

赞 (0)
0 0 打赏 微信扫一扫 微信扫一扫 支付宝扫一扫 支付宝扫一扫
上一篇 2023年5月29日
下一篇 2023年5月29日

相关文章

  • 浅析Vue 和微信小程序的区别、比较

    浅析Vue和微信小程序的区别、比较 Vue和微信小程序都是前端技术，目的都是为了提供更好的用户体验。但是Vue和微信小程序的开发、使用方式和运行环境等方面有所不同，下面将对它们进行简单的比较和分析。 开发方式 Vue和微信小程序的开发方式有很大的不同。 Vue使用Vue CLI和其他构建工具来创建和管理项目，使用Vue组件化开发，采用MVVM模式，提供更加灵…

    Vue 2023年5月27日
    00

  • Vue 2源码解析Parse函数定义

    那么让我们开始讲解“Vue 2源码解析Parse函数定义”的完整攻略。 标题1：Vue 2源码解析Parse函数定义 标题2：什么是Parse函数 在Vue 2的源代码中，Parse函数是用于将字符串模板转换为AST的一个函数。 当我们在Vue应用程序中编写模板时，这些模板都会被转换为VNode，而VNode本质上是一个JavaScript对象，它们构成了V…

    Vue 2023年5月27日
    00

  • 详解从vue-loader源码分析CSS Scoped的实现

    标题：详解从vue-loader源码分析CSS Scoped的实现 文章内容： 简介 在Vue项目中，使用作用域CSS是非常常见的需求。Vue.js官方提供了一个vue-loader插件，可以帮助我们快捷实现CSS作用域。本文将详细讲解vue-loader源码分析CSS Scoped的实现过程。 CSS Scoped实现原理 CSS Scoped即为CSS作…

    Vue 2023年5月27日
    00

  • vue如何使用文件流进行下载(new Blob)

    Vue可以使用File API和Blob对象实现文件下载功能。Blob对象表示二进制大对象，可以将文件数据打包为Uint8Array数组或字符串，从而实现文件下载。 以下是使用Blob对象进行文件下载的步骤： 创建Blob对象 可以使用Blob构造函数创建Blob对象，该构造函数接受一个数组、字符串或HTML元素作为参数。例如，传入Uint8Array数组作…

    Vue 2023年5月28日
    00

  • Go+Vue开发一个线上外卖应用的流程(用户名密码和图形验证码)

    下面为您详细介绍“Go+Vue开发一个线上外卖应用的流程(用户名密码和图形验证码)”的完整攻略，可以分为以下几个步骤： 步骤一：技术选型 本次开发我们采用Go语言作为后端开发语言，使用Gin框架进行开发。前端开发我们选择Vue框架，使用Element-UI进行美化，同时也可以使用Vue-Vuex进行状态管理。 步骤二：项目初始化 首先，我们需要完成项目的初始…

    Vue 2023年5月28日
    00

  • vue 全局环境切换问题

    我来详细讲解一下“Vue 全局环境切换问题”的攻略。 什么是 Vue 全局环境切换问题？ Vue 全局环境切换问题是指在 Vue 应用中，我们可能需要在开发环境、测试环境和生产环境之间进行切换，而这些环境中可能存在不同的配置项、请求接口地址等。如何在不同环境下切换这些配置，是 Vue 全局环境切换问题需要解决的核心问题。 解决方案 我们可以通过 webpac…

    Vue 2023年5月28日
    00

  • 详解Webstorm 新建.vue文件支持高亮vue语法和es6语法

    下面是详解Webstorm 新建.vue文件支持高亮vue语法和es6语法的完整攻略： 问题描述 在使用Webstorm开发Vue项目的过程中，新建.vue文件后发现并没有默认支持高亮vue语法和es6语法，这给我们带来了不小的困扰，那么应该如何解决呢？ 解决方案 安装Vue插件 为了支持高亮Vue语法和ES6语法，我们首先需要安装Vue插件，可以打开Web…

    Vue 2023年5月28日
    00

  • Vue使用echarts的完整步骤及解决各种报错

    Vue使用echarts步骤： 安装echarts 在项目中安装echarts依赖。使用npm安装，在终端中输入以下命令： npm install echarts –save 引入echarts 在需要使用echarts的组件中引入echarts。 import echarts from ‘echarts’ 初始化图表 使用echarts提供的初始化方法进…

    Vue 2023年5月28日
    00
合作推广
合作推广
分享本页
返回顶部