效果图表
重点属性x轴用于区分时间轴，type类型为http://www.Sina.com/http://www.Sina.com /后面的背景颜色(标记area写在serize中， 想要几个颜色块的serize下面有几个对象(如果图像中正常的异常字符是time的markArea一个轴是时间轴，则数据按时间顺序排序) 否则，潜在问题) 3358www.Sina.com) )时请尽量设置时间轴上的markArea和label。 此表max和min在时间戳的y轴等分方面存在问题。 看下面的博客解决问题点击我直奔等分问题。 在本表中平分，使用的数值为60个代码。 请点击官方示例页面的链接。 记载在官方样品上
let data=[ xxt : ' 2020-08-036336038336008 '，value : [ ' 2020-08-041336010:08 '，' 40']}，{ xxt } value { xxt : ' 2020-08/036336038336008 '，value : [ ' 2020/036336038336008 ] { xxt : (2020-08/036:3833608 ) {XXT3360 ) 2020 } value : [ ' 2020/08/045336038336012 '，' 37']}，{ xxt : ' 2020-08/03633603836008 '，value value : (2020/08/047336038336014 (，46 ) )，{XXT3360 ) 2020 } value : [ ' 2020/08/05833603836015 '，' 32 value : [ ' 2020/08/036336038336008 ] { xxt : ' 2020/08/036336038336008 '，value : [ ' 2020/08/0511136013 lettimestamp=(newdate () ).getTime )； let min=timestamp-24 * 60 * 60 * 1000 *3option={ title : } text : '、left:'50% '、top:'5% '，} COP iparams.length； I ) if(I==0) if ) params[I].data.value[1]50 ) { RES=' p span style=' width :10 px； 文本对齐3360中心； height:10px； border-radius:50%； display :在线区块； line-height:30px； margin-right:4px； 背景： # 0e 9863 '/span ' '正常' '/p ' ' else { RES=' pspanstyle=' width :10 px； 文本对齐3360中心； height:10px； border-radius:50%； display :在线区块； line-height:30px； margin-right:4px； 背景： # d 22123 '/span ' '异常' '/p ' ' else {/RES=' pspanstyle=' width 336010 px； height:10px； border-radius:50%； display :在线区块； line-hei
ght:30px;margin-right:4px;background:'+params[i].color+'"></span>'+params[i].seriesName+':'+params[i].data[1]+'</p>' } } return res; } }, legend: { show:false, orient: "vertical", left: "left", data: [ { name: "低故障率", icon: "bar" }, { name: "高故障率", icon: "bar" }, ], selected: { 低故障率: true, 高故障率: true, //不想显示的都设置成false }, }, color:['#FF9999','#9FEDA3','#333'], xAxis: { boundaryGap: false, nameLocation: "center", type: "time", min:min, max: Date.now(), show: true, splitNumber:3, axisLabel:{ show:true, formatter: function (value, index) { // 格式化成月/日，只在第一个刻度显示年份 let date = new Date(value); let month = date.getMonth() + 1< 10 ? '0'+(date.getMonth() + 1):date.getMonth() + 1; let day = date.getDate() < 10 ? '0'+date.getDate():date.getDate(); let hours = date.getHours() < 10 ? '0'+ date.getHours():date.getHours(); let minutes = date.getMinutes() < 10 ? '0'+date.getMinutes() : date.getMinutes(); let texts = [month, day]; let texts2 = [hours,minutes]; return texts.join('/')+"n"+texts2.join(':'); } }, axisTick: { show: true, }, }, grid: { top: "15%", bottom: "5%", containLabel: true, }, yAxis: { splitLine : { show : 'true' }, nameGap: 35, name: "", min: 0, max: 60, splitNumber: 2, type: 'value', axisLabel:{ show:false, formatter: function (value) { if(value >50){ return '正常' }else{ return '异常' } }, }, }, series: [ //就是从这个地方开始的 主要用的是markArea 和legend { name: "异常数据", type: "line", animation: false, areaStyle: { normal: {}, }, lineStyle: { normal: { width: 1, }, }, markArea: { silent:true, //图形是否不响应和触发鼠标事件，默认为 false，即响应和触发鼠标事件 label : { //Y轴上的异常文字相关配置 show : true, padding : [ 5, 5, 5, 5 ], //[ 上, 右, 下, 左 ] //backgroundColor : 'rgba(241,19,45,1)', position: [-42, '50%'], //[上下, 左右] fontSize :10, color : '#000', formatter : ' ' + '异常' + ' ' //文字的格式 （格式一） //formatter: function (value 或者 params 或者 value,index) { //（格式二） // if(value >50){ // return '正常' // }else{ // return '异常' // } // }, }, data: [ //判定颜色显示区域，从0-30是红色 [ { yAxis: "0", }, { yAxis: "30", }, ], ], }, }, { name: "正常数据", type: "line", animation: false, areaStyle: { normal: {}, }, lineStyle: { normal: { width: 1, }, }, markArea: { silent:true, label : { show : true, padding : [ 5, 5, 5, 5 ], /* backgroundColor : '#4d41bb', */ position: [-42, '50%'], fontSize :10, color : '#000', formatter : ' ' + '正常' + ' ' }, data: [ [ { yAxis: "30", }, { yAxis: "60", }, ], ], }, }, { name: 数据",//折线图 type: "line", data:data }, ],};