Echarts 设备状态 甘特图

已于 2024-02-22 10:06:55 修改
阅读量2.3k 收藏 23
点赞数 13
CC 4.0 BY-SA版权
文章标签： echarts 甘特图 javascript
于 2023-11-26 20:44:30 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_38567182/article/details/134632424
在工厂智能化生产看板中，设备状态看板需展示设备当天状态及状态持续时长等。前端可借助Echarts甘特图实现，设备状态数据由mes系统设备管理模块采集。同时提醒在数据库查询时勿将设备开始和结束时间转时间戳，用特定日期格式前端转时间戳才不会报错。

摘要生成于 C知道 ，由 DeepSeek-R1 满血版支持， 前往体验 >

在做工厂智能化生产看板时，绝对会有设备状态看板，展示设备当天或者当前状态，设备状态数据一般是有mes 系统设备管理模块对设备信息进行采集，一般包括过站数据，设备当前状态，是否在线是否故障、检修、待生产、正常运行等
那么前端看板用什么展示设备当天所有状态，以及状态持续的时长，设备当天的运行记录

实现效果：
在这里插入图片描述

代码：

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>跳转页面</title>
    <script type="text/javascript" src="jquery.min.js" asp-append-version="true"></script>
    <script type="text/javascript" src="echarts.js" asp-append-version="true"></script>
    <script src="https://cdn.jsdelivr.net/npm/echarts@5.2.2/dist/echarts.min.js"></script>
	<style>
	*{
		font-size:100px;
	}
	</style>
