【Echarts】custom自定义图表实现甘特图

于 2024-08-15 11:02:12 发布
阅读量577 收藏 3
点赞数 1
文章标签： echarts 甘特图 前端
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_43361722/article/details/141216405
版权

效果图

在这里插入图片描述
主要注意点：
1、右上角图例visualMap实现
2、visualMap增加formatter
3、series使用custom自定义图表，encode解析四维数组。核心是renderItem方法，必填项，且需要注意要全部定义在options里面！！！！定义在外面，options只留方法名的话，虽然echarts示例中可以粘贴运行，但是一旦移植到项目中无法正常渲染，param和api传递会有问题。项目中要写成renderItem:(params, api) =>{全抄过来}

下面两种示例echarts中粘贴即可运行

动态数据版

var data = [];
var dataCount = 3;
var startTime = +new Date();
var categories = ['服务器调试', 'app流程界面', '安卓程序编码','ios程序编码'];
var types = [
  { name: '项目1', color: '#7b9ce1' },
  { name: '项目2', color: '#bd6d6c' },
  { name: '项目3', color: '#75d874' },
  { name: '项目4', color: '#e0bc78' }
];
// Generate mock data
categories.forEach(function (category, index) {
  var baseTime = startTime;
  for (var i = 0; i < dataCount; i++) {
    var typeItem = types[Math.round(Math.random() * (types.length - 1))];
    var duration = Math.round(Math.random() * 10000);
    data.push({
      name: typeItem.name,
      value: [index, baseTime, (baseTime += duration), duration],
      itemStyle: {
        normal: {
          color: typeItem.color
        }
      }
    });
    baseTime += Math.round(Math.random() * 2000);
  }
})

//  项目中使用时renderItem要挪到options里面
function renderItem(params, api) {
  var categoryIndex = api.value(0);
  var start = api.coord([api.value(1), categoryIndex]);
  var end = api.coord([api.value(2), categoryIndex]);
  var height = api.size([0, 1])[1] * 0.6;
  var rectShape = echarts.graphic.clipRectByRect(
    {
      x: start[0],
      y: start[1] - height / 2,
      width: end[0] - start[0],
      height: height
    },
    {
      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: api.style()
    }
  );
}

option = {
  visualMap:{ // 视觉映射
    type: 'piecewise', // 'continuous'（连续型）'piecewise'（分段型）。
    splitNumber: 4, // 数据分割几份
    left: "right", // 位置
    top: 0, // 边距
    orient: "horizontal", // 布局朝向 'horizontal'（横向）'vertical'（纵向）
    // text:['High', 'Low'], // 两端文本
    min: 0, // 最小区间值
    max: 200, // 最大区间值
    itemHeight: 10,
    itemWidth: 10,
    align: 'left', // 图例位置
    inverse: true, // 控制视觉映射组件的排列方向, 当设置为true时，会使视觉映射组件的排列方向颠倒，即最小值显示在最右边，最大值显示在最左边。
    pieces: [ // 使用 pieces 属性来精确定义每个分段的取值范围和颜色
        { min: 0, max: 19, label: "项目1", color: '#7b9ce1' },
        { min: 20, max: 39, label: "项目2", color: '#bd6d6c' },
        { min: 40, max: 69, label: "项目3", color: '#75d874' },
        { min: 60, max: 89, label: "项目4", color: '#e0bc78' },
    ] 
  }, 
  tooltip: {
    formatter: function (params) {
      let str = `${params.marker + params.name}<br/>
			        start：${params.value[1]}<br/>
			        end：${params.value[2]}<br/>
			        value：${params.value[3]}<br/>`
        return str
    }
  },
  title: {
                show: true,
                text: '图表标题',
                subtext: '',
                left: '5%',
                top: '5%',
                textStyle: {
                    fontSize: 14,
                    height: 40
                },
                subtextStyle: {
                    fontSize: 10
                }
            },
  dataZoom: [
    {
      type: 'slider',
      filterMode: 'weakFilter',
      showDataShadow: false,
      top: 400,
      labelFormatter: ''
    },
    {
      type: 'inside',
      filterMode: 'weakFilter'
    }
  ],
  grid: {
    top: '10%',
    bottom: '15%',
    left: '15%',
    right: '10%'
  },
  xAxis: {
    min: startTime,
    scale: true,
    axisLabel: {
      formatter: function (val) {
        return Math.max(0, val - startTime) + ' ms';
      }
    }
  },
  yAxis: {
    data: categories,
    axisTick: { show: false },
      splitLine: { show: false },
      axisLine: { show: false },
  },
  series: [
    {
      type: 'custom',
      // 注意！！！！项目使用中要写成：renderItem:(params, api) =>{全抄过来}
      renderItem: renderItem, 
      itemStyle: {
        opacity: 0.8
      },
      encode: {
        x: [1, 2],
        y: 0,
      },
      data: data
    }
  ]
};

