Echrtas 实时渲染

1.实时曲线图

  • 业务场景:每个时间节点产生一个数据,且时间节点间隔不固定
  • 坐标轴配置:X轴类型设定为time,Y轴类型设定为value
  • 数据格式:每个节点的数据都是一个数组,第一个数组为时间,第二个元素为值
//渲染参数
                        var option = {
                            title: {
                                text: '今日稼动率趋势'
                            },
                            tooltip: {
                                trigger: 'axis',
                            },
                            xAxis: {
                                type: 'time',
                                splitLine: {
                                  show: false
                                },
                                axisTick:{
                                    show: false
                                },//刻度
                                axisLine:{
                                    show: true, lineStyle:{ type: 'solid',color: '#9797976c'}
                                },//坐标轴线
                                axisLabel: {fontSize: 14, color: '#141414'}
                            },
                            yAxis: {
                                type: 'value',
                                min: 0,
                                max: 100,
                                splitLine: {
                                  show: true, lineStyle:{ type: 'dashed',color: '#cfcfcf'}
                                },
                                axisLine:{
                                    show: true, lineStyle:{ type: 'solid',color: '#9797976c'}
                                },//坐标轴线
                                axisLabel:{
                                    show: true, formatter: '{value}%'
                                },
                                axisLabel: {fontSize: 14, color: '#141414'}
                            },
                            series: [
                                {
                                  name: '稼动率',
                                  type: 'line',
                                  showSymbol: false,
                                  data: [
                                      [1684380901431,70],
                                      [1684380905431,60],
                                      [1684380910431,30],
                                      [1684380911431,50],
                                      [1684380913431,60],
                                      [1684380916431,70]
                                  ]
                                }
                            ]
                        }
posted @ 2023-05-18 14:12  ---空白---  阅读(29)  评论(0编辑  收藏  举报