</head>
<body>
    <!-- 创建容器 -->
    <div id="chart" style="width:800px;height:500px;"></div>
    <script>
        var myChart = echarts.init(document.getElementById('chart'));
        var data = 
		[{
			"ROWNUM": 1,
			"SN": "80-0055-00002",
			"STATUSCODE": 5,
			"NAME": "Traffic_02",
			"STATUSDESC": "正常运行",
			"RUNTIME": "2023-11-25T07:00:00",
			"END_TIME": "2023-11-25T07:05:00",
			"RUNTIME_TIMESTAMP": 1700895600000,
			"END_TIME_TIMESTAMP": 1700895900000,
			"SECOND_TIMESTAMP": 300000,
			"DIFF_MILLISEC": 0
		}, {
			"ROWNUM": 1,
			"SN": "80-0055-00002",
			"STATUSCODE": 5,
			"NAME": "Traffic_02",
			"STATUSDESC": "正常运行",
			"RUNTIME": "2023-11-25T07:05:00",
			"END_TIME": "2023-11-25T07:10:00",
			"RUNTIME_TIMESTAMP": 1700895900000,
			"END_TIME_TIMESTAMP": 1700896200000,
			"SECOND_TIMESTAMP": 300000,
			"DIFF_MILLISEC": 0
		}, {
			"ROWNUM": 1,
			"SN": "80-0055-00002",
			"STATUSCODE": 5,
			"NAME": "Traffic_02",
			"STATUSDESC": "正常运行",
			"RUNTIME": "2023-11-25T07:10:00",
			"END_TIME": "2023-11-25T07:15:00",
			"RUNTIME_TIMESTAMP": 1700896200000,
			"END_TIME_TIMESTAMP": 1700896500000,
			"SECOND_TIMESTAMP": 300000,
			"DIFF_MILLISEC": 0
		}, {
			"ROWNUM": 1,
			"SN": "80-0055-00002",
			"STATUSCODE": 5,
			"NAME": "Traffic_02",
			"STATUSDESC": "正常运行",
			"RUNTIME": "2023-11-25T07:15:00",
			"END_TIME": "2023-11-25T07:20:00",
			"RUNTIME_TIMESTAMP": 1700896500000,
			"END_TIME_TIMESTAMP": 1700896800000,
			"SECOND_TIMESTAMP": 300000,
			"DIFF_MILLISEC": 0
		}, {
			"ROWNUM": 1,
			"SN": "80-0055-00002",
			"STATUSCODE": 5,
			"NAME": "Traffic_02",
			"STATUSDESC": "正常运行",
			"RUNTIME": "2023-11-25T07:20:00",
			"END_TIME": "2023-11-25T07:25:00",
			"RUNTIME_TIMESTAMP": 1700896800000,
			"END_TIME_TIMESTAMP": 1700897100000,
			"SECOND_TIMESTAMP": 300000,
			"DIFF_MILLISEC": 0
		}, {
			"ROWNUM": 1,
			"SN": "80-0055-00002",
			"STATUSCODE": 5,
			"NAME": "Traffic_02",
			"STATUSDESC": "正常运行",
			"RUNTIME": "2023-11-25T07:25:00",
			"END_TIME": "2023-11-25T07:30:00",
			"RUNTIME_TIMESTAMP": 1700897100000,
			"END_TIME_TIMESTAMP": 1700897400000,
			"SECOND_TIMESTAMP": 300000,
			"DIFF_MILLISEC": 0
		}, {
			"ROWNUM": 1,
			"SN": "80-0055-00002",
			"STATUSCODE": 5,
			"NAME": "Traffic_02",
			"STATUSDESC": "正常运行",
			"RUNTIME": "2023-11-25T07:30:00",
			"END_TIME": "2023-11-25T07:35:00",
			"RUNTIME_TIMESTAMP": 1700897400000,
			"END_TIME_TIMESTAMP": 1700897700000,
			"SECOND_TIMESTAMP": 300000,
			"DIFF_MILLISEC": 0
		}, {
			"ROWNUM": 1,
			"SN": "80-0055-00002",
			"STATUSCODE": 5,
			"NAME": "Traffic_02",
			"STATUSDESC": "正常运行",
			"RUNTIME": "2023-11-25T07:35:00",
			"END_TIME": "2023-11-25T07:40:00",
			"RUNTIME_TIMESTAMP": 1700897700000,
			"END_TIME_TIMESTAMP": 1700898000000,
			"SECOND_TIMESTAMP": 300000,
			"DIFF_MILLISEC": 0
		}, {
			"ROWNUM": 1,
			"SN": "80-0055-00002",
			"STATUSCODE": 5,
			"NAME": "Traffic_02",
			"STATUSDESC": "正常运行",
			"RUNTIME": "2023-11-25T07:40:00",
			"END_TIME": "2023-11-25T07:45:00",
			"RUNTIME_TIMESTAMP": 1700898000000,
			"END_TIME_TIMESTAMP": 1700898300000,
			"SECOND_TIMESTAMP": 300000,
			"DIFF_MILLISEC": 0
		}, {
			"ROWNUM": 1,
			"SN": "80-0055-00002",
			"STATUSCODE": 5,
			"NAME": "Traffic_02",
			"STATUSDESC": "正常运行",
			"RUNTIME": "2023-11-25T07:45:00",
			"END_TIME": "2023-11-25T07:50:00",
			"RUNTIME_TIMESTAMP": 1700898300000,
			"END_TIME_TIMESTAMP": 1700898600000,
			"SECOND_TIMESTAMP": 300000,
			"DIFF_MILLISEC": 0
		}, {
			"ROWNUM": 1,
			"SN": "80-0055-00002",
			"STATUSCODE": 5,
			"NAME": "Traffic_02",
			"STATUSDESC": "正常运行",
			"RUNTIME": "2023-11-25T07:50:00",
			"END_TIME": "2023-11-25T07:55:00",
			"RUNTIME_TIMESTAMP": 1700898600000,
			"END_TIME_TIMESTAMP": 1700898900000,
			"SECOND_TIMESTAMP": 300000,
			"DIFF_MILLISEC": 0
		}, {
			"ROWNUM": 1,
			"SN": "80-0055-00002",
			"STATUSCODE": 5,
			"NAME": "Traffic_02",
			"STATUSDESC": "故障停机",
			"RUNTIME": "2023-11-25T07:55:00",
			"END_TIME": "2023-11-25T08:00:00",
			"RUNTIME_TIMESTAMP": 1700898900000,
			"END_TIME_TIMESTAMP": 1700899200000,
			"SECOND_TIMESTAMP": 300000,
			"DIFF_MILLISEC": 0
		}, {
			"ROWNUM": 1,
			"SN": "80-0055-00002",
			"STATUSCODE": 5,
			"NAME": "Traffic_02",
			"STATUSDESC": "故障停机",
			"RUNTIME": "2023-11-25T08:00:00",
			"END_TIME": "2023-11-25T08:05:00",
			"RUNTIME_TIMESTAMP": 1700899200000,
			"END_TIME_TIMESTAMP": 1700899500000,
			"SECOND_TIMESTAMP": 300000,
			"DIFF_MILLISEC": 0
		}, {
			"ROWNUM": 1,
			"SN": "80-0055-00002",
			"STATUSCODE": 5,
			"NAME": "Traffic_02",
			"STATUSDESC": "故障停机",
			"RUNTIME": "2023-11-25T08:05:00",
			"END_TIME": "2023-11-25T08:10:00",
			"RUNTIME_TIMESTAMP": 1700899500000,
			"END_TIME_TIMESTAMP": 1700899800000,
			"SECOND_TIMESTAMP": 300000,
			"DIFF_MILLISEC": 0
		}, {
			"ROWNUM": 1,
			"SN": "80-0055-00002",
			"STATUSCODE": 5,
			"NAME": "Traffic_02",
			"STATUSDESC": "故障停机",
			"RUNTIME": "2023-11-25T08:10:00",
			"END_TIME": "2023-11-25T08:15:00",
			"RUNTIME_TIMESTAMP": 1700899800000,
			"END_TIME_TIMESTAMP": 1700900100000,
			"SECOND_TIMESTAMP": 300000,
			"DIFF_MILLISEC": 0
		}, {
			"ROWNUM": 1,
			"SN": "80-0055-00002",
			"STATUSCODE": 5,
			"NAME": "Traffic_02",
			"STATUSDESC": "故障停机",
			"RUNTIME": "2023-11-25T08:15:00",
			"END_TIME": "2023-11-25T08:20:00",
			"RUNTIME_TIMESTAMP": 1700900100000,
			"END_TIME_TIMESTAMP": 1700900400000,
			"SECOND_TIMESTAMP": 300000,
			"DIFF_MILLISEC": 0
		}, {
			"ROWNUM": 1,
			"SN": "80-0055-00002",
			"STATUSCODE": 5,
			"NAME": "Traffic_02",
			"STATUSDESC": "调试",
			"RUNTIME": "2023-11-25T08:20:00",
			"END_TIME": "2023-11-25T08:25:00",
			"RUNTIME_TIMESTAMP": 1700900400000,
			"END_TIME_TIMESTAMP": 1700900700000,
			"SECOND_TIMESTAMP": 300000,
			"DIFF_MILLISEC": 0
		}, {
			"ROWNUM": 1,
			"SN": "80-0055-00002",
			"STATUSCODE": 5,
			"NAME": "Traffic_02",
			"STATUSDESC": "调试",
			"RUNTIME": "2023-11-25T08:25:00",
			"END_TIME": "2023-11-25T08:30:00",
			"RUNTIME_TIMESTAMP": 1700900700000,
			"END_TIME_TIMESTAMP": 1700901000000,
			"SECOND_TIMESTAMP": 300000,
			"DIFF_MILLISEC": 0
		}, {
			"ROWNUM": 1,
			"SN": "80-0055-00002",
			"STATUSCODE": 5,
			"NAME": "Traffic_02",
			"STATUSDESC": "调试",
			"RUNTIME": "2023-11-25T08:30:00",
			"END_TIME": "2023-11-25T08:35:00",
			"RUNTIME_TIMESTAMP": 1700901000000,
			"END_TIME_TIMESTAMP": 1700901300000,
			"SECOND_TIMESTAMP": 300000,
			"DIFF_MILLISEC": 0
		}, {
			"ROWNUM": 1,
			"SN": "80-0055-00002",
			"STATUSCODE": 5,
			"NAME": "Traffic_02",
			"STATUSDESC": "待生产",
			"RUNTIME": "2023-11-25T08:35:00",
			"END_TIME": "2023-11-25T08:40:00",
			"RUNTIME_TIMESTAMP": 1700901300000,
			"END_TIME_TIMESTAMP": 1700901600000,
			"SECOND_TIMESTAMP": 300000,
			"DIFF_MILLISEC": 0
		}, {
			"ROWNUM": 1,
			"SN": "80-0055-00002",
			"STATUSCODE": 5,
			"NAME": "Traffic_02",
			"STATUSDESC": "待生产",
			"RUNTIME": "2023-11-25T08:40:00",
			"END_TIME": "2023-11-25T08:45:00",
			"RUNTIME_TIMESTAMP": 1700901600000,
			"END_TIME_TIMESTAMP": 1700901900000,
			"SECOND_TIMESTAMP": 300000,
			"DIFF_MILLISEC": 0
		}, {
			"ROWNUM": 1,
			"SN": "80-0055-00002",
			"STATUSCODE": 5,
			"NAME": "Traffic_02",
			"STATUSDESC": "正常运行",
			"RUNTIME": "2023-11-25T08:45:00",
			"END_TIME": "2023-11-25T08:50:00",
			"RUNTIME_TIMESTAMP": 1700901900000,
			"END_TIME_TIMESTAMP": 1700902200000,
			"SECOND_TIMESTAMP": 300000,
			"DIFF_MILLISEC": 0
		}, {
			"ROWNUM": 1,
			"SN": "80-0055-00002",
			"STATUSCODE": 5,
			"NAME": "Traffic_02",
			"STATUSDESC": "正常运行",
			"RUNTIME": "2023-11-25T08:50:00",
			"END_TIME": "2023-11-25T08:55:00",
			"RUNTIME_TIMESTAMP": 1700902200000,
			"END_TIME_TIMESTAMP": 1700902500000,
			"SECOND_TIMESTAMP": 300000,
			"DIFF_MILLISEC": 0
		}, {
			"ROWNUM": 1,
			"SN": "80-0055-00002",
			"STATUSCODE": 5,
			"NAME": "Traffic_02",
			"STATUSDESC": "正常运行",
			"RUNTIME": "2023-11-25T08:55:00",
			"END_TIME": "2023-11-25T09:00:00",
			"RUNTIME_TIMESTAMP": 1700902500000,
			"END_TIME_TIMESTAMP": 1700902800000,
			"SECOND_TIMESTAMP": 300000,
			"DIFF_MILLISEC": 0
		}, {
			"ROWNUM": 1,
			"SN": "80-0055-00002",
			"STATUSCODE": 5,
			"NAME": "Traffic_02",
			"STATUSDESC": "正常运行",
			"RUNTIME": "2023-11-25T09:00:00",
			"END_TIME": "2023-11-25T09:05:00",
			"RUNTIME_TIMESTAMP": 1700902800000,
			"END_TIME_TIMESTAMP": 1700903100000,
			"SECOND_TIMESTAMP": 300000,
			"DIFF_MILLISEC": 0
		}, {
			"ROWNUM": 1,
			"SN": "80-0055-00002",
			"STATUSCODE": 5,
			"NAME": "Traffic_02",
			"STATUSDESC": "调试",
			"RUNTIME": "2023-11-25T09:05:00",
			"END_TIME": "2023-11-25T09:10:00",
			"RUNTIME_TIMESTAMP": 1700903100000,
			"END_TIME_TIMESTAMP": 1700903400000,
			"SECOND_TIMESTAMP": 300000,
			"DIFF_MILLISEC": 0
		}, {
			"ROWNUM": 1,
			"SN": "80-0055-00002",
			"STATUSCODE": 5,
			"NAME": "Traffic_02",
			"STATUSDESC": "调试",
			"RUNTIME": "2023-11-25T09:10:00",
			"END_TIME": "2023-11-25T09:15:00",
			"RUNTIME_TIMESTAMP": 1700903400000,
			"END_TIME_TIMESTAMP": 1700903700000,
			"SECOND_TIMESTAMP": 300000,
			"DIFF_MILLISEC": 0
		}, {
			"ROWNUM": 1,
			"SN": "80-0055-00002",
			"STATUSCODE": 5,
			"NAME": "Traffic_02",
			"STATUSDESC": "正常运行",
			"RUNTIME": "2023-11-25T09:15:00",
			"END_TIME": "2023-11-25T09:20:00",
			"RUNTIME_TIMESTAMP": 1700903700000,
			"END_TIME_TIMESTAMP": 1700904000000,
			"SECOND_TIMESTAMP": 300000,
			"DIFF_MILLISEC": 0
		}, {
			"ROWNUM": 1,
			"SN": "80-0055-00002",
			"STATUSCODE": 5,
			"NAME": "Traffic_02",
			"STATUSDESC": "正常运行",
			"RUNTIME": "2023-11-25T09:20:00",
			"END_TIME": "2023-11-25T09:25:00",
			"RUNTIME_TIMESTAMP": 1700904000000,
			"END_TIME_TIMESTAMP": 1700904300000,
			"SECOND_TIMESTAMP": 300000,
			"DIFF_MILLISEC": 0
		}, {
			"ROWNUM": 1,
			"SN": "80-0055-00002",
			"STATUSCODE": 5,
			"NAME": "Traffic_02",
			"STATUSDESC": "正常运行",
			"RUNTIME": "2023-11-25T09:25:00",
			"END_TIME": "2023-11-25T09:30:00",
			"RUNTIME_TIMESTAMP": 1700904300000,
			"END_TIME_TIMESTAMP": 1700904600000,
			"SECOND_TIMESTAMP": 300000,
			"DIFF_MILLISEC": 0
		}, {
			"ROWNUM": 1,
			"SN": "80-0055-00002",
			"STATUSCODE": 5,
			"NAME": "Traffic_02",
			"STATUSDESC": "故障停机",
			"RUNTIME": "2023-11-25T09:30:00",
			"END_TIME": "2023-11-25T09:35:00",
			"RUNTIME_TIMESTAMP": 1700904600000,
			"END_TIME_TIMESTAMP": 1700904900000,
			"SECOND_TIMESTAMP": 300000,
			"DIFF_MILLISEC": 0
		}, {
			"ROWNUM": 1,
			"SN": "80-0055-00002",
			"STATUSCODE": 5,
			"NAME": "Traffic_02",
			"STATUSDESC": "故障停机",
			"RUNTIME": "2023-11-25T09:35:00",
			"END_TIME": "2023-11-25T09:40:00",
			"RUNTIME_TIMESTAMP": 1700904900000,
			"END_TIME_TIMESTAMP": 1700905200000,
			"SECOND_TIMESTAMP": 300000,
			"DIFF_MILLISEC": 0
		}, {
			"ROWNUM": 1,
			"SN": "80-0055-00002",
			"STATUSCODE": 5,
			"NAME": "Traffic_02",
			"STATUSDESC": "维修",
			"RUNTIME": "2023-11-25T09:40:00",
			"END_TIME": "2023-11-25T09:45:00",
			"RUNTIME_TIMESTAMP": 1700905200000,
			"END_TIME_TIMESTAMP": 1700905500000,
			"SECOND_TIMESTAMP": 300000,
			"DIFF_MILLISEC": 0
		}, {
			"ROWNUM": 1,
			"SN": "80-0055-00002",
			"STATUSCODE": 5,
			"NAME": "Traffic_02",
			"STATUSDESC": "维修",
			"RUNTIME": "2023-11-25T09:45:00",
			"END_TIME": "2023-11-25T09:50:00",
			"RUNTIME_TIMESTAMP": 1700905500000,
			"END_TIME_TIMESTAMP": 1700905800000,
			"SECOND_TIMESTAMP": 300000,
			"DIFF_MILLISEC": 0
		}, {
			"ROWNUM": 1,
			"SN": "80-0055-00002",
			"STATUSCODE": 5,
			"NAME": "Traffic_02",
			"STATUSDESC": "正常运行",
			"RUNTIME": "2023-11-25T09:50:00",
			"END_TIME": "2023-11-25T09:55:00",
			"RUNTIME_TIMESTAMP": 1700905800000,
			"END_TIME_TIMESTAMP": 1700906100000,
			"SECOND_TIMESTAMP": 300000,
			"DIFF_MILLISEC": 0
		}, {
			"ROWNUM": 1,
			"SN": "80-0055-00002",
			"STATUSCODE": 5,
			"NAME": "Traffic_02",
			"STATUSDESC": "正常运行",
			"RUNTIME": "2023-11-25T09:55:00",
			"END_TIME": "2023-11-25T10:00:00",
			"RUNTIME_TIMESTAMP": 1700906100000,
			"END_TIME_TIMESTAMP": 1700906400000,
			"SECOND_TIMESTAMP": 300000,
			"DIFF_MILLISEC": 0
		}, {
			"ROWNUM": 1,
			"SN": "80-0055-00002",
			"STATUSCODE": 5,
			"NAME": "Traffic_02",
			"STATUSDESC": "正常运行",
			"RUNTIME": "2023-11-25T10:00:00",
			"END_TIME": "2023-11-25T10:05:00",
			"RUNTIME_TIMESTAMP": 1700906400000,
			"END_TIME_TIMESTAMP": 1700906700000,
			"SECOND_TIMESTAMP": 300000,
			"DIFF_MILLISEC": 0
		}, {
			"ROWNUM": 1,
			"SN": "80-0055-00002",
			"STATUSCODE": 5,
			"NAME": "Traffic_02",
			"STATUSDESC": "正常运行",
			"RUNTIME": "2023-11-25T10:05:00",
			"END_TIME": "2023-11-25T10:10:00",
			"RUNTIME_TIMESTAMP": 1700906700000,
			"END_TIME_TIMESTAMP": 1700907000000,
			"SECOND_TIMESTAMP": 300000,
			"DIFF_MILLISEC": 0
		}, {
			"ROWNUM": 1,
			"SN": "80-0055-00002",
			"STATUSCODE": 5,
			"NAME": "Traffic_02",
			"STATUSDESC": "正常运行",
			"RUNTIME": "2023-11-25T10:10:00",
			"END_TIME": "2023-11-25T10:15:00",
			"RUNTIME_TIMESTAMP": 1700907000000,
			"END_TIME_TIMESTAMP": 1700907300000,
			"SECOND_TIMESTAMP": 300000,
			"DIFF_MILLISEC": 0
		}, {
			"ROWNUM": 1,
			"SN": "80-0055-00002",
			"STATUSCODE": 5,
			"NAME": "Traffic_02",
			"STATUSDESC": "正常运行",
			"RUNTIME": "2023-11-25T10:15:00",
			"END_TIME": "2023-11-25T10:20:00",
			"RUNTIME_TIMESTAMP": 1700907300000,
			"END_TIME_TIMESTAMP": 1700907600000,
			"SECOND_TIMESTAMP": 300000,
			"DIFF_MILLISEC": 0
		}, {
			"ROWNUM": 1,
			"SN": "80-0055-00002",
			"STATUSCODE": 5,
			"NAME": "Traffic_02",
			"STATUSDESC": "正常运行",
			"RUNTIME": "2023-11-25T10:20:00",
			"END_TIME": "2023-11-25T10:25:00",
			"RUNTIME_TIMESTAMP": 1700907600000,
			"END_TIME_TIMESTAMP": 1700907900000,
			"SECOND_TIMESTAMP": 300000,
			"DIFF_MILLISEC": 0
		}, {
			"ROWNUM": 1,
			"SN": "80-0055-00002",
			"STATUSCODE": 5,
			"NAME": "Traffic_02",
			"STATUSDESC": "正常运行",
			"RUNTIME": "2023-11-25T10:25:00",
			"END_TIME": "2023-11-25T10:30:00",
			"RUNTIME_TIMESTAMP": 1700907900000,
			"END_TIME_TIMESTAMP": 1700908200000,
			"SECOND_TIMESTAMP": 300000,
			"DIFF_MILLISEC": 0
		}, {
			"ROWNUM": 1,
			"SN": "80-0055-00002",
			"STATUSCODE": 5,
			"NAME": "Traffic_02",
			"STATUSDESC": "正常运行",
			"RUNTIME": "2023-11-25T10:30:00",
			"END_TIME": "2023-11-25T10:35:00",
			"RUNTIME_TIMESTAMP": 1700908200000,
			"END_TIME_TIMESTAMP": 1700908500000,
			"SECOND_TIMESTAMP": 300000,
			"DIFF_MILLISEC": 0
		}, {
			"ROWNUM": 1,
			"SN": "80-0055-00002",
			"STATUSCODE": 5,
			"NAME": "Traffic_02",
			"STATUSDESC": "正常运行",
			"RUNTIME": "2023-11-25T10:35:00",
			"END_TIME": "2023-11-25T10:40:00",
			"RUNTIME_TIMESTAMP": 1700908500000,
			"END_TIME_TIMESTAMP": 1700908800000,
			"SECOND_TIMESTAMP": 300000,
			"DIFF_MILLISEC": 0
		}, {
			"ROWNUM": 1,
			"SN": "80-0055-00002",
			"STATUSCODE": 5,
			"NAME": "Traffic_02",
			"STATUSDESC": "正常运行",
			"RUNTIME": "2023-11-25T10:40:00",
			"END_TIME": "2023-11-25T10:45:00",
			"RUNTIME_TIMESTAMP": 1700908800000,
			"END_TIME_TIMESTAMP": 1700909100000,
			"SECOND_TIMESTAMP": 300000,
			"DIFF_MILLISEC": 0
		}, {
			"ROWNUM": 1,
			"SN": "80-0055-00002",
			"STATUSCODE": 5,
			"NAME": "Traffic_02",
			"STATUSDESC": "正常运行",
			"RUNTIME": "2023-11-25T10:45:00",
			"END_TIME": "2023-11-25T10:50:00",
			"RUNTIME_TIMESTAMP": 1700909100000,
			"END_TIME_TIMESTAMP": 1700909400000,
			"SECOND_TIMESTAMP": 300000,
			"DIFF_MILLISEC": 0
		}, {
			"ROWNUM": 1,
			"SN": "80-0055-00002",
			"STATUSCODE": 5,
			"NAME": "Traffic_02",
			"STATUSDESC": "正常运行",
			"RUNTIME": "2023-11-25T10:50:00",
			"END_TIME": "2023-11-25T10:55:00",
			"RUNTIME_TIMESTAMP": 1700909400000,
			"END_TIME_TIMESTAMP": 1700909700000,
			"SECOND_TIMESTAMP": 300000,
			"DIFF_MILLISEC": 0
		}, {
			"ROWNUM": 1,
			"SN": "80-0055-00002",
			"STATUSCODE": 5,
			"NAME": "Traffic_02",
			"STATUSDESC": "正常运行",
			"RUNTIME": "2023-11-25T10:55:00",
			"END_TIME": "2023-11-25T11:00:00",
			"RUNTIME_TIMESTAMP": 1700909700000,
			"END_TIME_TIMESTAMP": 1700910000000,
			"SECOND_TIMESTAMP": 300000,
			"DIFF_MILLISEC": 0
		}, {
			"ROWNUM": 1,
			"SN": "80-0055-00002",
			"STATUSCODE": 5,
			"NAME": "Traffic_02",
			"STATUSDESC": "正常运行",
			"RUNTIME": "2023-11-25T11:00:00",
			"END_TIME": "2023-11-25T11:05:00",
			"RUNTIME_TIMESTAMP": 1700910000000,
			"END_TIME_TIMESTAMP": 1700910300000,
			"SECOND_TIMESTAMP": 300000,
			"DIFF_MILLISEC": 0
		}, {
			"ROWNUM": 1,
			"SN": "80-0055-00002",
			"STATUSCODE": 5,
			"NAME": "Traffic_02",
			"STATUSDESC": "正常运行",
			"RUNTIME": "2023-11-25T11:05:00",
			"END_TIME": "2023-11-25T11:10:00",
			"RUNTIME_TIMESTAMP": 1700910300000,
			"END_TIME_TIMESTAMP": 1700910600000,
			"SECOND_TIMESTAMP": 300000,
			"DIFF_MILLISEC": 0
		}, {
			"ROWNUM": 1,
			"SN": "80-0055-00002",
			"STATUSCODE": 5,
			"NAME": "Traffic_02",
			"STATUSDESC": "正常运行",
			"RUNTIME": "2023-11-25T11:10:00",
			"END_TIME": "2023-11-25T11:15:00",
			"RUNTIME_TIMESTAMP": 1700910600000,
			"END_TIME_TIMESTAMP": 1700910900000,
			"SECOND_TIMESTAMP": 300000,
			"DIFF_MILLISEC": 0
		}, {
			"ROWNUM": 1,
			"SN": "80-0055-00002",
			"STATUSCODE": 5,
			"NAME": "Traffic_02",
			"STATUSDESC": "正常运行",
			"RUNTIME": "2023-11-25T11:15:00",
			"END_TIME": "2023-11-25T11:20:00",
			"RUNTIME_TIMESTAMP": 1700910900000,
			"END_TIME_TIMESTAMP": 1700911200000,
			"SECOND_TIMESTAMP": 300000,
			"DIFF_MILLISEC": 0
		}, {
			"ROWNUM": 1,
			"SN": "80-0055-00002",
			"STATUSCODE": 5,
			"NAME": "Traffic_02",
			"STATUSDESC": "正常运行",
			"RUNTIME": "2023-11-25T11:20:00",
			"END_TIME": "2023-11-25T11:25:00",
			"RUNTIME_TIMESTAMP": 1700911200000,
			"END_TIME_TIMESTAMP": 1700911500000,
			"SECOND_TIMESTAMP": 300000,
			"DIFF_MILLISEC": 0
		}, {
			"ROWNUM": 1,
			"SN": "80-0055-00002",
			"STATUSCODE": 5,
			"NAME": "Traffic_02",
			"STATUSDESC": "正常运行",
			"RUNTIME": "2023-11-25T11:25:00",
			"END_TIME": "2023-11-25T11:30:00",
			"RUNTIME_TIMESTAMP": 1700911500000,
			"END_TIME_TIMESTAMP": 1700911800000,
			"SECOND_TIMESTAMP": 300000,
			"DIFF_MILLISEC": 0
		}, {
			"ROWNUM": 1,
			"SN": "80-0055-00002",
			"STATUSCODE": 5,
			"NAME": "Traffic_02",
			"STATUSDESC": "正常运行",
			"RUNTIME": "2023-11-25T11:30:00",
			"END_TIME": "2023-11-25T11:35:00",
			"RUNTIME_TIMESTAMP": 1700911800000,
			"END_TIME_TIMESTAMP": 1700912100000,
			"SECOND_TIMESTAMP": 300000,
			"DIFF_MILLISEC": 0
		}, {
			"ROWNUM": 1,
			"SN": "80-0055-00002",
			"STATUSCODE": 5,
			"NAME": "Traffic_02",
			"STATUSDESC": "正常运行",
			"RUNTIME": "2023-11-25T11:35:00",
			"END_TIME": "2023-11-25T11:40:00",
			"RUNTIME_TIMESTAMP": 1700912100000,
			"END_TIME_TIMESTAMP": 1700912400000,
			"SECOND_TIMESTAMP": 300000,
			"DIFF_MILLISEC": 0
		}, {
			"ROWNUM": 1,
			"SN": "80-0055-00002",
			"STATUSCODE": 5,
			"NAME": "Traffic_02",
			"STATUSDESC": "正常运行",
			"RUNTIME": "2023-11-25T11:40:00",
			"END_TIME": "2023-11-25T11:45:00",
			"RUNTIME_TIMESTAMP": 1700912400000,
			"END_TIME_TIMESTAMP": 1700912700000,
			"SECOND_TIMESTAMP": 300000,
			"DIFF_MILLISEC": 0
		}];
				
		var types = [
			{ name: '正常运行', color: '#07c160' },
			{ name: '待生产', color: '#269abc' },
			{ name: '调试', color: '#edb217' },
			{ name: '维修', color: '#f68ba7' },
			{ name: '故障停机', color: '#ff3374' }
        ];
        var startTime;
        var datatemp = [];
        for (let i = 0; i < data.length; i++) {
            startTime = new Date(data[i].RUNTIME).getTime();
            var typeItem = types.filter(a => a.name == data[i].STATUSDESC)[0];
            datatemp.push({
                name: typeItem.name,
                value: [
                    parseInt(data[i].ROWNUM),
                    new Date(data[i].RUNTIME).getTime(),
                    new Date(data[i].END_TIME).getTime(),
                    //data[i].RUNTIME_TIMESTAMP,
                    //data[i].END_TIME_TIMESTAMP,
					data[i].DIFF_MILLISEC,
                    data[i].NAME
                ],
                itemStyle: {
                    normal: {
                        color: typeItem.color
                    }
                }
            });
        }
        console.log(JSON.stringify(datatemp));
        var categories = data.map(item => item.NAME).filter((name, index, arr) => arr.indexOf(name) === index);
        function renderItem(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 = 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
                }
            );
            return (
                rectShape && {
                    type: 'rect',
                    transition: ['shape'],
                    shape: rectShape,
                    style: api.style()
                }
            );
        }
        option = {
			textStyle: {
				color: '#333',
				fontSize: '0.13rem'
			},
			grid: {
				top: '5%',
				left: '8%',
				bottom: '16%',
				width: '90%'
			},
			legend: {
				show: true,
				itemWidth: 10,
				itemHeight: 10,
				textStyle: {
					color: '#fff',
					fontSize: '0.12rem'
				},
				data: types.map(function (type) {
					return type.name;
				}),
			},
			tooltip: {
				show: true,
				textStyle: {
					fontSize: 10
				},
				axisPointer: {
					type: 'cross',
					crossStyle: {
						color: '#333'
					}
				},
				formatter: function (params) {
                    return params.value[4] + '\t' + params.name + '\t' + params.marker + (new Date(params.value[1])).getHours() + ':' + (new Date(params.value[1])).getMinutes() + '—' + (new Date(params.value[2])).getHours() + ':' + (new Date(params.value[2])).getMinutes();
                }
			},	
			dataZoom: [
				{
					type: 'inside',
					filterMode: 'weakFilter'
				},
				{
					type: "slider",
					show: true,
					height: "6",
					bottom: "4%",
					labelFormatter: '',
					backgroundColor: "white",
					brushSelect: false,
					minValueSpan: 3600 * 24 * 1000 * 7,
					handleIcon: 'path://path://M100, 100m -75, 0a75,75 0 1,0 150,0a75,75 0 1,0 -150,0',
					handleSize: 15,
					handleColor: '#6bc5da',
					start: 0,
					end: 100,
					handleStyle: {
						borderCap: 'round',
						color: "#fff",
						shadowColor: 'rgba(0, 0, 0, 0.5)',
						shadowBlur: 1
					},
					textStyle: {
						color: "transparent"
					},
					borderColor: 'transparent',
					backgroundColor: '#D7F4FF',
					dataBackground: {
						lineStyle: {
							width: 0
						},
						areaStyle: {
							color: 'transparent'
						}
					},
					fillerColor: '#00EBFF'
				}
			],	
			xAxis: {
                    type: 'time',
                    //min: new Date(startTime).setHours(7, 0, 0, 0),
                    //max: new Date(new Date(startTime).setDate(new Date(startTime).getDate() + 1)).setHours(7, 0, 0, 0),
                    interval: 3600000,
                    scale: true,
                    axisLabel: {
                        formatter: function (val) {
                            return new Date(val).toLocaleTimeString('en-US', { hour: '2-digit', minute: 'numeric', hour12: false });
                        }
                    },
                    splitLine: {
                        show: false
                    },
                    axisLine: {
                        show: false
                    },
                    axisTick: {
                        show: true,
                        lineStyle: {
                            color: '#333',
                            width: 2 
                        }
                    },
                    axisLabel: {
                        textStyle: {
                            color: '#333',
                            fontSize: '0.14rem'
                        },
                        show: true
                    }
                },
                yAxis: {
                    data: categories,
                    scale: true,
                    splitLine: { show: false },
                    axisLine: {
                        show: false
                    },
                    axisTick: {
                        show: false
                    },
                    axisLabel: {
                        show: true,
                        textStyle: {
                            color: '#333',
                            fontSize: '0.12rem',
                            fontWeight: 'bolder',
                        }
                    }
                },
                series: [
                    {
                        type: 'custom',
                        renderItem: renderItem,
                        itemStyle: {
                            opacity: 0.8
                        },
                        encode: {
                            x: [1, 2],
                            y: 0
                        },
                        data: datatemp
                    }
                ]
        };
        myChart.setOption(option);
        myChart.on('click', function (params) {
            console.log(params);
        });
        window.addEventListener('resize', function () {
            chart.resize();
        });
    </script>
