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.js实现多条件筛选、搜索、排序及分页的表格功能

    标题：Vue.js实现多条件筛选、搜索、排序及分页的表格功能攻略 介绍 在Vue.js中实现一个具有多条件筛选、搜索、排序及分页功能的表格，是一个非常常见的需求。这种表格通常用于展示大量数据，让用户可以方便地查找并进行各种操作。在本篇攻略中，将介绍如何使用Vue.js实现这样一个表格功能。 步骤 步骤一 – 准备和设计数据结构 在实现这样一个表格功能之前，需…

    Vue 2023年5月29日
    00

  • vue3+ElementPlus使用lang=”ts”报Unexpected token错误的解决办法

    首先需要明确的是，vue3和ElementPlus均支持使用TypeScript语言进行开发，因此我们可以使用lang=”ts”来指定代码的语言类型。但是，如果在使用过程中出现了Unexpected token错误，需要进行以下的解决办法。 确认项目是否已经安装了必要的依赖 在使用TypeScript时，我们需要安装一些必要的依赖，例如ts-loader、t…

    Vue 2023年5月28日
    00

  • Vue3将虚拟节点渲染到网页初次渲染详解

    Vue3将虚拟节点渲染到网页初次渲染详解 在Vue3中，将虚拟节点渲染到网页上，是在createApp的过程中完成的。具体的过程如下： 创建Vue实例 我们可以使用createApp方法创建Vue实例，如下： const app = Vue.createApp({ // Options }) createApp方法中的参数可以传入一个普通的JavaScrip…

    Vue 2023年5月28日
    00

  • vue的事件绑定与方法详解

    下面是关于“vue的事件绑定与方法详解”的完整攻略。 什么是Vue事件绑定？ 在Vue应用程序中，事件绑定用于监听DOM元素上的事件，以响应用户的交互操作。当用户对指定的DOM元素进行操作时，Vue会自动检测DOM事件，并触发指定的Vue方法。 事件绑定语法： <button v-on:click="doSomething">…

    Vue 2023年5月28日
    00

  • 从零撸一个pc端vue的ui组件库( 计数器组件 )

    下面详细讲解从零撸一个 PC 端 Vue 的 UI 组件库（计数器组件）的完整攻略，包括如下步骤： 1. 创建项目 首先需要在本地创建一个 Vue 项目，执行以下命令： vue create my-component-library 项目创建完成后，进入项目目录并运行： cd my-component-library npm run serve 浏览器中打开…

    Vue 2023年5月27日
    00

  • vue3使用vue-router的完整步骤记录

    下面就是“Vue3使用Vue Router的完整步骤记录”的攻略。 使用Vue Router包 要使用Vue Router，首先需要安装vue-router包。可以使用npm安装，命令如下所示： npm install vue-router@next 创建路由实例 Vue Router的创建需要在Vue实例之前，因为Vue Router的实例也要在Vue实例…

    Vue 2023年5月27日
    00

  • 简述vue状态管理模式之vuex

    下面是详细讲解“简述Vue状态管理模式之Vuex”的攻略。 规划状态 在使用Vuex之前，我们需要先规划出需要管理的状态。这些状态可能是组件之间需要共享的数据，例如用户登录状态、购物车商品列表、主题等。 Vuex状态应该以应用程序的核心管理问题为基础，需要考虑的因素如下： 所有组件都需要此状态吗？ 这种状态是可变的，还是不变的？ 这种状态是从哪里来的？ 安装…

    Vue 2023年5月27日
    00

  • ant design vue嵌套表格及表格内部编辑的用法说明

    Ant Design Vue 是一个基于 Vue.js 的 UI 组件库，是蚂蚁金服开源的一款 UI 组件库，主要目的是为开发人员提供高质量的企业级 UI 组件，支持 react、vue 以及 angular 三个框架。Ant Design Vue 组件库包含众多组件，如按钮、输入框、表格、弹窗、菜单等，最为优秀的一个组件就是表格。在表格中，Ant Desi…

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