一看就会，超有用活字格技能：二百零九、使用Echarts插件实现时序图
本帖最后由 Lay.Li 于 2024-9-29 18:37 编辑大家好啊，不知不觉活字格的10.1就要发布了，不知道10.0大家觉得怎么样呢:itwn:
10.0中有几个重磅的功能，其中一个就是echarts插件，有了echarts插件，大家就可以更加随心所欲的使用echarts的图表了，那么今天给大家带来的一个解决方案是比较常见的一个需求，就是图表去直观的展示一个设备的状态时序图，类似于下图这种
话不多说，我们直接开干，首先来看一下我们的数据表结构，首先我们有设备的状态历史表，这张表中记录了每个设备的名称，以及 各个状态的开始和结束时间
然后，使用echats图表插件，数据源选择我们的数据表，然后写入下方的代码即可。代码比较多，大家在使用时，需要关注上方的这部分代码。需要将代码里的设备名, 状态, 开始时间, 结束时间。修改为自己使用时数据源这里设置的列名即可
然后如果需要新增状态，或者修改状态的颜色，只需要修改state和colors的值就行
//获取数据表中的数据
const { 设备名, 状态, 开始时间, 结束时间 } =
ForguncyEchartsHelper.splitDataSource(Context.Data);
//状态的名称和颜色，可以修改和添加
var state = ['待机', '加工', '故障', '关机'];
var colors = ['#2f4554', '#61a0a8', '#d48265', '#c23531'];
var data = [];
var yAxisData = [...new Set(设备名)];
for (let i = 0; i <= 设备名.length; i++) {
let name = 设备名;
let status = 状态;
let start = oaDateToHours(开始时间);
let end = oaDateToHours(结束时间);
let item = {
name: name,
value: , 结束时间],
itemStyle: {
normal: {
color: colors
}
}
}
data.push(item);
}
至于其他部分的代码，就不详细解释了，感兴趣的格友可以参考echarts自定义系列和性能分析图，自行研究哈:loveliness:
页:
[1]