静态数据版

减去很多配置项,静态data更加直观

function renderItem(params, api) {
  var categoryIndex = api.value(0);
  var start = api.coord([api.value(1), categoryIndex]);
  var end = api.coord([api.value(2), categoryIndex]);
  var height = api.size([0, 1])[1] * 0.6;
  var rectShape = echarts.graphic.clipRectByRect(
    {
      x: start[0],
      y: start[1] - height / 2,
      width: end[0] - start[0],
      height: height
    },
    {
      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: api.style()
    }
  );
}
option = {
            tooltip: {
                show: true,
                trigger: 'item',
            },
            dataZoom: [
                {
                    type: 'slider',
                    filterMode: 'weakFilter',
                    showDataShadow: false,
                    top: 400,
                    labelFormatter: ''
                },
                {
                    type: 'inside',
                    filterMode: 'weakFilter'
                }
            ],
            xAxis: {
                min: 1723552291842,
                scale: true,
                axisLabel: {}
            },
            yAxis: {
                data: [
                    '服务器调试',
                    'app流程界面',
                    '安卓程序编码',
                    'ios程序编码'
                ],
                axisTick: {
                    show: false
                },
                splitLine: {
                    show: false
                },
                axisLine: {
                    show: false
                }
            },
            series: [
                {
                    'type': 'custom',
                    renderItem: renderItem,
                    'itemStyle': {
                        'opacity': 0.8
                    },
                    'encode': {
                        'x': [
                            1,
                            2
                        ],
                        'y': 0
                    },
                    'data': [
                        {
                            'name': '项目2',
                            'value': [
                                0,
                                1723552291842,
                                1723552297017,
                                5175
                            ],
                            'itemStyle': {
                                'normal': {
                                    'color': '#bd6d6c'
                                }
                            }
                        },
                        {
                            'name': '项目2',
                            'value': [
                                0,
                                1723552298382,
                                1723552300321,
                                1939
                            ],
                            'itemStyle': {
                                'normal': {
                                    'color': '#bd6d6c'
                                }
                            }
                        },
                        {
                            'name': '项目2',
                            'value': [
                                0,
                                1723552300586,
                                1723552304290,
                                3704
                            ],
                            'itemStyle': {
                                'normal': {
                                    'color': '#bd6d6c'
                                }
                            }
                        },
                        {
                            'name': '项目3',
                            'value': [
                                1,
                                1723552291842,
                                1723552295815,
                                3973
                            ],
                            'itemStyle': {
                                'normal': {
                                    'color': '#75d874'
                                }
                            }
                        },
                        {
                            'name': '项目4',
                            'value': [
                                1,
                                1723552296867,
                                1723552298584,
                                1717
                            ],
                            'itemStyle': {
                                'normal': {
                                    'color': '#e0bc78'
                                }
                            }
                        },
                        {
                            'name': '项目3',
                            'value': [
                                1,
                                1723552299537,
                                1723552305343,
                                5806
                            ],
                            'itemStyle': {
                                'normal': {
                                    'color': '#75d874'
                                }
                            }
                        },
                        {
                            'name': '项目3',
                            'value': [
                                2,
                                1723552291842,
                                1723552294548,
                                2706
                            ],
                            'itemStyle': {
                                'normal': {
                                    'color': '#75d874'
                                }
                            }
                        },
                        {
                            'name': '项目3',
                            'value': [
                                2,
                                1723552294711,
                                1723552301769,
                                7058
                            ],
                            'itemStyle': {
                                'normal': {
                                    'color': '#75d874'
                                }
                            }
                        },
                        {
                            'name': '项目2',
                            'value': [
                                2,
                                1723552302106,
                                1723552310635,
                                8529
                            ],
                            'itemStyle': {
                                'normal': {
                                    'color': '#bd6d6c'
                                }
                            }
                        },
                        {
                            'name': '项目2',
                            'value': [
                                3,
                                1723552291842,
                                1723552301649,
                                9807
                            ],
                            'itemStyle': {
                                'normal': {
                                    'color': '#bd6d6c'
                                }
                            }
                        },
                        {
                            'name': '项目2',
                            'value': [
                                3,
                                1723552301795,
                                1723552303283,
                                1488
                            ],
                            'itemStyle': {
                                'normal': {
                                    'color': '#bd6d6c'
                                }
                            }
                        },
                        {
                            'name': '项目3',
                            'value': [
                                3,
                                1723552304712,
                                1723552309047,
                                4335
                            ],
                            'itemStyle': {
                                'normal': {
                                    'color': '#75d874'
                                }
                            }
                        }
                    ]
                }
            ]
        }
