精华内容
下载资源
问答
  • Echart甘特图实现效果

    2019-12-06 14:26:21
    echart甘蔗 因为echarts官网并没有提供类似甘蔗这样的Demo实例,研究了相关的图表并做稍作处理之后,得到如下: 效果: [外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-vBuseRmt-...

    一、常用属性特性

    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
                ]
            ]
        }
    ],
    };
    
    展开全文
  • vue echart甘特图

    2019-10-04 23:35:28
    let _this = this; let data = [ { list: [ { colorNum: 0, endTime: "2019-10-10 00:00:00", item: "墙柱", ...
     let _this = this;
          let data = [
            {
              list: [
                {
                  colorNum: 0,
                  endTime: "2019-10-10 00:00:00",
                  item: "墙柱",
                  quantity: 1960,
                  startTime: "2019-10-08 00:00:00"
                }
              ],
              plant: "墙柱"
            },
            {
              list: [
                {
                  colorNum: 1,
                  endTime: "2019-10-12 00:00:00",
                  item: "楼面",
                  quantity: 1960,
                  startTime: "2019-10-09 00:00:00"
                }
              ],
              plant: "楼面"
            },
            {
              list: [
                {
                  colorNum: 2,
                  endTime: "2019-10-10 00:00:00",
                  item: "梁",
                  quantity: 1960,
                  startTime: "2019-10-08 00:00:00"
                }
              ],
              plant: "梁"
            },
            {
              list: [
                {
                  colorNum: 3,
                  endTime: "2019-10-11 00:00:00",
                  item: "吊模",
                  quantity: 1960,
                  startTime: "2019-10-09 00:00:00"
                }
              ],
              plant: "吊模"
            },
            {
              list: [
                {
                  colorNum: 4,
                  endTime: "2019-10-10 00:00:00",
                  item: "K版",
                  quantity: 1960,
                  startTime: "2019-10-08 00:00:00"
                }
              ],
              plant: "K版"
            },
            {
              list: [
                {
                  colorNum: 5,
                  endTime: "2019-10-14 00:00:00",
                  item: "盖板",
                  quantity: 1960,
                  startTime: "2019-10-11 00:00:00"
                }
              ],
              plant: "盖板"
            },
            {
              list: [
                {
                  colorNum: 6,
                  endTime: "2019-10-13 00:00:00",
                  item: "墙柱",
                  quantity: 1960,
                  startTime: "2019-10-12 00:00:00"
                }
              ],
              plant: "墙柱"
            }
          ];
          let start_ = "2019-10-08 00:00:00",
            end_ = "2019-10-14 24:00:00"; //自定义时间
          let seriesData = [];
          let yAxisData_plant = []; //工厂名
    
          data.forEach((item, index) => {
            yAxisData_plant.push(item.plant);
            let bgColor;
            item.list.forEach((listItem, listIndex) => {
              switch (listItem.colorNum) {
                case 0:
                  bgColor = "#9446FD";
                  break;
                case 1:
                  bgColor = "#5EBD3C";
                  break;
                case 2:
                  bgColor = "#169ADC";
                  break;
                case 3:
                  bgColor = "#4BE2DA";
                  break;
                case 4:
                  bgColor = "#F5C100";
                  break;
                case 5:
                  bgColor = "#FC677A";
                  break;
                case 6:
                  bgColor = "#FF8800";
                  break;
                default:
                  bgColor = "rgba(0,187,255,.4)";
              }
              let startTime = new Date(listItem.startTime).getTime();
              let endTime = new Date(listItem.endTime).getTime();
              seriesData.push({
                name: listItem.item,
                value: [index, startTime, endTime, listItem.quantity],
                itemStyle: {
                  normal: {
                    color: bgColor
                  }
                }
              });
            });
          });
    
          let option = {
            // backgroundColor: "#26263C",
            tooltip: {
              formatter: function(params) {
                //console.log(params)
                return params.marker + params.name;
              }
            },
            grid: {
              top: 100,
              left: 150,
              right: 100,
              bottom: 50
            },
            xAxis: {
              type: "time",
              min: new Date(start_).getTime(),
              max: new Date(end_).getTime(),
              scale: true,
              position: "top",
              splitNumber: 7,
              axisLabel: {
                show: true,
                textStyle: {
                  color: "#ffffff"
                },
                interval: 0,
                margin: 15,
                fontSize: 30,
                formatter: function(value, index) {
                  var date = new Date(value);
                  var texts = [
                    date.getFullYear(),
                    date.getMonth() + 1,
                    date.getDate()
                  ].join("/");
                  return texts;
                }
              },
              axisLine: {
                show: false
              },
              splitLine: {
                show: true,
                lineStyle: {
                  color: "rgba(233,233,233,0.1)"
                }
              },
              axisTick: {
                lineStyle: {
                  color: "#fff"
                }
              }
            },
            yAxis: {
              axisLine: {
                onZero: false,
                show: false
              },
              axisLabel: {
                show: true,
                textStyle: {
                  color: "#ffffff"
                },
                fontSize: 30
              },
              splitLine: {
                show: true,
                lineStyle: {
                  color: "rgba(233,233,233,0.1)"
                }
              },
              inverse: true,
              data: yAxisData_plant
            },
            series: [
              {
                type: "custom",
                renderItem: function(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 = _this.$echarts.graphic.clipRectByRect(
                    {
                      x: start[0],
                      y: start[1] - 15,
                      width: end[0] - start[0],
                      height: 30
                    },
                    {
                      x: params.coordSys.x,
                      y: params.coordSys.y,
                      width: params.coordSys.width,
                      height: params.coordSys.height
                    }
                  );
    
                  return (
                    rectShape && {
                      type: "rect",
                      shape: rectShape,
                      style: api.style()
                    }
                  );
                },
                encode: {
                  x: [1, 2],
                  y: 0
                },
                data: seriesData
              }
            ]
          };
          let myChart = this.$echarts.init(this.$refs.ganttChart);
          myChart.setOption(option);
          window.onresize = function() {
            myChart.resize();
          };

     

    转载于:https://www.cnblogs.com/cxf1992/p/11573161.html

    展开全文
  • 区域背景为白色 背景透明

    原图区域背景为白色背景白色
    在这里插入图片描述
    在这里插入图片描述
    背景透明

    展开全文
  • 效果: 绿色的圆柱就是根据值去判断的颜色 series.data数据: 注意:这里data可以直接取参数为value的值,这样就可以区分参数再做调整。 setOption配置: initChart(item) { this.chart = ...

    效果图:

    绿色的圆柱图就是根据值去判断的颜色

             

     

    series.data数据:

     注意:这里data可以直接取参数为value的值,这样就可以区分参数再做调整。

     

    setOption配置:

        initChart(item) {
          this.chart = echarts.init(document.getElementById("popupGantt"));
    
          this.chart.setOption({
            backgroundColor: "#fff",
            title: {
              text: "排产甘特图",
              left: 10,
            },
            grid: {
              containLabel: true,
              left: 20,
            },
            xAxis: {
              type: "time",
            },
            yAxis: {
              data: this.yAxisData,
            },
            tooltip: {
              trigger: "axis",
              formatter: function (params) {
                var res =
                  "ID:" +
                  params[0].name +
                  "</br>" +
                  "产品物料编码:" +
                  params[0].data.code +
                  "</br>" +
                  "计划数量:" +
                  params[0].data.planCount +
                  "</br>" +
                  "完成数量:" +
                  params[0].data.finishCount +
                  "</br>";
                var date0 = params[0].data.value;
                var date1 = params[1].data.value;
                date0 =
                  date0.getFullYear() +
                  "-" +
                  (date0.getMonth() + 1) +
                  "-" +
                  date0.getDate();
                date1 =
                  date1.getFullYear() +
                  "-" +
                  (date1.getMonth() + 1) +
                  "-" +
                  date1.getDate();
                res +=
                  params[1].seriesName +
                  " ~ " +
                  params[0].seriesName +
                  ":</br>" +
                  date1 +
                  "~" +
                  date0 +
                  "</br>" +
                  (params[0].data.finishCount / params[0].data.planCount == 1
                    ? "实际开始时间" +
                      " ~ " +
                      "实际完成时间" +
                      ":</br>" +
                      params[0].data.actualStartTime +
                      "~" +
                      params[0].data.actualEndTime
                    : "");
                return res;
              },
            },
            series: [
              {
                name: "计划完成时间",
                type: "bar",
                stack: "test",
                itemStyle: {
                  normal: {
                    color: function (params) {
                        //根据两个参数判断圆柱体的显示颜色,也可以用数组形式使用多个颜色
                      let colorArr =
                        params.data.finishCount / params.data.planCount == 1
                          ? "#67C23A"
                          : "#E6A23C";
    
                      return colorArr;
                    },
                  },
                },
                zlevel: -1,
                data: this.endData,
              },
              {
                name: "计划开始时间",
                type: "bar",
                stack: "test",
                // 用白色去做隐藏
                itemStyle: {
                  normal: {
                    color: "#fff",
                    borderColor: "#fff",
                    borderWidth: 2,
                  },
                },
                zlevel: -1,
                data: this.startData,
              },
            ],
          });
        },
        // 用于解决el-dialog弹窗图表不显示问题  @open="openFun()"
        openFun() {
          this.$nextTick(() => {
            this.initChart();
          });
        },

     

    展开全文
  • echart绘表和甘特图实现

    千次阅读 2019-01-25 16:08:08
    echart绘曲线图和甘特图实现 今天,我们来总结一下,如何在网页上实现曲线图的绘制,以及甘特图的绘制。 1. echart实现绘制曲线图 一开始,我想到的解决办法,不是用echart绘曲线图,而是用matplotlib绘制,这种办法...
  • 先上效果(实现过程如有疑问可私信我) 第一个柱子表示 预计时间 颜色区分表明 今日是否有需要完成的任务 第二个柱子表示 实际时间 颜色区分表明 今日是否任务的完成情况 表示为一个任务,可实现多任务展示...
  • 之前实现作业车间调度问题甘特图绘制,搜索过如何用Echart绘制甘特图,发现绘制方法都一毛一样,都是通过叠加series来实现,但这样绘制出来的甘特图,不仅够丑,而且数据也难以描述,如果要在react这种mvvm中绘制的...
  • EChart 制作类似微软的 甘特图

    万次阅读 2014-04-03 22:33:24
    paths: { 'echarts': '../../JScript/EChart/echarts', 'echarts/chart/bar': '../../JScript/EChart/echarts' } }); require(['echarts', 'echarts/chart/bar'], function (ec) { if (myChart1 && myChart1....
  • echart叠加柱状上显示文字效果修改代码源代码欢迎使用Markdown编辑器功能快捷键合理的创建标题,有助于目录的生成如何改变文本的样式插入链接与图片如何插入一段漂亮的代码片生成一个适合你的列表创建一个表格...
  • 基于Echart实现的梯形折线

    千次阅读 2018-11-05 21:19:20
    最近由于项目需要做一个类似于甘特图的统计业务随着时间在时间轴和“空间”轴上双向变动的统计图表,搜寻了许多图片和开源组件,最后在Echart官网发现一个相似示例,下面就简要记录实现过程和介绍一下对于部分API的...
  • 有助于目录的生成如何改变文本的样式插入链接与图片如何插入一段漂亮的代码片生成一个适合你的列表创建一个表格设定内容居中、居左、居右...列表如何创建一个注脚注释也是必不可少的KaTeX数学公式新的甘特图功能...
  • echart_min_js_3.8.5.rar

    2019-07-12 15:03:57
    echart图表3.8.5版本的jar,最好用的,用于甘特图开发效果非常好
  • 利用echart实现各环节进度监控

    千次阅读 2018-01-18 11:55:30
    利用甘特图因为时间轴不好调整,并且不好看,所以利用echart布局。公司只想关注主要环节,希望一屏能够看到想要的信息,所以我想到把时间固定在6-8个区段(因为项目会有延期)。但是时间轴是可以动态生成的。以下...
  • echart基础知识学习

    2020-01-10 23:03:34
    有助于目录的生成如何改变文本的样式插入链接与图片如何插入一段漂亮的代码片生成一个适合你的列表创建一个表格设定内容居中、居左、居右...列表如何创建一个注脚注释也是必不可少的KaTeX数学公式新的甘特图功能...
  • vue导出Word(包含echart)纯小白一步步填坑去学vue导出Word导入安装包创建模板echart图片处理功能快捷键合理的创建标题,有助于目录的生成如何改变文本的样式插入链接与图片如何插入一段漂亮的代码片生成一个适合你...
  • 但我打算在博客中加入类似LaTeX数学公式,甘特图EChart图表等组件,这时候就发现传统的全局渲染延迟过大,特别是添加了图后,快速连续输入几个字符,整个预览界面就会出现卡顿,用户体验确实不好。于是花了几天...

空空如也

空空如也

1 2
收藏数 24
精华内容 9
关键字:

echart甘特图