</body>
</html>

参考：
Echarts 甘特图事例
博客1
博客2
博客3

注意事项：
不要把设备的开始时间，和结束时间在数据库查询的时候就转时间戳，数据转的时间戳，在前端转时间会有差异
就用数据查询yyyy-MM-dd HH:mm:ss.fff 日期格式，前端转时间戳就不会报错。
在这里插入图片描述demo2
在这里插入图片描述

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>跳转页面</title>
    <script type="text/javascript" src="jquery.min.js" asp-append-version="true"></script>
    <script type="text/javascript" src="echarts.js" asp-append-version="true"></script>
    <!--<script src="https://cdn.jsdelivr.net/npm/echarts@5.2.2/dist/echarts.min.js"></script>-->
	<style>
	*{
		font-size:100px;
	}
	</style>
</head>
<body>
    <!-- 创建容器 -->
    <div id="chart" style="width:800px;height:500px;"></div>
    <script>
        var myChart = echarts.init(document.getElementById('chart'));
        var data = [{"ROW":"1","GROUPID":"0","SN":"10-0012-00174","STATUSCODE":"5","NAME":"Wire bonder 04#","STATUSDESC":"正常运行","RUNTIME":"2023-11-27 07:00:00.000","END_TIME":"2023-11-27 10:00:00.000","DIFF_MILLISEC":"0"},{"ROW":"2","GROUPID":"0","SN":"10-0012-00174","STATUSCODE":"3","NAME":"Wire bonder 04#","STATUSDESC":"调试","RUNTIME":"2023-11-27 10:00:00.000","END_TIME":"2023-11-27 11:15:00.000","DIFF_MILLISEC":"0"},{"ROW":"3","GROUPID":"0","SN":"10-0012-00174","STATUSCODE":"5","NAME":"Wire bonder 04#","STATUSDESC":"正常运行","RUNTIME":"2023-11-27 11:15:00.000","END_TIME":"2023-11-27 15:35:00.000","DIFF_MILLISEC":"0"},{"ROW":"4","GROUPID":"1","SN":"80-0055-00015","STATUSCODE":"5","NAME":"Traffic_15","STATUSDESC":"正常运行","RUNTIME":"2023-11-27 07:00:00.000","END_TIME":"2023-11-27 10:15:00.000","DIFF_MILLISEC":"0"},{"ROW":"5","GROUPID":"1","SN":"80-0055-00015","STATUSCODE":"4","NAME":"Traffic_15","STATUSDESC":"待生产","RUNTIME":"2023-11-27 10:15:00.000","END_TIME":"2023-11-27 14:35:00.000","DIFF_MILLISEC":"0"},{"ROW":"6","GROUPID":"1","SN":"80-0055-00015","STATUSCODE":"5","NAME":"Traffic_15","STATUSDESC":"正常运行","RUNTIME":"2023-11-27 14:35:00.000","END_TIME":"2023-11-27 15:35:00.000","DIFF_MILLISEC":"0"}];
				
		var types = [
			{ name: '正常运行', color: '#07c160' },
			{ name: '待生产', color: '#269abc' },
			{ name: '调试', color: '#edb217' },
			{ name: '维修', color: '#f68ba7' },
			{ name: '故障停机', color: '#ff3374' }
        ];
        var startTime;
        var datatemp = [];
        for (let i = 0; i < data.length; i++) {
            startTime = new Date(data[i].RUNTIME).getTime();
            var typeItem = types.filter(a => a.name == data[i].STATUSDESC)[0];
            datatemp.push({
                name: typeItem.name,
                value: [
                    parseInt(data[i].GROUPID),
                    new Date(data[i].RUNTIME).getTime(),
                    new Date(data[i].END_TIME).getTime(),
					data[i].DIFF_MILLISEC,
                    data[i].NAME
                ],
                itemStyle: {
                    normal: {
                        color: typeItem.color
                    }
                }
            });
        }
        console.log(JSON.stringify(datatemp));
        var categories = data.map(item => item.NAME).filter((name, index, arr) => arr.indexOf(name) === index);
        function renderItem(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 = 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
                }
            );
            return (
                rectShape && {
                    type: 'rect',
                    transition: ['shape'],
                    shape: rectShape,
                    style: api.style()
                }
            );
        }
        option = {
			textStyle: {
				color: '#333',
				fontSize: '0.13rem'
			},
			grid: {
				top: '5%',
                left: '8%',
                right:'4%',
				bottom: '16%',
				width: '86%'
			},
			legend: {
				show: true,
				itemWidth: 10,
				itemHeight: 10,
				textStyle: {
					color: '#fff',
					fontSize: '0.12rem'
				},
				data: types.map(function (type) {
					return type.name;
				}),
			},
			tooltip: {
				show: true,
				textStyle: {
					fontSize: 10
				},
				axisPointer: {
					type: 'cross',
					crossStyle: {
						color: '#333'
					}
				},
				formatter: function (params) {
                    return params.value[4] + '\t' + params.name + '\t' + params.marker + (new Date(params.value[1])).getHours() + ':' + (new Date(params.value[1])).getMinutes() + '—' + (new Date(params.value[2])).getHours() + ':' + (new Date(params.value[2])).getMinutes();
                }
			},	
			dataZoom: [
				{
					type: 'inside',
					filterMode: 'weakFilter'
				},
				{
					type: "slider",
					show: true,
					height: "6",
					bottom: "4%",
					labelFormatter: '',
					backgroundColor: "white",
					brushSelect: false,
					minValueSpan: 3600 * 24 * 1000 * 7,
					handleIcon: 'path://path://M100, 100m -75, 0a75,75 0 1,0 150,0a75,75 0 1,0 -150,0',
					handleSize: 15,
					handleColor: '#6bc5da',
					start: 0,
					end: 100,
					handleStyle: {
						borderCap: 'round',
						color: "#fff",
						shadowColor: 'rgba(0, 0, 0, 0.5)',
						shadowBlur: 1
					},
					textStyle: {
						color: "transparent"
					},
					borderColor: 'transparent',
					backgroundColor: '#D7F4FF',
					dataBackground: {
						lineStyle: {
							width: 0
						},
						areaStyle: {
							color: 'transparent'
						}
					},
					fillerColor: '#00EBFF'
				}
			],	
			xAxis: {
                    type: 'time',
                    //min: new Date(startTime).setHours(7, 0, 0, 0),
                    //max: new Date(new Date(startTime).setDate(new Date(startTime).getDate() + 1)).setHours(7, 0, 0, 0),
                    interval: 3600000,
                    scale: true,
                    axisLabel: {
                        formatter: function (val) {
                            return new Date(val).toLocaleTimeString('en-US', { hour: '2-digit', minute: 'numeric', hour12: false });
                        }
                    },
                    splitLine: {
                        show: false
                    },
                    axisLine: {
                        show: false
                    },
                    axisTick: {
                        show: true,
                        lineStyle: {
                            color: '#333',
                            width: 2 
                        }
                    },
                    axisLabel: {
                        textStyle: {
                            color: '#333',
                            fontSize: '0.14rem'
                        },
                        show: true
                    }
                },
            yAxis: [
                {
                    yAxisIndex: 0,
                    type: 'category',
                    data: categories,
                    axisLine: {
                        show: false
                    },
                    axisTick: {
                        show: false
                    },
                    axisLabel: {
                        show: true,
                        textStyle: {
                            color: '#333',
                            fontSize: '0.12rem',
                            fontWeight: 'bolder',
                        }
                    }
                },
                {
                    yAxisIndex: 1,
                    type: 'category',
                    data: ["100%","80%"],
                    axisLine: {
                        show: false
                    },
                    axisTick: {
                        show: false
                    },
                    axisLabel: {
                        show: true,
                        textStyle: {
                            color: '#333',
                            fontSize: '0.12rem',
                            fontWeight: 'bolder',
                        }
                    }
                }
            ],
            series: [
                {
                    type: 'custom',
                    renderItem: renderItem,
                    itemStyle: {
                        opacity: 0.8
                    },
                    encode: {
                        x: [1, 2],
                        y: 0
                    },
                    data: datatemp
                }
            ]
        };
        myChart.setOption(option);
        myChart.on('click', function (params) {
            console.log(params);
        });
        window.addEventListener('resize', function () {
            chart.resize();
        });
    </script>
