let icon_Map = {
"大雪": 'data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACcAAAAgCAYAAACRpmGNAAAAAXNSR0IArs4c6QAAArdJREFUWEe1WMFNBDEMtLvgCRVQAseHLxUgoAYKACoBKgEqASoxmsiOvL5k18lCpNOBNrFn7bE9OaYdS0ROieiOiC6ICH/j8+0+n8z8OuuCZw6KyIGIXhTMlgmAfZ4BOQxORJ6I6HELUeM5AOJseg2BE5F3IkLU/EJkPojoR9OJZ5bmuHcIYBpcJ2JdZ46PMcppgCPgxIUL0bpnZkRsdSlIRBzFgvXNzGdb5/A8BU5EQH5Upa3LDDDbrAC/3HlU8FsBsPKCWXA+aq/MfJ95c7+nw9cSSd33FgvmCJyIWN/ykfJ+zpjZDKYxql1kYG3BLrJS7FdwGnocjhW2MMbMqWhHBA3u9UBWThZHDU70Dk6lNHCvFAa4pn7xf2zoxY+Bi/0LYQVhUY04fKvfqQpN51o3NrIG/9fc4MIHM1+OOti7v5G9c4DzbSLdg/aCaZ0PFX0DcOg/1iDT3fufwPlAPURw4NS0xNkLOATqCuB8MUxHTg2DFlN8bXD/BOC8BErPTNcerDea0MT3UMtRfYgg2SrcBzg03cUDJ4FamSoSybp4Y+7iTKWH2l9r7NamvK8yu63PjQrIWtWNdNQRlBxZMQCVWn58jQIsbyciXhQs0jKomo8otZiT2gghDu2y0ivAqiA0OjAMapT7gqXd2Vud15hGLQk/NcQ7DRQqBuneFKDZlvNn4LIOR/alwNlVcE1ea7887e1RG48jfXATnDlVHiJluCjXK56SHlwzroJzFx6EthvwGNwrac+AXAXXEYixh/ke6bNWFLMrCq+sU2MyGzmrtqLzQuTgNMrvxQUojMgjGz0ebkXOpgdSYSlBRdYLTufiUjWh02lmo/yWsjutbn4iOiDz4r7pmiwc1nupU81V4bjfV+oFZqtyN9O6ZkCjcoDMcnKnvMDMDS362gXOG9NJAVB/pgd/AcOWcaTYn1tLAAAAAElFTkSuQmCC',
"大雨": 'data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACQAAAAgCAYAAAB6kdqOAAAAAXNSR0IArs4c6QAAAj1JREFUWEfVV0tOAzEMtW9CT1J6EaAHQdBzsKBcgw3lGKwot2Bn9EZJ5HicTGYyFWokJNRJ7Jfn50+YVlwickNED0S0DWZviegc/j8R0SczH2sueQ08IgLHr0QEQFMLAN+Y+dnb2A1IRD6ICIDmLgDbMXNkcDi/GFAID1jxwMBJ/IMf7PHYG7G1CFAAA2askwMRHe2tgUjp68lQCVB7ZobGljHkhCkzWotdgdkzM28WAQoCBjtxJWOtIiqAArP72SETkW8TKghzoHvOCqBgK7vYCJCIxHRELYFG4OwHaSoiqDEQclyHUvq2gHPsbROgiayB/ZieWsgbT8AtYJTQNUvvAyBHFy02h5i3bJwQua5jCZDVha4jCJO3kKrVNtAC1mTsFztxzLKmUj+6whXBigg0GS/9C0BZ6WdmN/OUxmALvaibnSAXHZ0XANI/rKKLllAphkTtf/xXQI5c7mzITsy8m3PDnr0iotkhyMUCau5JnUBQy+ykMGQtAGE0yHpTrM49TifO2o6fIhMLo069C+JwTY/Hj0qtuTS4kUSymhNUf79wJJ0DvjhXF8ePwNocJ017p5rx7HmoyWvHphpDmIswE+EtlT1ZAnvIlGFO0v71Nztfh1kLNoutpwZIF61sKjTtJuv6pVZkqrL7BMLFSo20OBk6o2fqf863VF8CO7r+uOPL1QBCadejZQqZw0Kaq533mmbPdgR3nloqahgH/dACAKXncGhF+IZLpaeyKr6oczjjzlPXk/YdpaTr6B8U2FQKSWJU2gAAAABJRU5ErkJggg==',
"多云": 'data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACYAAAAgCAYAAAB+ZAqzAAAAAXNSR0IArs4c6QAAAnVJREFUWEfNV9tRAzEMtIrgm+STLkgJVACpBFIJoRJIJRyViNkb6UZ2JD/ugME/zBBbXu1qZR2lDYuZ71NKrymlKaV0JCL8/ZFFW6Iw82dKaScxzkR03BLPnt0KjE2wiYj2/wWYZez3gTHzk0gEecK6YWbUF/ZinYjoJWKMmSE59lZj6vkrKSUAmNC1j8CZy8DWuQIKJnnviVkDhqzAhF0huFZNOYniCBwcJoINEWPITt1WDSSyq9xgLpOemSHv86hJXFea/qTgFsbkt8eUEuSx4PXuD9vTZL/KqP0Oe6qr2i4k26VYnexrwRe5BNyuJd+qPsbMyBosjayqU2uBuhpswBTkuMhzBIkgq0qMO1HclxGWhhgLXBUygf0/8WY2GSuaKJLqkkfrSpi8NUYBy2D7ysGjjA29h9I+0B48x5ZldYpeApLMbCBkA1YmR8aahDAG4owaJGsvS+cvRhf9/wxAsrevwIGIrnpQ0atqZlOTeHuypMGYnRCGgVVAza5EPVkzyH7cg4RLuZdGDmD40W560ynBXKrv2iyxog8cq6XQ7O6OsRAbqkxNV9Z0cfob2DmMdODI9V3ADP24c7E5Mw851gMsrNuhYU4uBGbc6rkMsz1KwE4NXf0tAGcHTmy5iaYLbyYrY2YOI6Iu9gNg5X13PRNsT8lsmvcdEz14wEpa4cgvgw4PdWnzPwFmC9qtG3GSHRSbo3LD3UjUfmfkjK14ghAwa6A9upd7nLaT15gDDDJmTXXNxQ22yi+ouSy8GiufqGYH3wi2bEdz+XjAyq+ajfcOH5/fy6iPeQ/78A0rDixmi4DZh71n4FuBITuCWsbwsJTNN4P0Z3LiUpwrAAAAAElFTkSuQmCC',
"雨加雪": 'data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACcAAAAgCAYAAACRpmGNAAAAAXNSR0IArs4c6QAAAkhJREFUWEfFmN9RwzAMxqUpeAQG4JlH6DEFT9AFWAE6CWUS2kmAScR9PiunKEpiO03ru/ZybWz/LH/6YzMtaCJyQ0SvRPRARHjG59d8jsy8b52CWzqKyCMRfWaYuSEAu2uBrIYTkQ8iep8jCv4HIPoWtyo4EfkmIljNN1jnQER/RHSdLRq9VwVYDDdisR0R7ZkZcL1m9OitXAxYBJcn+nHzb5gZ1ppsQV8sBH0HC/IDlcJB/PBKbUVg+rKIoC/G0AYPPsKrpxY4CYdVY4UiImbgAzNv5iwWbPOYXvEqrPjlHWYAl7WFuBUJGgNtW8JCoZf3tryDy9qA6cegkjGYuUgKIw7idRttALb6Ns2FrxHBRx3hmdvaLTXaw8KRRdDgTHjGb96j0zwK5/WQNJAHQdxSa2JLZz20Fj4bBwwKjvnvOfCkJsHXAgXbDgMAUNsd4HpholVTS+GyvGxUeAYcRKrmXKSppYCO5c3DFaeWpSBRfxdPnwBnneEiestb6rPQFeBsCQQvWcUjpywdBOgU6wDnvUTLH4yHEmjt9hIUrSl3a5xrLSDXAO/So01flwYcSKqXJ3OkRirRw8oalonGHFQkXW49F0HtPE0VRu0kre83w2khOhMiUtXRUv81b6sJP+GZ1FTQWr+hckZVXVXRNFnO5cCuOFQr5jSkBxjN2/i76uxxcjjj8fZABLDq1HhyuJwno6wThospzZ4cLkiHdv6zbKutIHo1oDko4TZAL3vgEPDa9e5KjOD16gs/hdcRpgyCl1afc9H/H1t2HH3y4PsyAAAAAElFTkSuQmCC'
}
let zh_en = {
"大雪": 'MajorSnow',
"大雨": "heavyRain",
"多云": "cloudy",
"雨加雪": "sleet"
}
let data = [
{
time: '2023\11\12 09:00',
quality: '优',
grade: '1级',
weather: '大雪',
value: -8
},
{
time: '2023\11\12 10:00',
quality: '优',
grade: '1级',
weather: '大雨',
value: -7
},
{
time: '2023\11\12 11:00',
quality: '优',
grade: '1级',
weather: '多云',
value: -8
},
{
time: '2023\11\12 12:00',
quality: '优',
grade: '1级',
weather: '大雪',
value: -8
},
{
time: '2023\11\12 13:00',
quality: '优',
grade: '1级',
weather: '雨加雪',
value: -5
},
{
time: '2023\11\12 14:00',
quality: '优',
grade: '1级',
weather: '大雪',
value: -5
},
{
time: '2023\11\12 15:00',
quality: '优',
grade: '1级',
weather: '大雪',
value: -5
},
{
time: '2023\11\12 16:00',
quality: '优',
grade: '1级',
weather: '大雪',
value: -8
},
{
time: '2023\11\12 17:00',
quality: '优',
grade: '1级',
weather: '多云',
value: 1
},
{
time: '2023\11\12 18:00',
quality: '优',
grade: '1级',
weather: '多云',
value: -1
},
{
time: '2023\11\12 19:01',
quality: '优',
grade: '1级',
weather: '多云',
value: -5
},
]
let maxArr = [];
maxArr.length = data.length;
maxArr.fill(1);
console.log(maxArr)
let rich_weathers = {};
let rich_img_w = 39;
for (let k in icon_Map) {
let rich_key = zh_en[k]
rich_weathers[rich_key] = {
width: rich_img_w,
height: 32,
backgroundColor: {
image: icon_Map[k],
},
}
}
let lineSymbol = `data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACAAAAAgCAYAAABzenr0AAAAAXNSR0IArs4c6QAAAWVJREFUWEftlk0rRVEUhp/3D2BEyshfoJiKzKWUsZF8lGSgDExkIgn5CUrdzAyZU0z8BzFSDA2Wbt1bx3HO2WvvLntyz/S8613PXmt/LJH5U+b89AGiKmBm48ASMAPMl9r3BRwCLUnP3ta6AMxsDNgHVpzGN8CuByQIYGbLwKUzcVm2KemsKbYRwMzWgUYDB9iBpL06XS2AmbV7feVI4JFsSTqpElYCmNkw8OZxjtBMSHoq6+sAzoG1CHOP9FbSXBDAzEaAV49jgmZK0kMx7lcFerTx6tiOJO2EAFrAYsLqXCGSfiy6qgLvwJDLLUGUHQAYkPTZZf/3CgCDkj6yAXhacA0sJLTXFeIB2ABOXW7xomNJ26FjOAq8xHu7IqYl3TcCtH+a2QWw6rL0i+4kzQav4g7AX1zHk5IeXQAdiHzPcZeyR+9C2kBSgMg3khUg8g2lxU2TbSz3n7R4ZXAsj7eMi+gDfANQTXohGNbfowAAAABJRU5ErkJggg==`;
let xdata = [1, 2, 3]
option = {
backgroundColor: '#5d87bb',
grid: [
{
containLabel: true,
left: '5%',
top: '10%',
right: '5%',
backgroundColor: '#5d87bb',
},
{
containLabel: true,
left: '3%',
top: '10%',
right: '3%',
backgroundColor: '#5d87bb',
}
],
title: {
text: '鼠标按下拖拽试试'
},
dataZoom: [
{
show: false, // 为true 滚动条出现
realtime: true,
type: 'slider', // 有type这个属性，滚动条在最下面，也可以不行，写y：36，这表示距离顶端36px，一般就是在图上面。
right: "3%",
left: "3%",
height: '10',
xAxisIndex: [0], //关联多个y轴
moveHandleStyle: {
color: "rgba(89, 202, 241,.5)",
},
moveHandleSize: "6",
emphasis: {
moveHandleStyle: {
color: "rgba(89, 202, 241,.5)",
}
},
textStyle: {
color: "rgba(255,255,255,0)",
},
backgroundColor: 'rgba(255,255,255,.1)',
borderColor: "rgba(255,255,255,0)",
fillerColor: "rgba(0,0,0,0)",
handleSize: "6",
handleStyle: {
color: "rgba(255,255,255,0)"
},
brushStyle: {
color: "rgba(129, 243, 253)"
},
start: 0,
end: 80,
},
{
type: 'inside',
xAxisIndex: [0], //关联多个y轴
zoomOnMouseWheel: false, //滚轮是否触发缩放
moveOnMouseMove: true
}
],
xAxis: [
{
type: 'time',
triggerEvent: true,
boundaryGap: false,
axisLabel: {
margin: 14,
show: true,
formatter: (v) => {
let newDate = new Date(v);
let newDate_h = newDate.getHours();
let filter_ = data.filter((o) => {
let _date = new Date(o.time);
let _date_h = _date.getHours();
if (_date_h == newDate_h) return o;
})[0];
console.log(filter_, newDate_h)
let rich_key = zh_en[filter_.weather];
let grade = filter_.grade;
let quality = filter_.quality;
let str = `{${rich_key}| }\n{text|${grade}}\n{text2|${quality}}\n{h|${newDate_h}}`
let sh = new Date().getHours();
if (newDate_h == sh) {
str = `{${rich_key}| }\n{text|${grade}}\n{text2|${quality}}\n{sh|当前}`
}
return str;
},
rich: {
...rich_weathers,
text: {
color: "#ffffff9a",
height: 30,
lineHeight: 30,
fontSize: 14,
align: 'center',
padding: [1, 3, 0, 0],
width: rich_img_w
},
text2: {
color: "#ffffff9a",
height: 20,
fontSize: 12,
align: 'center',
width: rich_img_w,
borderRadius: 4,
padding: [1.5, 3, 0, 0],
backgroundColor: '#ffffff1a'
},
h: {
color: "#ffffff9a",
height: 26,
fontSize: 12,
align: 'center',
width: rich_img_w,
borderRadius: 4,
padding: [1, 3, 0, 0],
},
sh: {
color: "#ffffff",
height: 26,
fontSize: 12,
align: 'center',
width: rich_img_w,
borderRadius: 4,
padding: [1, 3, 0, 0],
}
}
},
gridIndex: 0,
axisLine: {
show: false,
},
axisTick: {
show: false,
},
splitLine: {
show: false,
},
},
],
yAxis: [
{
type: 'value',
gridIndex: 0,
axisLabel: {
show: false
},
axisLine: {
show: false,
},
axisTick: {
show: false,
},
splitLine: {
show: false,
},
},
],
color: ['#00e529'],
series: [
{
type: 'line',
symbolSize: 10,
symbol: 'image://' + lineSymbol,
data: data.map((v) => {
return [
new Date(v.time),
v.value
]
}),
yAxisIndex: 0,
xAxisIndex: 0,
smooth: true,
label: {
show: true,
position: 'top',
distance: 5,
formatter: (v) => {
return v.value[1] + '°'
},
color: "#fff",
fontSize: 18,
fontWeight: 600
},
},
]
};