vue+Echarts实现多设备状态甘特图

目录

1.效果图

2.代码

3.注意事项

---

Apache ECharts ECharts官网，可在“快速上手”处查看详细安装方法

1.效果图

可鼠标滚轮图表和拉动下方蓝色的条条调节时间细节哦

（注：最后一个设备没有数据，所以不显示任何矩形）

2.代码

根据每个设备的不同的状态，和对应状态的持续时间渲染矩形

html部分

<div id="myechart" :style="{ float: 'left', width: '100%', height: '100%' }"></div>

js部分

        // 甘特图 数据处理及挂载函数，可在获取到数据或者数据更新时调用
        drawEchart() {
            // this.newEqp为数据集,从后端获取
            var data = this.newEqp
            // 设定状态对应显示的颜色
            var types = [
                { name: '辅料待料', color: '#07c160' },
                { name: '下游待料', color: '#269abc' },
                { name: '上游待料', color: '#edb217' },
                { name: '其他停机', color: '#f68ba7' },
                { name: '故障停机', color: '#ff3374' },
                { name: '运行', color: '#66E656' },
            ];
            var startTime;
            var datatemp = [];
            // 处理时间，x轴需要月、日、时、分
            for (let i = 0; i < data.length; i++) {
                startTime = new Date(data[i].Last_Eqpt_Update_Time).getTime();
                var typeItem = types.filter(a => a.name == data[i].Eqpt_State_Dsc)[0];
                datatemp.push({
                    name: typeItem.name,
                    value: [
                        parseInt(data[i].Index),
                        new Date(data[i].Last_Eqpt_Update_Time).getTime(),
                        new Date(data[i].Eqpt_Update_Time).getTime(),
                        //data[i].RUNTIME_TIMESTAMP,
                        //data[i].END_TIME_TIMESTAM