Echart甘特图实现效果 + 配带抽成方法 + 源码

一、常用属性特性

坐标轴反转
坐标轴轴间隙
坐标轴箭头
坐标轴名称

二、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轴最大值定义，默认值取当前最大值+5if (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]]}
],
};

Echart甘特图实现效果 + 配带抽成方法 + 源码相关推荐

仿快图系统自带图片浏览器应用源码项目
仿快图系统自带图片浏览器应用源码,最近在做一个微博i动态模块,需要查看他人相册照片或者微博内容图片等.看到QQ空间那个效果不错,尝试了不少方法来实现,均不是怎么理想.最初是想通过自定义GroupVie ...
H5打包成app源码
H5打包成app源码 H5如何打包成app,这个不难,只要在源码里修改一下地址就可以了. 修改MainActivity文件的url更换网址 //加载的网页 private String url =&q ...
echarts圆柱形柱状图源码_jQuery插件echarts实现的多柱子柱状图效果示例【附demo源码下载】...
jQuery插件echarts实现的多柱子柱状图效果示例[附demo源码下载] 发布时间:2020-09-08 07:46:02 来源:脚本之家阅读:74 作者:翱翔天地本文实例讲述了jQuery ...
微信小程序：装B神器P图修改微信流量主小程序源码下载趣味恶搞图制作免服务器域名
今天给大家带来的这一款小程序是装逼生成,趣味制图工具该小程序免服务器和域名,低成本运营内容丰富,搭建简单,而且更逼真哟内涵N种模板制作,另外还可以设置推荐小程序更好的互引简单说几个模板吧红包 ...
通达信【多空搏击捉黑马】副图指标黑马底部抄底进场买入源码分享
通达信[多空搏击捉黑马]副图指标黑马底部抄底进场买入源码分享 [本文感谢好公式网的小小娆提供源码修改意见.] N3:=BARSLAST(CROSS(C,MA(C,20))); N4:=BARSL ...
wps 甘特图_项目进度管理的好方法：甘特图
甘特图是以该方法的提出者亨利·L·甘特的名字命名的,英文名字为Gantt chart.这是一种项目管理的最好方法之一. 例如图片所示,甘特图标题行横向为时间轴,纵向为工作事项,对于工作事项可以根据流程 ...
终身伴侣（两个人的网站）代码+效果演示（文末源码地址）
趁着七夕,把以前做过的一个情侣类的小网站写一写,虽然很早以前就做了,但一直没用上,咳咳.... 演示地址:182.254.213.223/yuanJu/index.jsp (这里要两人注册,可以直接账 ...
Unity3d C#利用材质(Material)贴图的偏移实现2D游戏单背景图无限移动背景效果功能（含源码）
前言 2D的游戏背景基本是一张图,前后可以无缝拼接的那种,无限的背景滚动的效果,可以通过多张的图拼接起来,随着相机移动动态的创建/移位背景图可以实现,不过,本文介绍的方法是使用单张Sprite实现,具 ...
Android Studio App开发之利用图像解码器ImageDecoder播放GIF动图、Webp、HEIF图片(附源码简单实用)
需要源码和图片集请点赞关注收藏后评论区留言~~~ 一.图像解码器ImageDecoder 早期的Android只支持3种图像格式,分别是JPEG,PNG,GIF 虽然这三类图片都能在ImageView ...
Unity 关于仿崩坏3部分Bloom（部分泛光）效果实现原理（附源码）
之前写每个物体的材质球控制屏幕bloom效果,由于性能问题,换了另外一种实现方式部分泛光的功能,这个是之前写的,不过性能不行,如果简单的游戏还可以,如果大场景的话就不行了原理分析我这边就研究崩坏 ...

Echart甘特图实现效果 + 配带抽成方法 + 源码

一、常用属性特性

二、Echart-实例图

echart甘特图

效果图:

项目需求

源代码

Echart甘特图实现效果 + 配带抽成方法 + 源码相关推荐

最新文章

热门文章