Echart甘特图实现效果

一、常用属性特性

1. 坐标轴反转
2. 坐标轴轴间隙
3. 坐标轴箭头
4. 坐标轴名称

二、Echart-实例图

echart甘特图

因为echarts官网并没有提供类似甘蔗图这样的Demo实例,研究了相关的图表并做稍作处理之后,得到如下:

效果图:

项目需求

根据后端小伙伴返回的List数据源,动态生成甘蔗图.

const stabData = [
      // todo 获取后端数据
      {
        index: 1,
        processIndex: 6,
        processName: 'coding',
        desc: '开启机器开关',
        type: 'manual',
        manual: 4.13,
        auto: null,
        wait: null,
        walktime: null,
      },
      {
        index: 2,
        processIndex: 6,
        processName: 'coding',
        desc: '等待机器启动',
        type: 'auto',
        manual: null,
        auto: 13.75,
        wait: null,
        walktime: null,
      },
      {
        index: 3,
        processIndex: null,
        processName: null,
        desc: '等待',
        type: 'wait',
        manual: null,
        auto: null,
        wait: 3.23,
        walktime: null,
      },
      {
        index: 4,
        processIndex: 6,
        processName: 'coding',
        desc: '放入原材料',
        type: 'manual',
        manual: 5.5,
        auto: null,
        wait: null,
        walktime: null,
      },
      {
        index: 5,
        processIndex: 6,
        processName: 'coding',
        desc: '机器运转',
        type: 'auto',
        manual: null,
        auto: 10.13,
        wait: null,
        walktime: null,
      },
      {
        index: 6,
        processIndex: null,
        processName: null,
        desc: '走动',
        type: 'walktime',
        manual: null,
        auto: null,
        wait: null,
        walktime: 4.2,
      },
      {
        index: 7,
        processIndex: 7,
        processName: 'LT',
        desc: '关闭机器',
        type: 'manual',
        manual: 5.2,
        auto: null,
        wait: null,
        walktime: null,
      },
      {
        index: 8,
        processIndex: null,
        processName: null,
        desc: '走动',
        type: 'walktime',
        manual: null,
        auto: null,
        wait: null,
        walktime: 3.2,
      },
    ];

 /**
  *  calculateEcharts 动态计算甘蔗图
  *  @param {minCount}  最小统计值
  *  @param {maxCount}  最大统计值
  *  @return {array} 返回series数组
   */
  calculateEcharts = (minCount, maxCount) => {
    const obj = this.stabData;
    const series = [];
    let lastLength = 0;
    let yAxisMax = 0;
    obj.forEach((item, index) => {
      const { type } = item;
      const willReactLength = item[type];
      const data = [
        [lastLength, Number(index + 1).toFixed(2)],
        [Number(lastLength + willReactLength).toFixed(2), Number(index + 1).toFixed(2)]
      ];
      yAxisMax = index + 5; // y轴最大值定义，默认值取当前最大值+5
      if (type === 'auto') {
        const temp = {
          name: `${item.processName}: ${item.desc}`,
          type: 'line',
          data,
          lineStyle: {
            normal: {
              color: 'green',
              width: 4,
              type: 'dashed',
            },
          },
        };
        series.push(temp);
      } else {
        const temp = {
          name: `${item.processName}: ${item.desc}`,
          type: 'line',
          data,
        };
        series.push(temp);
        lastLength = lastLength + willReactLength;
      }
    });
    this.createMaxLine(series, minCount, yAxisMax);
    this.createMaxLine(series, maxCount, yAxisMax);
    alert('series' + JSON.stringify(series));
    console.log('====lr===', series, ':::::series');
    return series;
  };
  
  /**
  *  createMaxLine 绘制值极竖线
  *  @param {target} 数组源
  *  @param {value}  X轴-刻度值
  *  @param {yAxisMax}  Y轴-刻度值
   */
  createMaxLine = (target, value, yAxisMax) => {
    const data = [[value, 0], [value, yAxisMax]];
    const temp = {
      name: `最大值`,
      type: 'line',
      data,
    };
    target.push(temp);
  };

源代码

option = {
    title: {
        text: 'Step Line'
    },
    tooltip: {
        trigger: 'axis'
    },
    grid: {
        left: '3%',
        right: '4%',
        bottom: '5%',
        containLabel: true
    },
    toolbox: {
        feature: {
            saveAsImage: {}
        },
    },
    xAxis: {
        name: '时间(秒)',
        top: 5,
        axisLine: {
            symbol: ['none', 'arrow']
        },
        axisLabel: {
            formatter: '{value} 秒'
        },
        boundaryGap: true,
        position: 'top',
        type: 'value',
        data: ['0', '1', '2', '3', '4', '5', '6','7', '8', '9', '10', '11', '12', '13']
    },
    yAxis: {
        axisLabel: {
            formatter: '第{value}步'
        },
        inverse: true,
        type: 'value',
        name: '工序步骤'
    },
    series: [
    {
        "name": "coding: 开启机器开关",
        "type": "line",
        "data": [
            [
                0,
                1
            ],
            [
                4.13,
                1
            ]
        ]
    },
    {
        "name": "coding: 等待机器启动",
        "type": "line",
        "data": [
            [
                4.13,
                2
            ],
            [
                17.88,
                2
            ]
        ],
        "lineStyle": {
            "normal": {
                "color": "green",
                "width": 4,
                "type": "dashed"
            }
        }
    },
    {
        "name": "null: 等待",
        "type": "line",
        "data": [
            [
                4.13,
                3
            ],
            [
                7.359999999999999,
                3
            ]
        ]
    },
    {
        "name": "coding: 放入原材料",
        "type": "line",
        "data": [
            [
                7.359999999999999,
                4
            ],
            [
                12.86,
                4
            ]
        ]
    },
    {
        "name": "coding: 机器运转",
        "type": "line",
        "data": [
            [
                12.86,
                5
            ],
            [
                22.990000000000002,
                5
            ]
        ],
        "lineStyle": {
            "normal": {
                "color": "green",
                "width": 4,
                "type": "dashed"
            }
        }
    },
    {
        "name": "null: 走动",
        "type": "line",
        "data": [
            [
                12.86,
                6
            ],
            [
                17.06,
                6
            ]
        ]
    },
    {
        "name": "LT: 关闭机器",
        "type": "line",
        "data": [
            [
                17.06,
                7
            ],
            [
                22.259999999999998,
                7
            ]
        ]
    },
    {
        "name": "null: 走动",
        "type": "line",
        "data": [
            [
                22.259999999999998,
                8
            ],
            [
                25.459999999999997,
                8
            ]
        ]
    },
    {
        "name": "最小值",
        "type": "line",
        "data": [
            [
                22.99,
                0
            ],
            [
                22.99,
                10
            ]
        ]
    },
    {
        "name": "最大值",
        "type": "line",
        "data": [
            [
                25.46,
                0
            ],
            [
                25.46,
                10
            ]
        ]
    }
],
};