Vue 中使用 Echarts 实现项目进度甘特图

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

简易版

1. 项目中安装 echarts

npm i echarts

2. 实现甘特图

<template><div id="app"><!-- Echarts 图表 --><div ref="progressChart" class="progressChart"></div></div>
</template><script>
import * as echarts from 'echarts'
export default {name: 'App',mounted() {this.initChart()},methods: {/* 初始化图表 */initChart() {const progressChart = echarts.init(this.$refs.progressChart)const option = {// 鼠标移入提示工具tooltip: {trigger: 'axis',formatter(params) {if (params[1].data && params[0].data) {return `<div>开始时间：${params[1].data}</div>` + `<div>结束时间：${params[0].data}</div>`} else {return ''}},axisPointer: {type: 'shadow'}},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}},yAxis: {inverse: true, // y 轴数据翻转，该操作是为了保证项目一放在最上面，项目七在最下面axisTick: {// 隐藏刻度show: false},axisLine: {// 隐藏轴线show: false},data: ['项目一', '项目二', '项目三', '项目四', '项目五', '项目六', '项目七']},series: [{name: '持续时间',type: 'bar',stack: 'duration',itemStyle: {color: '#007acc',borderColor: '#fff',borderWidth: 1},zlevel: -1,data: ['2021-01-31', '2021-02-25', '2021-03-25', '2021-04-01', '2021-04-10', '2021-05-25', '2021-07-25'] // 结束时间},{name: '持续时间',type: 'bar',stack: 'duration', // 堆叠标识符，同个类目轴上系列配置相同的 stack 值可以堆叠放置itemStyle: {color: '#fff'},zlevel: -1, // zlevel 大的 Canvas 会放在 zlevel 小的 Canvas 的上面z: 9, // z值小的图形会被z值大的图形覆盖，z相比zlevel优先级更低，而且不会创建新的 Canvasdata: ['2021-01-01', '2021-01-31', '2021-02-25', '2021-03-25', '2021-04-01', '2021-04-10', '2021-05-25'] // 开始时间}]}progressChart.setOption(option)// 浏览器窗口大小变化，图表大小自适应window.addEventListener('resize', () => {progressChart.resize()})}}
}
</script><style scoped>
#app {display: flex;justify-content: center;align-items: center;height: 100vh;
}
.progressChart {width: 60%;height: 420px;border: 1px solid #aaa;
}
</style>

3. 效果展示

附加效果

说明：

附加效果都是在简易版的基础上改进完成的。
具体修改位置需看代码前的 +、- 号标识符。+ 为新增的代码，- 为删除的代码。

效果一：各柱子指定不同颜色

      const option = {legend: {-          data: ['持续时间'],
+          data: [
+            {+            name: '持续时间',
+              itemStyle: {+               color: '#000'
+            }
+        }
+        ], // 给 legend 图例自定义颜色align: 'auto',top: 'bottom'},
+      color: ['red', 'orange', 'yellow', 'green', 'blue', 'indigo', 'purple'], // 自定义调色盘的颜色series: [{name: '持续时间',type: 'bar',stack: 'duration',
+           colorBy: 'data', // 让数据项 data 每一项的颜色根据调色盘中的颜色按顺序进行分配itemStyle: {-           //  color: '#007acc', // 这一行固定的颜色值需要删除或注释borderColor: '#fff',borderWidth: 1},zlevel: -1,data: ['2021-01-31', '2021-02-25', '2021-03-25', '2021-04-01', '2021-04-10', '2021-05-25', '2021-07-25']}]}

效果展示

效果二：柱子右侧添加自定义文字

+      const startTimeData = ['2021-01-01', '2021-01-31', '2021-02-25', '2021-03-25', '2021-04-01', '2021-04-10', '2021-05-25']
+      const endTimeData = ['2021-01-31', '2021-02-25', '2021-03-25', '2021-04-01', '2021-04-10', '2021-05-25', '2021-07-25']const option = {grid: {containLabel: true,show: false,
-          right: 80,
+          right: 140, // 增加 grid 距离右侧的距离以显示完整文字信息left: 40,bottom: 40,top: 20,backgroundColor: '#fff'},series: [{// ...
+            label: {+              show: true,
+              position: 'right',
+              color: '#999',
+             formatter: params => {+               console.log(params.value)
+                const findIndex = endTimeData.findIndex(item => item === params.value)
+                const startTime = startTimeData[findIndex]
+                return `开始时间：${startTime}\n\n结束时间：${params.value}`
+              } // 格式化 label
+            },zlevel: -1,
-           data: ['2021-01-31', '2021-02-25', '2021-03-25', '2021-04-01', '2021-04-10', '2021-05-25', '2021-07-25'] // 结束时间
+           data: endTimeData // 结束时间},{// ...zlevel: -1, // zlevel 大的 Canvas 会放在 zlevel 小的 Canvas 的上面z: 9, // z值小的图形会被z值大的图形覆盖，z相比zlevel优先级更低，而且不会创建新的 Canvas
-           data: ['2021-01-01', '2021-01-31', '2021-02-25', '2021-03-25', '2021-04-01', '2021-04-10', '2021-05-25'] // 开始时间
+           data: startTimeData // 开始时间}]}

效果展示

Vue 中使用 Echarts 实现项目进度甘特图相关推荐

vue中使用Echarts绘制K线图
一.需求问题在开发项目中,我们可能会遇到这样的需求.在vue中使用Echarts绘制K线图,进行数据分析.下面是一个简单的K线图绘制,数据是伪造的,虽然不多,但是能够实现大致的K线图效果. 二.需求 ...
vue中使用echarts做一个雷达图
在vue中使用echarts做一个雷达图效果如图首先 1.安装echarts npm install echarts -S 2.使用全局使用在main.js中 // 引入echarts imp ...
使用 Echarts 实现项目进度甘特图
Echarts 功能十分强大,可以实现多种图表效果,下面简单介绍下最近使用 Eharts 实现的一个项目进度甘特图. 下面是实现的效果: 目录一.概览 Echarts 基本内容 1.官网文档 2.查 ...
vue中使用echarts绘柱形图+折线图
一.完成后效果图二..vue文件完整代码 <template><divid="myMaxbar":style ...
vue 中使用echarts 画对比折线图
第一步:npm install echarts -S 安装第二步:在main.js 全局引入 import echarts from 'echarts' Vue.prototype.$echarts ...
在vue中，Echarts雷达图中indicator的点击事件，不能改变data中的值的解决方法
在vue中,Echarts雷达图中indicator的点击事件,不能改变data中的值的解决方法参考文章: (1)在vue中,Echarts雷达图中indicator的点击事件,不能改变data中的 ...
Vue中引入echarts的步骤，折线图、柱状图、饼图的常用配置项
vue中引入echarts 一.安装echarts 二.引入echarts 1.全局引入 2.局部引入三.vue中使用echarts 1.准备好函数 2.准备一个容器来放echarts 3.初始化容 ...
echart高级使用_Vue:在Vue中使用echarts
前言公司的项目中需要对数据做可视化处理,高级点的D3.js目前还没接触到,因此选用了大众化的Echarts, 在vue的生态系统中已经有实现好的vue-echarts,但是使用现成的就意味着必须使用 ...
vue中基于echarts和基于高德地图的两种地图下钻与上浮方式
** vue中基于echarts和基于高德地图的两种地图下钻与上浮方式 ** 基于echarts的地图下钻与上浮(浙江省为例) 第一步:在<template>中构建承载echarts的do ...

Vue 中使用 Echarts 实现项目进度甘特图

Vue 中使用 Echarts 实现项目进度甘特图

简易版

1. 项目中安装 echarts

2. 实现甘特图

3. 效果展示

附加效果

效果一：各柱子指定不同颜色

效果二：柱子右侧添加自定义文字

Vue 中使用 Echarts 实现项目进度甘特图相关推荐

最新文章

热门文章