甘特图示例

最新推荐文章于 2024-08-27 16:58:38 发布
DongDong.1
最新推荐文章于 2024-08-27 16:58:38 发布
阅读量239
点赞数
文章标签：甘特图前端 javascript echarts
本文链接：https://blog.youkuaiyun.com/qq_37150922/article/details/131660678
版权
该代码示例展示了如何使用Echarts库创建一个自定义的时间轴图表，用于显示停用和辅助运行两种状态在特定时间段内的分布。通过自定义渲染方法，结合JavaScript日期对象，将时间信息映射到x轴，分类信息映射到y轴，实现了一个交互式的可视化图表。
摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >
<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <style>
    * {
      padding: 0;
      margin: 0;
    }

    html,
    body {
      height: 100vh;
      width: 100vw;
      display: flex;
      align-items: center;
      justify-content: center;
      background-color: #000;
    }

    #chart {
      height: 500px;
      width: 800px;
      background-color: #fff;
    }
  </style>
  <script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/echarts/5.4.2/echarts.min.js"></script>
</head>

<body>
  <div id="chart"></div>
</body>

</html>

<script>
  var myChart = echarts.init(document.getElementById('chart'));

  // 数据源
  var data = [{
        name: '停用',       // 数据项名称，对应legend
        categrory: '加气区策略',  // 当前分类，方便tooltip显示信息
        itemStyle: {
          color: '#FE8A75',
        },
        // value: [ xx, xx, xx, ... ]
        // 第一项对应类目轴 y轴. 第二项开始时间, 第三项结束时间, 好像还可以添加其他属性, 这里有用的有3项,最后一项是方便tooltip显示的
        value: [1, +new Date('2023-04-13 00:00'), +new Date('2023-04-13 01:00'), '加气区策略']
      },
      {
        name: '辅助运行',   // 数据项名称，对应legend
        categrory: '加气区策略',  // 当前分类，方便tooltip显示信息
        itemStyle: {
          color: '#4ACB8B',
        },
        value: [1, +new Date('2023-04-13 01:00'), +new Date('2023-04-13 03:00'), '加气区策略']
      },
      {
        name: '停用',
        categrory: '加气区策略',  // 当前分类，方便tooltip显示信息
        itemStyle: {
          color: '#FE8A75',
        },
        value: [1, +new Date('2023-04-13 03:00'), +new Date('2023-04-13 05:00'), '加气区策略']
      },

      {
        name: '辅助运行',
        categrory: '加气区策略',  // 当前分类，方便tooltip显示信息
        itemStyle: {
          color: '#4ACB8B',
        },
        value: [1, +new Date('2023-04-13 05:00'), +new Date('2023-04-13 12:00'), '加气区策略']
      },
      {
        name: '辅助运行',
        categrory: '加气区策略',  // 当前分类，方便tooltip显示信息
        itemStyle: {
          color: '#4ACB8B',
        },
        value: [1, +new Date('2023-04-13 13:00'), +new Date('2023-04-13 15:00'), '加气区策略']
      },
      {
        name: '停用',
        categrory: '加气区策略',  // 当前分类，方便tooltip显示信息
        itemStyle: {
          color: '#FE8A75',
        },
        value: [1, +new Date('2023-04-13 15:00'), +new Date('2023-04-13 17:00'), '加气区策略']
      },
      {
        name: '辅助运行',
        categrory: '加气区策略',  // 当前分类，方便tooltip显示信息
        itemStyle: {
          color: '#4ACB8B',
        },
        value: [1, +new Date('2023-04-13 17:00'), +new Date('2023-04-13 19:00'), '加气区策略']
      },
      {
        name: '辅助运行',
        categrory: '加气区策略',  // 当前分类，方便tooltip显示信息
        itemStyle: {
          color: '#4ACB8B',
        },
        value: [1, +new Date('2023-04-13 19:00'), +new Date('2023-04-13 22:00'), '加气区策略']
      },
      {
        name: '停用',
        categrory: '加气区策略',  // 当前分类，方便tooltip显示信息
        itemStyle: {
          color: '#FE8A75',
        },
        value: [1, +new Date('2023-04-13 22:00'), +new Date('2023-04-13 24:00'),'加气区策略']
      },

      {
        name: '辅助运行',
        categrory: '加油区策略',  // 当前分类，方便tooltip显示信息
        itemStyle: {
          color: '#4ACB8B',
        },
        value: [0, +new Date('2023-04-13 23:00'), +new Date('2023-04-13 24:00'), '加油区策略']
      },

      {
        name: '辅助运行',
        categrory: '加油区策略',  // 当前分类，方便tooltip显示信息
        itemStyle: {
          color: '#4ACB8B',
        },
        value: [0, +new Date('2023-4-13 01:00'), +new Date('2023-4-13 02:00'), '加油区策略']
      },
      {
        name: '停用',
        categrory: '罩棚灯照明策略',  // 当前分类，方便tooltip显示信息
        itemStyle: {
          color: '#FE8A75',
        },
        value: [2, +new Date('2023-4-13 04:00'), +new Date('2023-4-13 08:00'), '罩棚灯照明策略']
      },
    ]
    // y轴数据
    var categories = ['加油区策略', '加气区策略', '罩棚灯照明策略', '生活区策略', '广告标识节能策略']

    // 自定义渲染方法
    // params：包含了当前数据信息和坐标系的信息。
    // api：是一些开发者可调用的方法集合。
    function renderItem(params, api) {
      console.log('渲染项params---', params);
      console.log('渲染项api---', api);
      console.log('api.value(0---', api.value(0));
      // 取出data.value中第一个维度的值
      // 如: value: [0, +new Date('2023-4-13 04:00'), +new Date('2023-4-13 08:00')]. 那么 categoryIndex 就是 0
      // 同理 value: [1, +new Date('2023-4-13 04:00'), +new Date('2023-4-13 08:00')]. 那么 categoryIndex 就是 1
      var categoryIndex = api.value(0);

      // api.coord 坐标转换
      // start: 开始坐标, 将开始时间和结束时间值, 转换为坐标轴上的点
      var start = api.coord([api.value(1), categoryIndex]);
      var end = api.coord([api.value(2), categoryIndex]);

      //  api.size(...) 取得坐标系上一段数值范围对应的长度
      // 给定数据范围，映射到坐标系上后的长度。
      // 官方注解: 例如，cartesian2d中，api.size([2, 4]) 返回 [12.4, 55]，表示 x 轴数据范围为 2 映射得到长度是 12.4，y 轴数据范围为 4 时应设得到长度为 55。
      // 不明白
      var height = api.size([0, 1])[1] * 0.6;

      //使用graphic图形元素组件，绘制矩形
      //clipRectByRect方法，在绘制矩形时，如果矩形大小超出了当前坐标系的包围盒，则裁剪这个矩形
      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',

          // 表示 shape 中所有属性都开启过渡动画。
          // 在自定义系列中，当 transition 没有指定时，'x' 和 'y' 会默认开启过渡动画。如果想禁用这种默认，可设定为空数组：transition: []
          // 这里我试了加不加好像都没变化???
          transition: 'shape',

          //具体形状
          shape: rectShape,

          // 样式， 这里使用定义的颜色，不指定fill
          style: api.style()

          // 如果指定颜色，需要使用fill
          // style: api.style({
          //   fill: '#AACCF9'
          // })
        }
      );
    }
    
    var options = {
          tooltip: {
            trigger: 'axis',    // 整行触发， 不指定则单个触发，只能显示某个区块的信息
            // 这种只能显示当前鼠标触发事件的项
            // formatter: function (params) {
            //   console.log('params', params);
            //   return `${params.marker}${params.name}<br>
            //           ${new Date(params.value[1]).toLocaleString()} - ${new Date(params.value[2]).toLocaleString()}
            //         `
            // }

            // 显示全部
            formatter: function (params) {
              // 按开始时间排序
              let sort = params.sort( (a, b) => {
                let aValue = a.value[1]
                let bValue = b.value[1]
                if(aValue < bValue) {
                  return -1
                }else {
                  return 1
                }
              })
              let str = `<div>${params[0].axisValue}</div>`
              for (let i = 0; i < params.length; i++) {
                let {value, marker, seriesName} = params[i]
                str +=
                  `<div>
                    ${marker} ${seriesName}</br>
                    <span>${new Date(value[1]).toLocaleString()} - ${new Date(value[2]).toLocaleString()}</span>
                  </div>`
              }
              return str
            }
          },
          grid: {
            left: 120
          },
          legend: {
            show: true,
            data: ['停用', '辅助运行']
          },
          xAxis: {
            type: 'time',
            position: 'top',
            show: true,
            // 设置坐标轴指示器
            axisPointer: {
              type: 'shadow'
            },
            axisLabel: {    // 刻度值
              formatter: function (val) {
                return new Date(val).toLocaleString() // 格式化
              },
              color: '#333',
              rotate: -8    // 设置旋转角度，文字重叠
            },
            axisLine: {   // x轴线段
              show: true,
              lineStyle: {
                type: 'dashed',
                color: '#CCCCCC'
              }
            },
            axisTick: {   // 显示刻度线
              show: true
            },
          },
          yAxis: {
            data: categories,
            axisTick: {
              show: false
            },
            axisLine: {    // y轴颜色
              show: true,
              lineStyle: {
                color: '#CCCCCC'
              }
            },
            axisLabel: {    // 文字颜色
              textStyle: {
                color: '#333',
              }
            },
            splitLine: {
              // 修改背景线条样式
              show: true, // 是否展示
              lineStyle: {
                type: "dashed", //线条样式，默认是实现，dashed是虚线
              }
            },
          },
          series: [
            {
              name: '辅助运行',
              type: 'custom',
              renderItem: renderItem,   // 自定义渲染
              itemStyle: {
                opacity: 1,
                color: '#4ACB8B' // 指定辅助运行系列的颜色
              },

              // 必须. 定义数据映射, x 轴使用data中 index 为 1,2的数据,也就是开始时间,结束时间. y轴使用0的数据,就是 "加油区策略 / 加气区策略 / ..."
              encode: {
                x: [1, 2],
                y: 0
              },
              data: data.filter(item => item.name === '辅助运行')
            },
            {
              name: '停用',
              type: 'custom',
              renderItem: renderItem,
              itemStyle: {
                opacity: 1,
                color: '#FE8A75' // 指定停用系列的颜色
              },
              // 必须. 定义数据映射, x 轴使用data中 index 为 1,2的数据,也就是开始时间,结束时间. y轴使用0的数据,就是 "加油区策略 / 加气区策略 / ..."
              encode: {
                x: [1, 2],
                y: 0
              },
              data: data.filter(item => item.name === '停用')
            }
          ]
      }

      myChart.setOption(options);
</script>