var seriesDataList = [[0, 324, [324, 332, ]], [99, 332, [324, 332,]], ['-', '-'], [0, 561, [561, 568, ]], [99, 568, [561, 568,
]], ['-', '-'], [0, 700, [700, 694, ]], [99, 694, [700, 694, ]], ['-', '-'], [0, 945,
[945, 937, ]], [99, 937, [945, 937, ]], ['-', '-'], [0, 1253, [1253, 1262, ]],
[99, 1262, [1253, 1262,]], ['-', '-'], [0, 1287, [1287, 1281, ]], [99, 1281, [1287, 1281, ]],
['-', '-'], [100, 332, [332, 336,]], [199, 336, [332, 336,]], ['-', '-'], [100, 484,
[484, 488, ]], [199, 488, [484, 488,]], ['-', '-'], [100, 568, [568, 572, ]],
[199, 572, [568, 572,]], ['-', '-'], [100, 605, [605, 600, ]], [199, 600, [605, 600, ]],
['-', '-'], [100, 694, [694, 692, ]], [199, 692, [694, 692, ]], ['-', '-'],
[100, 798, [798, 802, ]], [199, 802, [798, 802,]], ['-', '-'], [100, 843, [843, 847,
]], [199, 847, [843, 847, ]], ['-', '-'], [100, 937, [937, 932,
]], [199, 932, [937, 932, ]], ['-', '-'], [100, 1004, [1004, 999, ]], [199, 999, [1004, 999,
]], ['-', '-'], [100, 1262, [1262, 1267,
]], [199, 1267, [1262, 1267,
]], ['-', '-'], [100, 1281, [1281, 1277,
]], [199, 1277, [1281, 1277,
]], ['-', '-'], [200, 336, [336, 342,
]], [299, 342, [336, 342,
]], ['-', '-'], [200, 373, [373, 368,
]], [299, 368, [373, 368,
]]]
//电子巡查--柱状图
let roundsDataList = [{
value: [0, 120, 0, 100, {
// value: [0, 60, 0, 100]==[y开始下标,y结束下标,x开始值,x结束值]
name: '京台高速'
}]
}
, {
value: [360, 420, 0, 100, {
name: '京台高速'
}]
}, {
value: [360, 480, 100, 200, {
name: '京台高速'
}]
}, {
value: [540, 660, 200, 300, {
name: '京台高速'
}]
}
]
// seriesDataList=[]
console.log(seriesDataList)
let lastRoadCode = ''
option = {
'color': ['#37A2DA', '#32C5E9', '#67E0E3', '#9FE6B8', '#FFDB5C', '#ff9f7f', '#fb7293', '#E062AE', '#E690D1', '#e7bcf3', '#9d96f5', '#8378EA', '#96BFFF'],
'tooltip': {
confine: true,
//坐标轴触发
trigger: 'axis',
enterable: true,
extraCssText: 'max-height:500px;overflow: auto;',
axisPointer: { //鼠标经过的时候，暂不显示线
type: 'none' //'line' | 'cross' | 'shadow' | 'none
},
//改变提示框的位置 不超出屏幕显示
// position: function(point, params, dom, rect, size) {
// //其中point为当前鼠标的位置，
// //size中有两个属性：viewSize和contentSize，分别为外层div和tooltip提示框的大小
// // 鼠标坐标和提示框位置的参考坐标系是：以外层div的左上角那一点为原点，x轴向右，y轴向下
// // 提示框位置
// var x = 0 // x坐标位置
// var y = 0 // y坐标位置
// // 当前鼠标位置
// var pointX = point[0]
// var pointY = point[1]
// // 提示框大小
// var boxWidth = size.contentSize[0]
// var boxHeight = size.contentSize[1]
// // boxWidth > pointX 说明鼠标左边放不下提示框
// if (boxWidth > pointX) {
// x = 5
// } else {
// // 左边放的下
// x = pointX - boxWidth
// }
// // boxHeight > pointY 说明鼠标上边放不下提示框
// if (boxHeight > pointY) {
// y = 5
// } else {
// // 上边放得下
// y = pointY - boxHeight
// }
// return [x, y]
// },
},
'yAxis': {
splitLine: {
show: true,
lineStyle: {
type: 'dashed'
}
},
name: '时间',
nameLocation: 'middle',
nameGap: 25,
nameTextStyle: {
color: '',
fontSize: 16
},
min: 0,
max: 60 * 24,
show: true,
type: 'value',
inverse: true,
interval: 60,
axisTick: {
// 坐标轴刻度
show: false
},
axisLine: {
show: false
},
axisLabel: {
textStyle: {},
formatter: function(value, index) {
if (index < 10) {
return '0' + index + '/' + value
} else {
return index + '/' + value
}
}
}
},
'xAxis': [{
'show': false,
'min': 0,
'max': 1099
},
{
'type': 'category',
data: [{
value: '京台鲁冀界-德州站_G3 (K299+000 至 K308+977)',
textStyle: {
width: 50
}
}, {
value: '德州站-德州南站_G3 (K308+977 至 K314+402)',
textStyle: {
width: 50
}
}, {
value: '德州南站-孙家集立交_G3 (K314+402 至 K321+662)',
textStyle: {
width: 50
}
}, {
value: '孙家集立交-平原站_G3 (K321+662 至 K334+495)',
textStyle: {
width: 50
}
}, {
value: '平原站-平原南站_G3 (K334+495 至 K347+119)',
textStyle: {
width: 50
}
}, {
value: '平原南站-禹城站_G3 (K347+119 至 K367+352)',
textStyle: {
width: 50
}
}, {
value: '禹城站-禹城东站_G3 (K367+352 至 K373+664)',
textStyle: {
width: 50
}
}, {
value: '禹城东站-齐河北枢纽_G3 (K373+663 至 K381+458)',
textStyle: {
width: 50
}
}, {
value: '齐河北枢纽-齐河站_G3 (K381+458 至 K384+997)',
textStyle: {
width: 50
}
}, {
value: '齐河站-晏城（池庄）枢纽_G3 (K384+997 至 K392+111)',
textStyle: {
width: 50
}
}, {
value: '晏城（池庄）枢纽-齐河生态城站_G3 (K392+111 至 K396+500)',
textStyle: {
width: 50
}
}],
// 'data': ['京台鲁冀界-德州站_G3 (K299+000 至 K308+977)', '德州站-德州南站_G3 (K308+977 至 K314+402)', '德州南站-孙家集立交_G3 (K314+402 至 K321+662)', '孙家集立交-平原站_G3 (K321+662 至 K334+495)', '平原站-平原南站_G3 (K334+495 至 K347+119)', '平原南站-禹城站_G3 (K347+119 至 K367+352)', '禹城站-禹城东站_G3 (K367+352 至 K373+664)', '禹城东站-齐河北枢纽_G3 (K373+663 至 K381+458)', '齐河北枢纽-齐河站_G3 (K381+458 至 K384+997)', '齐河站-晏城（池庄）枢纽_G3 (K384+997 至 K392+111)', '晏城（池庄）枢纽-齐河生态城站_G3 (K392+111 至 K396+500)'],
'show': true,
'axisTick': {
'show': false
},
'axisLine': {
'show': false
},
'splitLine': { 'show': true, 'lineStyle': { 'type': 'dashed', 'color': ['#ccc'], 'width': 1 } },
// 坐标轴刻度标签的设置
axisLabel: {
interval: 0,
padding: [-100, 10, 0, 10], //上右下左
formatter: function(param) {
let result = ''
let arr = param.split('_')
result = arr[0] + '\n\n' + arr[1]
return result
}
}
}
],
'grid': {
left: -10,
right: 10,
top: 25,
bottom: -10,
containLabel: true
},
'series': [{
name: '道路巡查',
type: 'line',
showSymbol: true,
clip: true,
data: seriesDataList,
symbolSize: 0,
itemStyle: {
}
}, {
'name': '上报事件',
'type': 'effectScatter',
'label': {
'show': true,
'position': 'top',
'textStyle': { 'color': 'rgba(255,55,135,1)', 'fontSize': 10 },
'fontSize': 10,
'color': 'rgba(255,55,135,1)'
},
'itemStyle': { 'color': 'rgba(255,55,135,1)' },
'symbol': 'circle',
'symbolPosition': 'end',
'symbolSize': 4,
'symbolOffset': [0, '-120%'],
'data': [[250, 689, {
'searchValue': null,
'createBy': null,
'createTime': null,
'updateBy': null,
'updateTime': null,
'remark': '可随手处置，已处置完成',
'dataScope': null,
'params': {},
'id': 12413,
'userId': null,
'nickName': '岳乃强',
'userPhone': '13805344701',
'deptCode': '010105',
'deptName': '德州运管中心--德州路管分中心',
'eventId': 1,
'eventName': '道路异常',
'subEventId': null,
'subEventName': '抛撒物_可随手清理',
'roadName': 'G3_京台高速',
'stationCode': null,
'stationName': null,
'pile': null,
'pileNormal': 'K318+010M',
'status': '结束',
'pushstatus': null,
'linkSystemType': 99,
'linkSystemId': '0',
'content': '[车道]:行2 [方向]:下行 [物品]:动物尸体 [事件类型]:抛撒物',
'typeName': null,
'updateUserId': null,
'imgList': '["https://96659.sdhsg.com/lzz/lzz-img/reportImg/010100/3367/tmp_e01a0f6f3d2b0bf3f14927ededb34be3dda699c35c7a6854.jpg"]',
'supplement': '',
'reportTime': '2022-07-13 11:29:23',
'flag': null,
'pileNum': 318010,
'yAxisIndex': 689
}]]
}, {
'name': '电子巡查',
type: 'custom',
renderItem: renderItem,
itemStyle: {
normal: {
color: '#75d874',
opacity: 0.68
}
},
zlevel: 100,
data: roundsDataList
}
, {
name: '路管事件',
type: 'line',
data: [
[180, 0],
[180, 120],
['', ''],
[220, 0],
[220, 200]
],
hoverAnimation: false,
itemStyle: {
normal: {
color: '#ff8600',
opacity: 0.68
}
},
emphasis:{
scale:false
},
showSymbol: true,
symbolSize: 4,
}
],
'visualMap': [],
'legend': {
show: true,
orient: 'horizontal', //'vertical'
data: ['道路巡查', '上报事件', '电子巡查', '路管事件'],
// icon: 'circle',
selectedMode: true,
itemWidth: 10,
itemHeight: 10,
itemGap: 20,
textStyle: {
fontSize: 13,
color: '#9bc8ff'
},
x: 'center',
y: '5'
}
}
function renderItem(params, api) {
var start = api.coord([api.value(2), api.value(0)])
var rectShape = echarts.graphic.clipRectByRect({
x: start[0],
y: start[1],
width: api.size([100, 1])[0] * ((api.value(3) - api.value(2)) / 100),
height: api.size([100, 1])[1] * (api.value(1) - api.value(0))
}, {
x: params.coordSys.x,
y: params.coordSys.y,
width: params.coordSys.width,
height: params.coordSys.height
})
return rectShape && {
type: 'rect',
shape: rectShape,
style: api.style()
}
}