</body>
</html>

柱状图，当没有到达目标值时，柱子闪烁
在这里插入图片描述代码

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>跳转页面</title>
    <script type="text/javascript" src="jquery.min.js" asp-append-version="true"></script>
    <script type="text/javascript" src="echarts.js" asp-append-version="true"></script>
    <!--<script src="https://cdn.jsdelivr.net/npm/echarts@5.2.2/dist/echarts.min.js"></script>-->
</head>
<body>
    <div class="stratop">
        <div class="topTitle">

            <svg-icon icon-class="alarun" style="color:#5cd9e8; "></svg-icon>
            <span class="fs-xl text mx-2">员工产出</span>
        </div>
        <div id="bottomLeftChart" style="height:500px;background: black;  "></div>
    </div>

    <script>
        var data = [{ "PROJ_CODE": "NCCSAP", "PRODUCT_CODE": "TOSA_ADV2", "PRODUCT_SEQ": 4, "PROCESS_ID": "SIOB_BOND_PIC", "PROCESS_SEQ": 48, "OPERATOR_ID": "C01432", "INPUT_QTY": 4, "OUTPUT_QTY": 2, "FALL_QTY": 2, "YIELD": 50, "TARGET_VAULE": 19 }, { "PROJ_CODE": "NCCSAP", "PRODUCT_CODE": "TOSA_ADV2", "PRODUCT_SEQ": 4, "PROCESS_ID": "SIOB_BOND_PIC", "PROCESS_SEQ": 48, "OPERATOR_ID": "C02616", "INPUT_QTY": 15, "OUTPUT_QTY": 14, "FALL_QTY": 1, "YIELD": 93.33, "TARGET_VAULE": 19 }, { "PROJ_CODE": "NCCSAP", "PRODUCT_CODE": "TOSA_ADV2", "PRODUCT_SEQ": 4, "PROCESS_ID": "SIOB_BOND_PIC", "PROCESS_SEQ": 48, "OPERATOR_ID": "C02634", "INPUT_QTY": 21, "OUTPUT_QTY": 14, "FALL_QTY": 7, "YIELD": 66.67, "TARGET_VAULE": 19 }, { "PROJ_CODE": "NCCSAP", "PRODUCT_CODE": "TOSA_ADV2", "PRODUCT_SEQ": 4, "PROCESS_ID": "SIOB_BOND_PIC", "PROCESS_SEQ": 48, "OPERATOR_ID": "C02655", "INPUT_QTY": 2, "OUTPUT_QTY": 2, "FALL_QTY": 0, "YIELD": 100, "TARGET_VAULE": 19 }, { "PROJ_CODE": "NCCSAP", "PRODUCT_CODE": "TOSA_ADV2", "PRODUCT_SEQ": 4, "PROCESS_ID": "SIOB_BOND_PIC", "PROCESS_SEQ": 48, "OPERATOR_ID": "C03969", "INPUT_QTY": 18, "OUTPUT_QTY": 11, "FALL_QTY": 7, "YIELD": 61.11, "TARGET_VAULE": 19 }, { "PROJ_CODE": "NCCSAP", "PRODUCT_CODE": "TOSA_ADV2", "PRODUCT_SEQ": 4, "PROCESS_ID": "SIOB_BOND_PIC", "PROCESS_SEQ": 48, "OPERATOR_ID": "C03986", "INPUT_QTY": 3, "OUTPUT_QTY": 3, "FALL_QTY": 0, "YIELD": 100, "TARGET_VAULE": 19 }, { "PROJ_CODE": "NCCSAP", "PRODUCT_CODE": "TOSA_ADV2", "PRODUCT_SEQ": 4, "PROCESS_ID": "SIOB_BOND_PIC", "PROCESS_SEQ": 48, "OPERATOR_ID": "C04031", "INPUT_QTY": 2, "OUTPUT_QTY": 2, "FALL_QTY": 0, "YIELD": 100, "TARGET_VAULE": 19 }, { "PROJ_CODE": "NCCSAP", "PRODUCT_CODE": "TOSA_ADV2", "PRODUCT_SEQ": 4, "PROCESS_ID": "SIOB_BOND_PIC", "PROCESS_SEQ": 48, "OPERATOR_ID": "C04081", "INPUT_QTY": 17, "OUTPUT_QTY": 4, "FALL_QTY": 13, "YIELD": 23.53, "TARGET_VAULE": 19 }, { "PROJ_CODE": "NCCSAP", "PRODUCT_CODE": "TOSA_ADV2", "PRODUCT_SEQ": 4, "PROCESS_ID": "SIOB_BOND_PIC", "PROCESS_SEQ": 48, "OPERATOR_ID": "C04091", "INPUT_QTY": 6, "OUTPUT_QTY": 4, "FALL_QTY": 2, "YIELD": 66.67, "TARGET_VAULE": 19 }, { "PROJ_CODE": "NCCSAP", "PRODUCT_CODE": "TOSA_ADV2", "PRODUCT_SEQ": 4, "PROCESS_ID": "SIOB_BOND_PIC", "PROCESS_SEQ": 48, "OPERATOR_ID": "C04201", "INPUT_QTY": 1, "OUTPUT_QTY": 1, "FALL_QTY": 0, "YIELD": 100, "TARGET_VAULE": 19 }, { "PROJ_CODE": "NCCSAP", "PRODUCT_CODE": "TOSA_ADV2", "PRODUCT_SEQ": 4, "PROCESS_ID": "SIOB_BOND_PIC", "PROCESS_SEQ": 48, "OPERATOR_ID": "C04332", "INPUT_QTY": 2, "OUTPUT_QTY": 2, "FALL_QTY": 0, "YIELD": 100, "TARGET_VAULE": 19 }, { "PROJ_CODE": "NCCSAP", "PRODUCT_CODE": "TOSA_ADV2", "PRODUCT_SEQ": 4, "PROCESS_ID": "SIOB_BOND_PIC", "PROCESS_SEQ": 48, "OPERATOR_ID": "C04708", "INPUT_QTY": 10, "OUTPUT_QTY": 5, "FALL_QTY": 5, "YIELD": 50, "TARGET_VAULE": 19 }];
        var ToDayOperatorYieldChart = function () {
            var chart = document.getElementById("bottomLeftChart");
            var myChart = echarts.init(chart);
            // 定义X轴和两个Y轴的数据
            var xData = data.map(function (item) {
                return item.OPERATOR_ID;
            });
            var yData1 = data.map(function (item) {
                return item.OUTPUT_QTY;
            });
            var yData2 = data.map(function (item) {
                return item.YIELD;
            });
            var yData3 = data.map(function (item) {
                return item.TARGET_VAULE;
            });
            var vaulemax = Math.max.apply(null, yData1);
            // 配置图表选项
            var option = {
                title: { show: false },
                textStyle: {
                    color: '#fff',
                    fontSize: '0.16rem'
                },
                tooltip: {
                    show: true,
                    trigger: 'axis',
                    formatter: function (params) {
                        const order = ['TARGET', 'YIELD', 'OUTPUT_QTY', 'FALL'];
                        let tooltipString = params
                            .sort((a, b) => order.indexOf(a.seriesName) - order.indexOf(b.seriesName))
                            .map(p => `${p.marker} ${p.seriesName}: ${Math.round(p.value)}<br/>`)
                            .join('');
                        return tooltipString;
                    },
                    textStyle: {
                        fontSize: '0.14rem'
                    },
                    axisPointer: {
                        type: 'cross',
                        crossStyle: {
                            color: 'white'
                        }
                    }
                },
                grid: {
                    top: '10%',
                    left: '5%',
                    bottom: '12%',
                    width: '90%'
                },
                color: ['#FF3374','#07c160'],
                legend: {
                    data: ['TARGET', 'YIELD', 'OUTPUT_QTY', 'FALL'],
                    width: '100%',
                    itemGap: 20,
                    itemWidth: 10,
                    itemHeight: 10,
                    textStyle: {
                        color: '#fff',
                        fontSize: '0.16rem'
                    }
                },
                xAxis: {
                    type: 'category',
                    data: xData,
                    axisLabel: {
                        show: true,
                        interval: xData.length > 30 ? Math.floor(xData.length / 30) : 0,
                        rotate: 45,
                        color: '#fff',
                        fontSize: '0.14rem'
                    },
                    axisPointer: {
                        type: 'shadow'
                    }
                },
                yAxis: [
                    {
                        type: 'value',
                        //min: 0,
                        //max: Math.ceil(vaulemax),
                        //interval: Math.ceil(vaulemax / 6),
                        scale: true,//刻度范围一致
                        splitLine: { show: false },
                        axisTick: { //y轴刻度线
                            show: true
                        },
                        axisLine: { //y轴
                            show: true
                        },
                        axisLabel: {
                            textStyle: {
                                color: '#fff',
                                fontSize: '0.16rem'
                            }
                        }
                    },
                    {
                        type: 'value',
                        min: 0,
                        max: 120,
                        interval: 20,
                        scale: true,//刻度范围一致
                        splitLine: { show: false },
                        axisTick: { //y轴刻度线
                            show: true
                        },
                        axisLine: { //y轴
                            show: true
                        },
                        axisLabel: {
                            formatter: function (value) {
                                return value + '%';
                            },
                            textStyle: {
                                color: '#fff',
                                fontSize: '0.16rem'
                            }
                        }
                    }
                ],
                series: [
                    {
                        name: 'TARGET',
                        type: 'line',
                        yAxisIndex: 0,
                        data: yData3,
                        lineStyle: { normal: { width: 3 } },
                        areaStyle: {
                            normal: {
                                color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
                                    offset: 0,
                                    color: 'rgba(3, 194, 236, 0.5)'
                                }, {
                                    offset: 0.8,
                                    color: 'rgba(3, 194, 236, 0.1)'
                                }], false),
                                shadowColor: 'rgba(0, 0, 0, 0.1)',
                                shadowBlur: 12
                            }
                        },
                        itemStyle: { normal: { color: '#03C2EC' } }
                    },
                    {
                        name: 'YIELD',
                        type: 'line',
                        yAxisIndex: 1,
                        data: yData2,
                        lineStyle: { normal: { width: 3 } },
                        areaStyle: {
                            normal: {
                                color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
                                    offset: 0,
                                    color: 'rgba(237, 178, 23, 0.5)'
                                }, {
                                    offset: 0.8,
                                    color: 'rgba(237, 178, 23, 0.1)'
                                }], false),
                                shadowColor: 'rgba(0, 0, 0, 0.1)',
                                shadowBlur: 12
                            }
                        },
                        itemStyle: { normal: { color: '#edb217 ' } }
                    },
                    {
                        name: 'FALL',
                        type: 'bar',
                        stack: 'stack1',//堆叠stack属性
                        barCategoryGap: '50%', // 设置组内柱子的间距
                        /*barGap: '2%',        // 设置不同组之间的间距*/
                        barWidth: '40%',
                        data: data.map(function (item) {
                            return item.FALL_QTY;
                        }),
                        itemStyle: {
                            normal: {
                                color: '#FF3374',
                                shadowColor: 'rgba(0, 0, 0, 0.1)'
                            }
                        }
                    },
                    {
                        name: 'OUTPUT_QTY',
                        type: 'bar',
                        stack: 'stack1',// 堆叠stack属性
                        data: yData1,
                        barCategoryGap: '50%', // 设置组内柱子的间距
                        /*barGap: '2%',        // 设置不同组之间的间距*/
                        barWidth: '40%',
                        itemStyle: {
                            normal: {
                                barBorderRadius: [10, 10, 0, 0],
                                color: '#07C160',
                                shadowColor: 'rgba(0, 0, 0, 0.1)'
                            }
                        }
                    }
                ]
            };
            //myChart.setOption(option);
            //myChart.off('click');
            //myChart.getZr().on('click', (params) => {
            //    var pointInPixel = [params.offsetX, params.offsetY];
            //    var pointInGrid = myChart.convertFromPixel('grid', pointInPixel);
            //    if (myChart.containPixel('grid', pointInPixel)) {
            //        var chart_x = myChart.getOption().xAxis[0].data[pointInGrid[0]];
            //        //OperatorHourOutputChart(chart_x);
            //    }
            //});

            var sparkletimer = setInterval(changeColor, 1000);
            var type = 0;
            function changeColor() {
                option.series[2].itemStyle = {
                    normal: {
                        color: function (params) {
                            var targetvaule = data.find(item => item.OPERATOR_ID === params.name)?.TARGET_VAULE;
                            var inputvaule = data.find(item => item.OPERATOR_ID === params.name)?.INPUT_QTY;
                            if (type === 0 || inputvaule > targetvaule) {return '#FF3374';}
                            else {return 'rgba(0,0,0,0)';}
                            
                        }
                    }
                };
                option.series[3].itemStyle = {
                    normal: {
                        barBorderRadius: [10, 10, 0, 0],
                        color: function (params) {
                            var targetvaule = data.find(item => item.OPERATOR_ID === params.name)?.TARGET_VAULE;
                            var inputvaule = data.find(item => item.OPERATOR_ID === params.name)?.INPUT_QTY;
                            if (type === 0 || inputvaule > targetvaule) {return '#07C160';}
                            else {return 'rgba(0,0,0,0)';}
                        }
                    }
                };
                type = 1 - type;
                myChart.setOption(option, false);
                //clearInterval(sparkletimer);
                myChart.off('click');
                myChart.getZr().on('click', (params) => {
                    var pointInPixel = [params.offsetX, params.offsetY];
                    var pointInGrid = myChart.convertFromPixel('grid', pointInPixel);
                    if (myChart.containPixel('grid', pointInPixel)) {
                        var chart_x = myChart.getOption().xAxis[0].data[pointInGrid[0]];
                        //OperatorHourOutputChart(chart_x);
                    }
                });
            }
        };
        ToDayOperatorYieldChart();

        /*
        var chart = echarts.init(document.getElementById("bottomLeftChart"));
        var option = {
            title: {
                text: "",
                x: "center",
                y: 0,
                textStyle: {
                    color: "#B4B4B4",
                    fontSize: 16,
                    fontWeight: "normal"
                }
            },
            tooltip: {
                trigger: "axis",
                backgroundColor: "rgba(255,255,255,0.1)",
                axisPointer: {
                    type: "shadow",
                    label: {
                        show: true,
                        backgroundColor: "#7B7DDC"
                    }
                }
            },
            legend: {
                textStyle: {
                    color: "#B4B4B4"
                },
            },
            grid: {
                x: "11%",
                width: "80%",
                y: "4%"
            },
            xAxis: {
                data: [],
                axisLine: {
                    lineStyle: {
                        color: "#B4B4B4"
                    }
                },
                axisTick: {
                    show: false
                }
            },
            yAxis: [
                {
                    type: 'value',
                    splitLine: {
                        show: false
                    },
                    axisLine: {
                        lineStyle: {
                            color: "#B4B4B4"
                        }
                    },
                    axisLabel: {
                        formatter: "{value} "
                    }
                }
            ],
            series: [{
                type: "bar",
                barWidth: 50,
                itemStyle: {
                    normal: {
                        opacity: 1,
                        barBorderRadius: 10,
                        color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
                            offset: 0,
                            color: "#5e69ff"
                        },
                        {
                            offset: 1,
                            color: "#ffa4f3"
                        }])
                    }
                },
                data: []
            },
            ]
        };
        var category = ["C00340", 'C00341', 'C00342', 'C00348', 'C00349', 'C00350'];
        var data = [10, 12, 18, 20, 17, 16];
        draw(category, data);
        setInterval(changeColor, 500);

        function draw(category, data) {
            option.xAxis.data = category;
            option.series[0].data = data;
            chart.setOption(option);
        }

        var type = 0;
        function changeColor() {
            option.series[0].itemStyle.normal.color = new echarts.graphic.LinearGradient(0, 0, 0, 1, [
                { offset: 0, color: type === 0 ? "#ff3374" : "#eaa6c3" },
                { offset: 1, color: type === 0 ? "#ffa4f3" : "#e653ff" }
            ]);
            type = 1 - type;
            chart.setOption(option, true);
        }
        //function changeColor() {
        //    option.series[2].itemStyle.normal.color = type === 0 ? "#FF3374" : "rgba(0,0,0,0)";
        //    option.series[3].itemStyle.normal.color = type === 0 ? "#07C160" : "rgba(0,0,0,0)";
        //    type = 1 - type;
        //    myChart.setOption(option, true);
        //}
        */
    </script>
