精华内容
下载资源
问答
  • echarts 甘特图

    2020-11-19 15:52:23
    一、需求 用图表形式展示单个设备告警开始时间、结束时间、持续时长;以及告警类型、是否恢复等等 ... echarts.init(document.getElementById('profileChart')).dispose(); // 销毁实例 let chart = e

    一、需求

    用图表形式展示单个设备告警开始时间、结束时间、持续时长;以及告警类型、是否恢复等等

    二、图

    在这里插入图片描述
    该图表示:
    1、矩形首尾:告警开始、结束时间
    2、矩形长度:告警持续时常
    3、颜色:告警等级
    4、白色边框:该告警是否为误告
    5、模糊光圈:该告警是否恢复

    三、代码

    initChart=()=>{
            echarts.init(document.getElementById('profileChart')).dispose(); // 销毁实例
            let chart = echarts.init(document.getElementById('profileChart'))
            let detailList=JSON.parse(JSON.stringify(this.state.detailSource));
            //x轴时间
            let xArr=[]
            for(let i=0;i<detailList.length;i++){
                xArr.push(detailList[i].OccTime)
                xArr.push(this.calEndTime(detailList[i].OccTime,detailList[i].Period))
            }
    
            let minTime=xArr.length>0 && xArr[0].split(' ')[0]
            let maxTime=xArr.length>0 && moment(new Date(xArr[xArr.length-1]).getTime()+24*3600*1000).format('YYYY-MM-DD HH:mm:ss').split(' ')[0]
            //series中的data
            let sdata=[]
            for(let i=0;i<detailList.length;i++){
                sdata.push(
                    {
                        itemStyle: {
                            normal: detailList[i].IsRestore?
                            {
                                color: almLvl[detailList[i].AlarmLevel].LevelColor,   //条形颜色
                                borderColor:"#fff",
                                borderWidth:detailList[i].IsFAlm?3:0,
                            }:
                            {
                                color: almLvl[detailList[i].AlarmLevel].LevelColor,   //条形颜色
                                borderColor:"#fff",
                                borderWidth:detailList[i].IsFAlm?3:0,
                                // opacity:detailList[i].IsRestore?1:0.6,
                                shadowColor:almLvl[detailList[i].AlarmLevel].LevelColor,
                                shadowBlur:5,
                                shadowOffsetY:-5
                            }
                        },
                        name: '',  
                        value: [0, detailList[i].OccTime, this.calEndTime(detailList[i].OccTime,detailList[i].Period),detailList[i].Text]//第一位0,1,2代表y轴的索引,后两位代表x轴数据开始和结束,最后一位表示文本描述
                    }
                )
            }
            console.log(xArr,sdata)
            chart.setOption({
                tooltip: {
                    formatter: function (params) {
                        return params.value[3];
                    }
                },
                dataZoom: [//缩放条
                    {
                        type: 'slider',
                        filterMode: 'weakFilter',
                        showDataShadow: false,
                        top: 150,//距离顶部位置
                        height: 5,//缩放条粗细
                        borderColor: 'transparent',
                        backgroundColor: '#043e69',
                        handleIcon: 'M10.7,11.9H9.3c-4.9,0.3-8.8,4.4-8.8,9.4c0,5,3.9,9.1,8.8,9.4h1.3c4.9-0.3,8.8-4.4,8.8-9.4C19.5,16.3,15.6,12.2,10.7,11.9z M13.3,24.4H6.7v-1.2h6.6z M13.3,22H6.7v-1.2h6.6z M13.3,19.6H6.7v-1.2h6.6z', // jshint ignore:line
                        handleSize: 10,//手柄粗细
                        handleStyle: {
                            shadowBlur: 6,
                            shadowOffsetX: 1,
                            shadowOffsetY: 2,
                            shadowColor: '#aaa'
                        },
                        labelFormatter: ''
                    },
                    {
                        type: 'inside',
                        filterMode: 'weakFilter'
                    }
                ],
                grid: {
                    left: '10%',
                    right: '10%',
                    top: '40%',
                    bottom: '10%',
                    containLabel: true,
                    height:60
                },
                xAxis: {
                    type:'time',
                    min: minTime,
                    max: maxTime,
                    axisLine:{
                        lineStyle:{
                            color:'#ccc'
                        }
                    },
                    axisTick:{
                        alignWithLabel:true
                    },
                    splitLine:{
                        show:false
                    }
                    // data:xArr//['2018-06-15','2018-06-25', '2018-07-01','2018-08-25','2018-11-14', '2018-12-13']
                },
                yAxis: {
                    axisLine:{
                        lineStyle:{
                            color:'#ccc'
                        }
                    },
                    data:['']
                },
                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 = 24;
    
                        return {
                            type: 'rect',
                            shape:echarts.graphic.clipRectByRect({// _that.$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
                            }),
                            style: api.style()
                        };
                    },
                    encode: {
                        x: [1, 2],
                        y: 0
                    },
                    data:sdata
                }]
            })
        }
    
    展开全文
  • echarts甘特图

    千次阅读 2018-08-14 22:07:47
    这里面尤其要注意的是echarts的版本,经过测试,echarts版本大于4.0.2之后,工作流程color:rgba(0,0,0,0)显示没有效果 文章的内容主要来自于 http://gallery.echartsjs.com/editor.html?c=xryzwi7fVl ,内容...
    <!DOCTYPE html>
    <html lang="en">
    
    <head>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <meta http-equiv="X-UA-Compatible" content="ie=edge">
        <title>Gattery</title>
        <script src="./node_modules/echarts/dist/echarts.min.js"></script>
    </head>
    
    <body>
        <div id='main' style="width:1300px;height:600px"></div>
        <script>
            // 基于准备好的dmo,初始化echarts实例
            var myChart = echarts.init(document.getElementById('main'));
            // 指定图表的配置项和数据
            var option = option = {
                title: {
                    text: '项目实施进度表',
                    left: 10
                },
                legend: {
                    data: ['计划实施时间', '实际实施时间']
    
                },
                grid: {
                    containLabel: true,
                    left: 20
                },
                xAxis: {
                    type: 'time'
                },
    
                yAxis: {
    
                    data: ['任务一', '任务二', '任务三', '任务四', '任务五', '任务六', '任务七']
    
                },
                tooltip: {
                    trigger: 'axis',
                    formatter: function (params) {
                        var res = params[0].name + "</br>"
                        var date0 = params[0].data;
                        var date1 = params[1].data;
                        var date2 = params[2].data;
                        var date3 = params[3].data;
                        date0 = date0.getFullYear() + "-" + (date0.getMonth() + 1) + "-" + date0.getDate();
                        date1 = date1.getFullYear() + "-" + (date1.getMonth() + 1) + "-" + date1.getDate();
                        date2 = date2.getFullYear() + "-" + (date2.getMonth() + 1) + "-" + date2.getDate();
                        date3 = date3.getFullYear() + "-" + (date3.getMonth() + 1) + "-" + date3.getDate();
                        res += params[0].seriesName + "~" + params[1].seriesName + ":</br>" + date0 + "~" + date1 + "</br>"
                        res += params[2].seriesName + "~" + params[3].seriesName + ":</br>" + date2 + "~" + date3 + "</br>"
                        console.log(params[0]);
                        return res;
                    }
                },
                series: [
                    {
                        name: '计划开始时间',
                        type: 'bar',
                        stack: 'test1',
                        itemStyle: {
                            normal: {
                                color: 'rgba(0,0,0,0)'
                            }
                        },
                        data: [
                            new Date("2015/09/2"),
                            new Date("2015/09/15"),
                            new Date("2015/09/15"),
                            new Date("2015/10/03"),
                            new Date("2015/10/04"),
                            new Date("2015/10/05"),
                            new Date("2015/10/06")
                        ]
                    },
                    {
                        name: '计划完成时间',
                        type: 'bar',
                        stack: 'test1',
                        itemStyle: {
                            normal: {
                                color   
                            }
                        },
                        data: [
                            new Date("2015/09/12"),
                            new Date("2015/09/20"),
                            new Date("2015/09/25"),
                            new Date("2015/10/05"),
                            new Date("2015/10/07"),
                            new Date("2015/10/09"),
                            new Date("2015/10/12")
                        ]
                    },
                    {
                        name: '实际开始时间',
                        type: 'bar',
                        stack: 'test2',
                        itemStyle: {
                            normal: {
                                color: 'rgba(0,0,0,0)'
                            }
                        },
                        data: [
                            new Date("2015/09/2"),
                            new Date("2015/09/15"),
                            new Date("2015/09/15"),
                            new Date("2015/10/03"),
                            new Date("2015/10/04"),
                            new Date("2015/10/05"),
                            new Date("2015/10/06")
                        ]
                    },
                    {
                        name: '实际完成时间',
                        type: 'bar',
                        stack: 'test2',
                        data: [
                            new Date("2015/09/6"),
                            new Date("2015/09/20"),
                            new Date("2015/09/27"),
                            new Date("2015/10/11"),
                            new Date("2015/10/16"),
                            new Date("2015/10/18"),
                            new Date("2015/10/17")
                        ]
                    }
                ]
            };
            // 使用刚指定的配置项和数据显示图表。
            myChart.setOption(option);
        </script>
    </body>
    
    </html>

    这里面尤其要注意的是echarts的版本,经过测试,echarts版本大于4.0.2之后,工作流程图color:rgba(0,0,0,0)显示没有效果

    文章的内容主要来自于http://gallery.echartsjs.com/editor.html?c=xryzwi7fVl,内容来自于该作者,我只是测试版本使用

    展开全文
  • Echarts 甘特图

    2018-12-05 22:00:39
    <script src="sta/js/echarts-2.2.7/build/dist/echarts.min.js"></script>  var myCharts = echarts.init(document.getElementById('barChart'));  var option = {  title: {  text: '项目实施进度表', ...

    <%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%>
    <%@taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
    <%@ taglib prefix="fmt" uri="http://java.sun.com/jsp/jstl/fmt" %> 
    <%@taglib prefix="xpm" uri="http://www.xinhuagroup.com/xpm" %>
    <%@ page isELIgnored="false" %>
    <div class="easyui-layout" data-options="fit:true,border:true">
        <div data-options="region:'center',border:false">
            <div id="barChart" style="width:'100%';height: 500px;"></div>
        </div>
    </div>
    <script src="sta/js/echarts-2.2.7/build/dist/echarts.min.js"></script>   
    <script type="text/javascript">
        var myCharts = echarts.init(document.getElementById('barChart'));
        var option = {
            title: {
                text: '项目实施进度表',
                x: "center", //标题水平方向位置
                top: '20'
            },
            legend: {
                y: 'bottom',
                data: ['计划时间', '实际时间']
            },
            grid: {
                containLabel: true,
                left: '30'
            },
            xAxis : [{
                type : 'time',
                axisLabel : {
                    formatter: function(value){
                            return new Date(value).format('yyyy-MM-dd');
                        }
                    }
                }],
            yAxis: {
                data: ['设计', '采购', '制造', '质检']
            },
            tooltip: {
                trigger: 'axis',
                formatter: function(params) {
                    var res = params[0].name + "</br>"
                    params[0].data = (params[0].data == 'NaN-aN-aN') ? '待定' : params[0].data;
                    params[1].data = (params[1].data == 'NaN-aN-aN') ? '待定' : params[1].data;
                    params[2].data = (params[2].data == 'NaN-aN-aN') ? '待定' : params[2].data;
                    params[3].data = (params[3].data == 'NaN-aN-aN') ? '待定' : params[3].data;
                    res += params[0].seriesName + "~" + "计划完成时间" + ":</br>" + params[0].data + "~" + params[1].data + "</br>"
                    res += params[2].seriesName + "~" + "实际完成时间" + ":</br>" + params[2].data + "~" + params[3].data
                    return res;
                }
            },
            series: [{
                    name: '计划开始时间',
                    type: 'bar',
                    stack: 'test1',
                    itemStyle: {
                        normal: {
                            color: 'rgba(0,0,0,0)'
                        }
                    },
                    data: [
                        new Date('${exeInfo.factBeginTimeEc}').format('yyyy-MM-dd'),
                        new Date('${exeInfo.factBeginTimePc}').format('yyyy-MM-dd'),
                        new Date('${exeInfo.factBeginTimeMc}').format('yyyy-MM-dd'),
                        new Date('${exeInfo.factBeginTimeTest}').format('yyyy-MM-dd')
                    ]},
                    {
                        name: '计划时间',
                        type: 'bar',
                        stack: 'test1',
                        itemStyle: {
                            normal: {
                                color: '#F98563'
                            }
                        },
                        data: [
                            new Date('${exeInfo.planTimeEc}').format('yyyy-MM-dd'),
                            new Date('${exeInfo.planTimePc}').format('yyyy-MM-dd'),
                            new Date('${exeInfo.planTimeMc}').format('yyyy-MM-dd'),
                            new Date('${exeInfo.planTimeTest}').format('yyyy-MM-dd')
                    ]
                },
                {
                    name: '实际开始时间',
                    type: 'bar',
                    stack: 'test2',
                    itemStyle: {
                        normal: {
                            color: 'rgba(0,0,0,0)'
                        }
                    },
                    data: [
                        new Date('${exeInfo.factBeginTimeEc}').format('yyyy-MM-dd'),
                        new Date('${exeInfo.factBeginTimePc}').format('yyyy-MM-dd'),
                        new Date('${exeInfo.factBeginTimeMc}').format('yyyy-MM-dd'),
                        new Date('${exeInfo.factBeginTimeTest}').format('yyyy-MM-dd')
                    ]
                },
                {
                    name: '实际时间',
                    type: 'bar',
                    stack: 'test2',
                    itemStyle: {
                        normal: {
                            color: '#A2E068'
                        }
                    },
                    data: [
                        new Date('${exeInfo.factEndTimeEc}').format('yyyy-MM-dd'),
                        new Date('${exeInfo.factEndTimePc}').format('yyyy-MM-dd'),
                        new Date('${exeInfo.factEndTimeMc}').format('yyyy-MM-dd'),
                        new Date('${exeInfo.factEndTimeTest}').format('yyyy-MM-dd')
                    ]
                }
            ]
        };
        myCharts.setOption(option);
    </script>                                   

    展开全文
  • Echarts甘特图

    2014-12-04 08:50:00
    最近有个需求是做甘特图。 整了几天,现在把代码发出来分享一下。 option = {  title : {  text: 'test',  x:'center'  },  calculable:false,  tooltip : {  show : true,  axisPointer :...

    Echarts原本提供的图形库已经很强大了。

    但是无奈,坐标系图形必须要求X,Y轴必须有一个为数字。

    最近有个需求是做甘特图。

    整了几天,现在把代码发出来分享一下。

    option = {
     title : {
         text: 'test',
         x:'center'
     },
     calculable:false,
     tooltip : {
         show : true,
               axisPointer : {
                   type : 'shadow'
               },
               feature : {
                   mark : {show: true},
                   dataView : {show: true, readOnly: false},
                   magicType : {show: true, type: ['line', 'bar', 'stack', 'tiled']},
                   restore : {show: true},
                   saveAsImage : {show: true}
               },
               formatter: function (params) {
                   return params[1] + '<br/>耗时 : ' + params[2] + '天';
               }
           },
        axis:{
         splitLine:{
          show:false
         },
         splitArea:{
          show:false
         } 
        },
     calculable : true,
     yAxis : [{
      type:"category",
      splitLine:{show:true},
      data:["项目确定", "问卷设计", "试访", "问卷确定","实地执行","数据录入","数据分析"]
     }],
     xAxis : [{
      type : 'value',
      axisLabel : {
       formatter: function (value){
             var end_time = 1418428800000;
             var start_time = 1417392000000;
             var date = new Array();
             var i = 1;
             while(end_time > start_time){
        var date_formatter = new Date(start_time);
        var date_time = (date_formatter.getFullYear()+"-"+(date_formatter.getMonth()+1)+"-"+date_formatter.getDate());
        date.push(date_time);
        start_time = start_time + i*24*60*60*1000;
             }
             console.log(date);
             return date[value*1];
           }
      },
     }],
     series : [
      {
       name:"辅助",
       type:"bar",
       stack:"总",
       itemStyle:{
        normal:{
         barBorderColor:'rgba(0,0,0,0)',
         color:'rgba(0,0,0,0)'
        },
        emphasis:{
         barBorderColor:'rgba(0,0,0,0)',
         color:'rgba(0,0,0,0)'
        }
       },
       data:[0,1,2,3,4,5,6]
      },
      {
       name:"项目确定",
       type:"bar",
       stack:"总",
       data:[1,0,0,0,0,0,0]
      },
      {
       name:"问卷设计",
       type:"bar",
       stack:"总",
       data:[0,1,0,0,0,0,0]
      },
      {
       name:"试访",
       type:"bar",
       stack:"总",
       data:[0,0,2,0,0,0,0]
      },
      {
       name:"问卷确定",
       type:"bar",
       stack:"总",
       data:[0,0,0,1,0,0,0]
      },
      {
       name:"实地执行",
       type:"bar",
       stack:"总",
       data:[0,0,0,0,4,0,0]
      },
      {
       name:"数据录入",
       type:"bar",
       stack:"总",
       data:[0,0,0,0,0,1,0]
      },
      {
       name:"数据分析",
       type:"bar",
       stack:"总",
       data:[0,0,0,0,0,0,3]
      }
     ]
    };

    其实实际原理很简单,使用了formatter属性,给X轴进行了一个别名的命名而已。

    给大家参考一下,也希望有好的建议可以提出来,便于改进。

    最后,感谢@麻小北 的关注

    转载于:https://my.oschina.net/u/123484/blog/352061

    展开全文
  • echarts甘特图-工厂生产计划-gantt图

    千次阅读 2019-05-09 17:13:34
    ** echarts甘特图-工厂生产计划-gantt图 ** https://gallery.echartsjs.com/editor.html?c=xjzbwfaAO7 let data = [ { "list": [ { "colorNum":0, ...
  • var opt = {title: {text: '工作流甘特图'},legend: {data: ['计划完成时间', '实际完成时间']},xAxis: {type: 'time',position: "top"},yAxis: {type: "category",data: ['测试', '开发', '设计', '总...
  • 前端通过ajax访问后台WCF服务,写在getdata函数里方便以后定时调用,采用ajax无刷新更新数据aspx:var myChart = echarts.init(document.getElementById('main')); GetData(); function GetData() { var IP = '';//...
  • ECharts甘特图\条状图实现

    千次阅读 2018-12-13 10:21:02
    以下仅提供一个甘特图示例,可以直接在http://www.echartsjs.com/examples/中运行修改。 效果图: 代码: Date.prototype.Format = function (fmt) { let o = { &amp;amp;quot;M+&amp;amp;quot;: this....
  • 本文介绍如何从头绘制一个业务图表以及对于通用性上的一些思考。代码在最后也会给出。效果演示先看下组件的最后效果要画图,当然是先找找看有没有能够直接...AntV和echarts都没有直接的甘特图。D3上有一些甘特图,但...
  • option: {title: {text:‘项目实施进度表‘,left:10},legend: {y:‘bottom‘,data: [‘计划时间‘, ‘实际时间‘]},grid: {containLabel:true,left:20},xAxis: {type:‘time‘},yAxis: {data: [‘任务一‘, ‘任务二...
  • let data = [ { "list": [ { "colorNum":0, "endTime":"2018-08-02 14:00:00", "item":"item1", "quantity":1960, .
  • 对于使用ECharts图表的步骤,每种图表都是一致的,相信大家也都了解 ...此处只分享甘特图的option,代码如下: option: { title: { text: '项目实施进度表', left: 10 }, legend: { y: 'bottom', ...
  • 问题来了,由于echarts没有专门的甘特图,我们使用了堆积图展示数据,但是如果数据里出现2条以上相同开始时间和结束时间的数据时,就会出现依次向后堆积的情况,同时会印象X轴(时间轴)的显示,出现时间刻度错位的...
  • echarts实现甘特图

    千次阅读 2018-10-15 10:20:44
    echarts生成甘特图 参考:http://gallery.echartsjs.com/editor.html?c=xryzwi7fVl 1.首先加入echarts甘特图js 2. &lt;!DOCTYPE HTML&gt; &lt;html&gt; &lt;head&gt; &lt;...
  • 在setoption之后添加这段代码:window....图表就能随着窗口大小,自动适应,且支持一页多。效果:html代码:特别注意点:xAxis : [{type : 'value',splitNumber: legend.length-1,max: legend.length-...
  • var vmRoot = new Vue({ el: '#app', data:function(){ return { option: {}, //时序图标 myChart:null, types: [], categories: [], status : [], startTime:'', endTime:'', //头部传来的时间 vmStartTime : ''...
  • echarts制作甘特图

    2019-09-24 21:42:33
    html <div id="SpeciaEchartBox" style="width: 90%;height:500px; margin:0 auto"></div> </div> initEchartBox: function() { var chartBox = echarts.init(docume...
  • Echarts实现甘特图

    2020-05-08 19:03:02
    一、项目需求如下所示: 此项目实现的功能点: 1、鼠标滑动可滚动滚动条 2、y轴label鼠标滑动可显示tooltip 3、y轴label过长换行显示
  • vue中echarts实现甘特图

    千次阅读 2018-12-24 19:55:10
    vue中使用echarts实现甘特图,在网上找了很多代码都不完整,大家可以尝试下面这个从官网搬运过来的阶梯瀑布图,做了小更改 效果如下: &lt;template&gt; &lt;div id="myChart" ref=&...
  • 1、引入js文件: <script type="text/javascript" src="jQuery存放路径/jquery.min.js">...2、存放甘特图的容器 <div id="container"></div><!--其他样式自行加上即可--> ...
  • echarts vue 甘特图实现

    2018-09-30 11:08:00
    厂家机型故障分析 ...--柱状为例 --> <script src="/static/js/component/dateType.js"></script> <script src="/static/js/component/chart-wrapper.js"></script> ...
  • 使用Echarts实现甘特图 主要实现功能是:展示车间调度过程中,工件排列 直接上代码: app.title = '堆叠条形图'; var ma = 4; var job = 10; var i = 0; var C1 = [15, 26, 75, 106]; var S1 = [0, 15, 26, 75]; ...
  • 需求:公司OA,要求根据用户输入的时间段和项目组生成该项目组这段时间研发进度的甘特图效果: 描述: 甘特图y轴是根据搜索条件(时间段和研发组)查询数据库,查询这段时间该 项目组研发的项目,x轴根据时间段生成...
  • 项目中需要用到甘特图组件,之前的图表一直基于 EChart 开发,但 EChart 本身没有甘特图组件,需要自行封装经过一番鏖战,终于完成了...我在工程中参考 v-chart封装了一套图表组件,所以这里只介绍甘特图组件的实现...
  • 1.先看效果: 2.代码部分我只贴出来option部分,其余的都是一样的;也可参考官网地址: https://www.echartsjs.com/examples/zh/index.html#chart-type-bar ...
  • ECharts画分类甘特图

    2020-06-04 10:25:29
    项目最近做任务排产,需要绘画甘特图,并且每两份一组,做了一个JQuery快速做了POC,实现了大部分功能,后来持续开发,做到了划定当前时间,任务多了后固定左侧列和顶部坐标轴行等等。 分享博客的话就简单的分享一下...

空空如也

空空如也

1 2 3 4 5
收藏数 100
精华内容 40
关键字:

echarts甘特图