小鱼小鱼干
关注
ECharts 实现甘特图实例（自定义生成）
Ajax的博客
08-30 8343
需求:公司OA，要求根据用户输入的时间段和项目组生成该项目组这段时间研发进度的甘特图效果： 描述: 甘特图y轴是根据搜索条件（时间段和研发组）查询数据库，查询这段时间该 项目组研发的项目，x轴根据时间段生成刻度间距，但保持为七个刻度。代码：<html lang="en"> <head> <meta charset="UTF-8"> <title>Title</ti
echarts 柱状图 甘特图
Autumn_yun的博客
10-21 791
柱状图 甘特图 echarts
使用 Echarts 实现项目进度甘特图
未名部落格
11-22 4万+
Echarts 功能十分强大，可以实现多种图表效果，下面简单介绍下最近使用Eharts 实现的一个项目进度甘特图。 下面是实现的效果： 目录 一.概览 Echarts 基本内容 1.官网文档 2.查看示例 二.需求分析 1.数据系列（series） 2.标线 （markLine） 3.数据对象结构 4.“超时”、“按时”划分 三.引入并配置 Echarts 1...
echarts 甘特图组件
放飞的博客
07-17 470
由于业务的需要，在echarts基础上，二次封装了甘特图组件来满足业务的需要。
通过echarts的custom自定义系统，渲染任务执行甘特图
qq_44727563的博客
05-12 649
项目中有个图表比较难搞，一开始没什么头绪，后来百度了挺久，结合一些大佬发的信息，总算搞出来了，先看一下效果图。
Echarts实现甘特图功能（完整实现代码）
爬不动的猫的博客
12-12 2597
主要是业务中要实现类似甘特图的完成进度功能
echarts绘制甘特图
Run_youngman的博客
08-03 4879
本文介绍了使用echarts实现甘特图效果的实现思路分析以及部分技术方案
echarts 甘特图
最新发布
weixin_43965881的博客
03-12 1178
【代码】echarts 甘特图。
echarts实现甘特图
热门推荐
yixu0534的博客
09-20 5万+
参考文档：http://gallery.echartsjs.com/editor.html?c=xryzwi7fVl 实现效果： 1、引入js文件： <script type="text/javascript" src="jQuery存放路径/jquery.min.js"></script> <script type="text/javascrip...
Vue 中使用 Echarts 实现项目进度甘特图
tanqin的博客
10-16 1万+
Vue 中使用 Echarts 实现项目进度甘特图
甘特图.zip_C# 实现甘特图_C#画甘特图_图表_甘特图
07-14
实现甘特图表的绘制和显示，对于需要的人很有借鉴价值
echarts2实现双柱的甘特图_echarts vue 甘特图实现
weixin_42436482的博客
01-12 376
厂家机型故障分析.yn-main-wrapper__cloumn{flex:1;display:flex;flex-direction: column;}.yn-br__graph{flex:1;}.yn-br__graph:first-child {display:flex;}.yn-br__graph-left{flex:1;box-sizing:border-box;position:rel...
echarts2实现双柱的甘特图_echarts绘制甘特图
weixin_39623273的博客
12-20 561
在setoption之后添加这段代码：window.addEventListener('resize', function () {myChart.resize();});图表就能随着窗口大小，自动适应，且支持一页多图。效果图：html代码：特别注意点：xAxis : [{type : 'value',splitNumber: legend.length-1,max: legend.length-...
echarts 自定义甘特图
weixin_45454281的博客
07-27 3193
echarts 甘特图
echarts甘特图
weixin_47902184的博客
08-09 4168
echarts甘特图，工单甘特图
echarts_自定义甘特图
lianflower的博客
02-13 1万+
效果展示： echarts版本：4.6.0 全部代码： <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <script src="../js/echarts.js"></script> <title>自...
Echarts甘特图
weixin_34250434的博客
12-04 352
2019独角兽企业重金招聘Python工程师标准>>> ...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值