</body>
</html>

箱线图
在这里插入图片描述代码

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>跳转页面</title>
    <script type="text/javascript" src="jquery.min.js" asp-append-version="true"></script>
    <script type="text/javascript" src="echarts.js" asp-append-version="true"></script>
    <script type="text/javascript" src="dataTool.js" asp-append-version="true"></script>
    <!--<script src="https://cdn.jsdelivr.net/npm/echarts@5.2.2/dist/echarts.min.js"></script>-->
    <style>
        .tooltip > p {
            height: 0.25rem;
            line-height: 0.25rem;
        }

        .tooltip > p > label, .tooltip > p > span {
            color: #2C3444;
            height: 0.2rem;
            font-family: Arial;
            font-size: 0.14rem;
            font-weight: bold;
        }

        .tooltip > p > span {
            float: right;
        }
    </style>
</head>
<body>
    <div class="stratop">
        <div class="topTitle">
            <div id="bottomLeftChart" style="height:500px;"></div>
        </div>
    </div>

    <div class="stratop">
        <div class="topTitle">
            <div id="bottomLeftChart2" style="height:200px;"></div>
        </div>
    </div>

    <script type="text/javascript">
        // 基于准备好的dom，初始化echarts实例
        let myChart = echarts.init(document.getElementById('bottomLeftChart'));
        // echarts.dataTool.prepareBoxplotData--处理盒须图需要的数据格式
        let ydata = echarts.dataTool.prepareBoxplotData([
            [132.43, 106.84, 123.98, 117.85, 121.02],
            [133.67, 106.24, 123.98, 117.85, 121.02],
            [135.43, 106.94, 123.98, 117.85, 121.02],
            [132.43, 106.84, 128.98, 117.85, 121.02],
            [137.43, 106.84, 123.98, 117.85, 121.02],
            [132.43, 109.84, 123.98, 115.85, 121.02],
            [132.43, 116.84, 123.98, 117.85, 131.02],
        ], {
            boundIQR: 'none',//是否需要计算
        })
        let option = {

            tooltip: {
                show: true,
                trigger: 'axis',
                textStyle: {
                    color: 'red',
                    fontSize: '0.13rem',
                    align: 'left'
                },
                axisPointer: {
                    type: 'line',
                    lineStyle: {
                        width: 1,
                        color: "#84afaa",
                        type: "dashed"
                    }
                },
                formatter: function (params) {
                    var txt = `
                        <div class="tooltip">
                            <p><label>${params[0].name}</label></p>
                            <p><label>${params[0].marker}上限值(Max):</label><span>${params[0].data[5]}</span></p>
                            <p><label>${params[0].marker}Q3(上四分位数):</label><span>${params[0].data[4]}</span></p>
                            <p><label>${params[0].marker}Q2(中位数):</label><span>${params[0].data[3]}</span></p>
                            <p><label>${params[0].marker}Q1(下四分位数):</label><span>${params[0].data[2]}</span></p>
                            <p><label>${params[0].marker}下限值(Min):</label><span>${params[0].data[1]}</span</p>
                            <p><label>${params[1].marker}平均值:</label><span>${params[1].value}</span></p>
                        </div>`;
                    return txt;
                }
            },
            grid: {
                left: '10%',
                right: '15%',
                bottom: '10%'
            },
            xAxis: {
                type: 'category',
                name: 'Item',
                boundaryGap: true,
                nameGap: 30,
                nameLocation: "middle",
                splitArea: {
                    show: false,
                },
                splitLine: {
                    show: false,
                },
                axisTick: {
                    show: false,
                },
                axisLine: {
                    show: false,
                },
                data: [445, 450, 455, 460, 465, 470, 475]
            },
            yAxis: [{
                type: 'value',
                name: '测\n试\n项\n值\n︵\nval\n︶',
                nameGap: 40,
                nameRotate: 360,
                nameLocation: "center",
                splitArea: {
                    show: true,
                },
                axisTick: {
                    show: false,
                },
                axisLine: {
                    show: false,
                },
            }, {
                type: 'value',
                name: `{legend|} {value|平均值}`,
                show: false,
                axisLabel: {
                    show: false,
                },
                axisTick: {
                    show: false,
                },
                axisLine: {
                    show: false,
                },
                axisLine: {
                    show: false,
                },
                nameTextStyle: {
                    rich: {
                        legend: {
                            width: 50,
                            height: 2,
                            backgroundColor: "#fbd173"
                        }
                    }
                }
            },],
            series: [{
                name: '',
                type: 'boxplot',
                itemStyle: {
                    borderColor: "#31c2e8",
                    color: "#0080cc"
                },
                data: ydata.boxData,
            },
            {
                name: '平均值',
                type: 'line',
                color: "#fbd173",
                yAxisIndex: 1,
                showSymbol: false,
                data: [120.77, 120.26, 120.22, 120.38, 119.9, 121.79, 120.65]
            }
            ]
        };
        myChart.setOption(option);
    </script>
