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

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

• Vue
yizhihongxing

下面我将详细讲解“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-cli3项目配置eslint代码规范的完整步骤

    下面我会给出“vue-cli3项目配置eslint代码规范的完整步骤”的完整攻略，具体步骤如下： 步骤一：创建vue-cli3工程 首先需要创建一个vue-cli3工程，执行命令 vue create <project-name> 即可创建一个名为 <project-name> 的vue-cli3工程。这一步可以按照官方文档进行创建。…

    Vue 2023年5月27日
    00

  • Vue3+TS+Vite+NaiveUI搭建一个项目骨架实现

    下面我来详细讲解“Vue3+TS+Vite+NaiveUI搭建一个项目骨架实现”的完整攻略。 准备工作 在开始搭建项目骨架之前，我们需要先完成一些准备工作： 确认已安装 Node.js 安装 Vue CLI 4 或更高版本：npm install -g @vue/cli 创建项目：vue create my-project 安装 Vite Vite 是一个新…

    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时间格式总结以及转换方法详解

    Vue时间格式总结以及转换方法详解 在Vue项目中，经常需要对时间进行格式化以及转换，本篇文章将总结Vue中常用的时间格式化方式，并提供对应的代码示例。 1. 使用moment.js进行时间格式化 moment.js是一款非常好用的JavaScript时间处理库，可以轻松实现时间的格式化、计算、转换等功能。 安装moment.js npm install m…

    Vue 2023年5月27日
    00

  • Vue父子组件通信全面详细介绍

    我来为你详细讲解Vue父子组件通信的攻略。 什么是Vue组件通信 在Vue中，组件是指封装了HTML、CSS和JavaScript的功能单元，用于构建Web应用。组件化开发可以帮助开发者更好地管理和组织复杂的UI，提高代码复用性。 Vue组件通信是指在Vue应用中，不同组件之间进行数据传递和事件触发的过程。由于Vue使用了单向数据流的原则，所以Vue组件通信…

    Vue 2023年5月29日
    00

  • 在vue项目中优雅的使用SVG的方法实例详解

    让我来为你详细讲解一下在Vue项目中优雅地使用SVG的方法。 在Vue项目中优雅地使用SVG的方法 什么是SVG？ SVG（Scalable Vector Graphics）是一种基于XML语法的矢量图形格式，用于描述二维图形和绘图程序。相对于传统的像素图形格式（如JPG、PNG、BMP等），SVG图像拥有无限的放大缩小比例，因此可以良好地适应各种分辨率的设…

    Vue 2023年5月28日
    00

  • Vue开发之watch监听数组、对象、变量操作分析

    当我们在Vue开发时，通常需要监听数据的变化，以便根据数据变化来进行相应的操作。在Vue中，我们可以通过watch属性来实现对数据的监听。本文将详细讲解如何使用Vue的watch属性来监听数组、对象、变量的操作。 监听数组的操作 我们可以通过设置Vue实例的watch属性，来监听数组的操作： data() { return { list: [1, 2, 3]…

    Vue 2023年5月28日
    00

  • vue组件库的在线主题编辑器的实现思路

    让我来详细讲解一下“Vue组件库的在线主题编辑器的实现思路”的完整攻略。 简介 Vue组件库的在线主题编辑器可以让用户在浏览器中快速地在前端组件之间切换不同的主题，实现对组件样式的高效编辑和定制。实现思路主要分为以下几个步骤： 构建基于Vue的组件库 实现主题JSON文件的存储和读取 实现在浏览器中编辑主题的可视化交互界面 实现主题对组件的动态更换 下面我针…

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