option = {
grid: {
left: 80,
right: 25,
top: 45,
bottom: 45
},
toolbox: {
iconStyle: {
borderColor: '#ffffff'
},
right: '18',
feature: {
saveAsImage: {
show: true,
backgroundColor: '#010313'
}
}
},
tooltip: {
show: true,
trigger: 'axis',
formatter: (params) => {
let name = '';
name = name.replace(/\n/g, '');
return (
params[0].marker +
params[0].data[2] +
'<br/>' +
name +
':' +
params[0].data[1]
);
}
},
xAxis: {
type: 'value',
name: '',
nameGap: 30,
min: 0,
nameLocation: 'center',
boundaryGap: false,
nameTextStyle: {
color: '#ffffff'
},
axisLabel: {
color: '#ffffff',
interval: 6
},
splitLine: {
show: true,
lineStyle: {
color: '#707070'
}
},
max: 120,
interval: 72
},
dataZoom: [
{
zoomLock:true,
start: 0,
end: 20
}
],
yAxis: {
type: 'value',
name: "",
nameGap: 58,
nameRotate: 360,
nameLocation: 'middle',
nameTextStyle: {
color: '#ffffff',
align: 'center'
},
axisLabel: {
color: '#ffffff'
},
splitLine: {
show: true,
lineStyle: {
color: '#707070'
}
},
axisLine: {
lineStyle: {
color: '#707070'
}
},
scale: true
},
series: [
{
dimensions: ['distanceX', 'valueY', 'time', 'showSymbol'],
encode: {
x: 'distanceX', // 默认 x轴
y: 'valueY', // 默认 y 轴
unit: 'unit', // 单位 自定义的数据, 可用于 formatter
time: 'time',
tooltip: ['time']
},
data: [
[0, '0.013', '2021-10-11 00', null,0],
[1, '0.019', '2021-10-11 01', null,50],
[2, '0.025', '2021-10-11 02', null,90],
[3, '0.029', '2021-10-11 03', null,100],
[4, '0.030', '2021-10-11 04', null,360],
[5, '0.029', '2021-10-11 05', null,45],
[6, '0.027', '2021-10-11 06', null,-180],
[7, '0.030', '2021-10-11 07', null,90],
[8, '0.035', '2021-10-11 08', null,90],
[9, '0.040', '2021-10-11 09', null,90],
[10, '0.041', '2021-10-11 10', null,90],
[11, '0.037', '2021-10-11 11', null,90],
[12, '0.029', '2021-10-11 12', null,90],
[13, '0.020', '2021-10-11 13', null,90],
[14, '0.019', '2021-10-11 14', null,90],
[15, '0.026', '2021-10-11 15', null,90],
[16, '0.033', '2021-10-11 16', null,90],
[17, '0.036', '2021-10-11 17', null,90],
[18, '0.036', '2021-10-11 18', null,90],
[19, '0.031', '2021-10-11 19', null,90],
[20, '0.025', '2021-10-11 20', null,90],
[21, '0.018', '2021-10-11 21', null,90],
[22, '0.010', '2021-10-11 22', null,-90],
[23, '0.002', '2021-10-11 23', null,90]
],
type: 'line',
smooth: true,
symbol:"image://data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAALkAAAC4CAYAAAC/8U35AAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAA3ZpVFh0WE1MOmNvbS5hZG9iZS54bXAAAAAAADw/eHBhY2tldCBiZWdpbj0i77u/IiBpZD0iVzVNME1wQ2VoaUh6cmVTek5UY3prYzlkIj8+IDx4OnhtcG1ldGEgeG1sbnM6eD0iYWRvYmU6bnM6bWV0YS8iIHg6eG1wdGs9IkFkb2JlIFhNUCBDb3JlIDUuNi1jMDY3IDc5LjE1Nzc0NywgMjAxNS8wMy8zMC0yMzo0MDo0MiAgICAgICAgIj4gPHJkZjpSREYgeG1sbnM6cmRmPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5LzAyLzIyLXJkZi1zeW50YXgtbnMjIj4gPHJkZjpEZXNjcmlwdGlvbiByZGY6YWJvdXQ9IiIgeG1sbnM6eG1wTU09Imh0dHA6Ly9ucy5hZG9iZS5jb20veGFwLzEuMC9tbS8iIHhtbG5zOnN0UmVmPSJodHRwOi8vbnMuYWRvYmUuY29tL3hhcC8xLjAvc1R5cGUvUmVzb3VyY2VSZWYjIiB4bWxuczp4bXA9Imh0dHA6Ly9ucy5hZG9iZS5jb20veGFwLzEuMC8iIHhtcE1NOk9yaWdpbmFsRG9jdW1lbnRJRD0ieG1wLmRpZDplMWUxZmI2OC0xOTZkLTE0NDMtOWViNi0yODY3NmY5OGE0ZTAiIHhtcE1NOkRvY3VtZW50SUQ9InhtcC5kaWQ6NDU3RUU4RUI1NjdCMTFFQzk4OTc4MUUwM0E4RDFFRTQiIHhtcE1NOkluc3RhbmNlSUQ9InhtcC5paWQ6NDU3RUU4RUE1NjdCMTFFQzk4OTc4MUUwM0E4RDFFRTQiIHhtcDpDcmVhdG9yVG9vbD0iQWRvYmUgUGhvdG9zaG9wIENDIDIwMTUgKFdpbmRvd3MpIj4gPHhtcE1NOkRlcml2ZWRGcm9tIHN0UmVmOmluc3RhbmNlSUQ9InhtcC5paWQ6ZTFlMWZiNjgtMTk2ZC0xNDQzLTllYjYtMjg2NzZmOThhNGUwIiBzdFJlZjpkb2N1bWVudElEPSJ4bXAuZGlkOmUxZTFmYjY4LTE5NmQtMTQ0My05ZWI2LTI4Njc2Zjk4YTRlMCIv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",
// symbol: "image://data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACgAAABnCAYAAABy8ADUAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAAyZpVFh0WE1MOmNvbS5hZG9iZS54bXAAAAAAADw/eHBhY2tldCBiZWdpbj0i77u/IiBpZD0iVzVNME1wQ2VoaUh6cmVTek5UY3prYzlkIj8+IDx4OnhtcG1ldGEgeG1sbnM6eD0iYWRvYmU6bnM6bWV0YS8iIHg6eG1wdGs9IkFkb2JlIFhNUCBDb3JlIDUuNi1jMDY3IDc5LjE1Nzc0NywgMjAxNS8wMy8zMC0yMzo0MDo0MiAgICAgICAgIj4gPHJkZjpSREYgeG1sbnM6cmRmPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5LzAyLzIyLXJkZi1zeW50YXgtbnMjIj4gPHJkZjpEZXNjcmlwdGlvbiByZGY6YWJvdXQ9IiIgeG1sbnM6eG1wPSJodHRwOi8vbnMuYWRvYmUuY29tL3hhcC8xLjAvIiB4bWxuczp4bXBNTT0iaHR0cDovL25zLmFkb2JlLmNvbS94YXAvMS4wL21tLyIgeG1sbnM6c3RSZWY9Imh0dHA6Ly9ucy5hZG9iZS5jb20veGFwLzEuMC9zVHlwZS9SZXNvdXJjZVJlZiMiIHhtcDpDcmVhdG9yVG9vbD0iQWRvYmUgUGhvdG9zaG9wIENDIDIwMTUgKFdpbmRvd3MpIiB4bXBNTTpJbnN0YW5jZUlEPSJ4bXAuaWlkOjNEMTA0N0E5NTY0MzExRUM5QUJDQzU5OEJGMjlFOEYwIiB4bXBNTTpEb2N1bWVudElEPSJ4bXAuZGlkOjNEMTA0N0FBNTY0MzExRUM5QUJDQzU5OEJGMjlFOEYwIj4gPHhtcE1NOkRlcml2ZWRGcm9tIHN0UmVmOmluc3RhbmNlSUQ9InhtcC5paWQ6M0QxMDQ3QTc1NjQzMTFFQzlBQkNDNTk4QkYyOUU4RjAiIHN0UmVmOmRvY3VtZW50SUQ9InhtcC5kaWQ6M0QxMDQ3QTg1NjQzMTFFQzlBQkNDNTk4QkYyOUU4RjAiLz4gPC9yZGY6RGVzY3JpcHRpb24+IDwvcmRmOlJERj4gPC94OnhtcG1ldGE+IDw/eHBhY2tldCBlbmQ9InIiPz67c0FrAAAEOUlEQVR42uybz0sVURTH572e/VBTU5K0oqBQcNMP3RSSJVSYQZoKgvAqiJa2qjauyk3WIgr8DzJahC6UoHKRWIuwUKuNglKh1cKepRL5azqXdwZe0/y6c84dXzEXPrxx3syZr+fceffcc2cimqZrjK0SPwe5DEaYBXbjZ306CtwMTON2MTDHYTTK6L1GIBtpZLSrc9EP6Eg/n10eQ2XAUorAJdxHth1lDG8s5e8YY5jJ/+V6YDLFewZiX0Y6hLjOQpxBXTqE+ILP7wIJ8S5g3sGD83jMmnnwLJDl8H0WHrMmHoQ7VR928J7BCB4b+E1S5UGcQdVahPiiomNZQlwAJCQ8mMBzAvNgE5AncXwenhOYBwckvGcwENRNUuFDnEFFECGOEzp8XHWIc4Bpggen0YYyD9YCRQQPFqENZSl/XKO3uKoQlwArhPAarKAt9hCfY5pkRdEWqwfFYD/O4D2Dce8JBD1r9ksdZ4ibNf7WzBXincCCAg8uoG2yB8Ugn6nAg5keEwhXDw4r8J7BMPUmqVYozqCaEuIWTX1r8RvircBMAB6cwWtJe/A0kB+AB/NdEghbD74IwHsGg7I3yUGmxMAry3hNzyH2mxh0IrJtnUMC8ZfqbGBK0gNiWnk+xYbYnpW0MYXXdg1xk6ThXmCPhZ29QJ+krSYvAnslEs82DyNRm0R/7nUTWIod1s3QG6BcIhsvx3O83CylTgLbPRi5a91XXBHn3PNgv91O4AZgzOHEj0ADQ8m4AW3ZXUdo2Ggl8ITDSd3USqlFZbbH4XrHrQQ+sCnhtjIKM3PZpoTcZRZYbHHgkJ9ais9az5CFY4pTBV41HXDzz36gHHGtDpOGK6kC3+LOCY61DQL1qEFoGTUEnsIdj4BCgvEMvEMFhwl2ClGL0FQTSf42aZ+ADmJelwvM4nYf5pOUdg3YoTGGNNd5yPIX8hiY62FZuo+YciSehfzuqJbmLRQYCgwFhgJDgaHAUGAo8N8WGGO09Qu4gdtjXEYjOlNmGfbBUGAoMBT4P/5QmyfjKpvdzzHXSLIF2K8laymbgAQwAYwCS0Tlui0udRNR076Ea3p2ywxzWLk94laHsdXgU2At8EFykeYxsFu1QFGuuwWs+lw0TGCxXpnAToaVTch69JMqBLYyLr/+MD+/RRUoFgZ/Mq8RD2CXYRHYpWgh+wyHwG2ml1k4eeYm0MtQV888NUhtx4AC6lhcqTgXOEQVWKJ4GC6hCsxTLDCfKnBRscBFqsCvigV+oQocVSxwhCrwiUJx34DXVIFPgc+KBN4HlqkCRUZ8W4E4Ucu5w5VRi7cP3zEPc+3c6VaZj+ex7Hhufq2SK2E9irkcRdwrXFtWNifZ5/IAkBMP7Z5a4p40wdRSvw589yjsPT4wIT2rcyxgepi452A6VgMcALZrydclZ4BJ4KWWfDEfsmdt1c/E/bcAAwAvRJG+UKcr1gAAAABJRU5ErkJggg==",
symbolKeepAspect:true,
symbolSize:['56',"40"],
symbolRotate:(value,params)=>{
return value[4]
},
lineStyle: {
color: '#63f206',
width: 3.5
},
emphasis: {
lineStyle: {
width: 3.5
}
}
}
],
color: ['#63f206']
};