</body>
</html>

前端

YANG-Live
关注
echart 做的一个设备运行状态
07-24 1810
<!-- Licensed to the Apache Software Foundation (ASF) under one or more contributor license agreements. See the NOTICE file distributed with this work for additional information regarding copyright ownership. The ASF licenses this file to you under the A
vue+Echarts实现多设备状态甘特图
m0_64664995的博客
03-24 1726
甘特图图表可能会不显示，原因一般是在获取到数据之前图表就挂载上了，然后数据更新后并没有更新图表数据。这里本人的方法是在获取到数据的后面调用挂载图表的函数，当然这肯定不是最好的方法。根据每个设备的不同的状态，和对应状态的持续时间渲染矩形。可鼠标滚轮图表和拉动下方蓝色的条条调节时间细节哦。（注：最后一个设备没有数据，所以不显示任何矩形）
echarts实现项目进度甘特图
最新发布
qq_45840993的博客
05-23 712
在ECharts中，虽然没有直接支持甘特图的配置项，但可以通过柱状图来模拟实现。本文提供了一个具体的配置示例，展示了如何使用ECharts的柱状图功能来创建甘特图。配置中包括背景颜色、图例、网格、坐标轴、提示框和系列等设置。通过设置不同的系列（如“计划时间”和“实际时间”），并使用堆叠柱状图的方式，可以有效地展示项目的时间进度。此外，还通过自定义工具提示和标签格式，增强了图表的可读性和信息量。这种模拟方法为需要在ECharts中展示甘特图的用户提供了一个实用的解决方案。
Echarts 实现 设备运行状态图(甘特图) 工业大数据展示
Heby的博客
10-24 3445
以上就是echarts性能图的option配置。
echarts设备状态运行图
cjy_fly的博客
01-11 2725
echarts设备状态运行图
使用ECharts实现状态区间图
12-12
需求背景 假如有如下图所示的图表需要显示多个网口在一段时间内的多个状态：y轴用于展示各网口，x轴用于展示时间(分钟)，使用条形图的不同颜色来表示不同时间区间段的状态，使用深蓝、浅蓝、橙色、红色分别代表正常、繁忙、故障、离线四种状态。以WAN0为例，图中则表示了0~10分钟为正常，10~25分钟为繁忙，25~45分钟为故障，45~60分钟为离线。 根据此图，很容易想到可以用条形图试试。但后来发现，如果用堆叠条形图，则每种状态在每一个网口对应的图形中只能出现一次，这不能实现需求。于是继续查阅echart官网示例，终于在自定义类型图表中找到了一个相似的示例，地址 通过研究示例代码并进行一番改造，终
echarts绘制甘特图
Run_youngman的博客
08-03 7358
本文介绍了使用echarts实现甘特图效果的实现思路分析以及部分技术方案
设备状态图表-甘特图
weixin_41262185的博客
08-20 1461
甘特图、设备状态监控图表、E chart、大屏监控
vue中echarts实现甘特图
vue+iview 动态渲染表格（vue.js结合iview插件）
12-24 1万+
vue中使用echarts实现甘特图，在网上找了很多代码都不完整，大家可以尝试下面这个从官网搬运过来的阶梯瀑布图，做了小更改 效果如下： &lt;template&gt; &lt;div id="myChart" ref="chart" &gt;&lt;/div&gt; &lt;/template&gt; &lt;script&gt; export default {
ECharts+html大数据可视化大屏展示模板：新能源车联网项目施工设备状态物流大数据分析.zip
12-22
在“新能源车联网项目施工设备状态物流大数据分析.zip”这个压缩包中，包含了多个ECharts为基础的大数据可视化模板，具体包括： 1. **007设备状况大数据展示模板**： 这个模板可能展示的是施工现场设备的工作状态...
echarts甘特图
weixin_47902184的博客
08-09 4516
echarts甘特图，工单甘特图
echarts 甘特图
weixin_43965881的博客
03-12 1872
【代码】echarts 甘特图。
Echarts 实现 设备运行状态图 工业大数据展示
热门推荐
又是再见?
05-10 1万+
设备运行状态图需求：翻阅echarts 官网实例， 发现其中的 profile 图就是想要的效果：http://echarts.baidu.com/examples/editor.html?c=custom-profilevar data = []; var dataCount = 100;// 测试数据条数 var startTime = 1525835791000; // 2018/5/9 1...
echarts实现甘特图
FinelyYang的专栏
06-30 7707
效果如下图：y轴为餐桌编号，x轴为客人预订的时间： 以8号餐桌为例，甘特数据为阴影部分，表示不同时间段客人用餐占用的时间。如果时间段有交集则说明有时间冲突，应做时间调整。 vue 部分代码： <template> <div id="gt-chart" ref="gt-chart"></div> </div> </template> <script> //初始化柱状图...
echarts甘特图可以堆叠吗
07-06
ECharts 的甘特图确实支持堆叠功能。通过设置 `stack` 参数为 `true` 或者一个具体的值，你可以让甘特图中的各个条形按照指定的方式堆叠起来。这通常用于显示任务之间的资源分配情况，比如每个任务占用了多少时间或成本。在配置项中，你可以调整每个系列的数据堆叠属性以及堆叠模式，例如 `series[i].stack` 来控制每组数据是否堆叠。 以下是堆叠甘特图的基本配置示例： ```javascript var option = { xAxis: { type: 'category', data: ['任务1', '任务2', '任务3'] }, yAxis: { type: 'value' }, series: [ { name: 'A', type: 'gauge', stack: '总量', // ...其他配置... }, { name: 'B', type: 'gauge', stack: '总量', // 如果你想堆叠到一起 // ...其他配置... } ] }; ```
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值