const legend = ["2022年数据", "2023年数据", "预测数据"] // 展示名称
// base64图片
const dataUrl1 = 'image://data:data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACAAAAAYCAYAAACbU/80AAAAAXNSR0IArs4c6QAAAARzQklUCAgICHwIZIgAAAUqSURBVEiJxZZbiJVVFMd/a3/7+75zzozZYFM52mSaFtikSGF2J0jCQrpAPUSF5FtSL0JPvQRB+RJETz10e4mkAsMoJIMuZCaV2FXNdEIZdRw7jtM5323v3cPe55IRZhAt2PDNMHv9//u/1vqvEaabjv8xNEDy7ifQypB2huQFFCUUFWIMVAasA2fBOTgbXQFEQBQoAR3hoggSDUmMSxNcvQaNGsXamz0BWhnSaiOtDNo5UhSeQFkFAh5cOgTc37AQAQEn4r+VAh1BrCHRuCRBKgPOdd+hASTLkXbuCbQyJCugKAIBC8Z4cBuuOYdnIiFN+Bb/syjxJKIItAoEEqh58C65DgGyHFp5UCJDshzyEilLKA0YC84iDq9GB/NM6QGUwiUaEQU2hziCOO4q6TxDiPoISFEhRYFk/tDOydff47/7a+88sks0jWdf7ZEQcB0FBPKH7iManyD+aBeUGhKLsxYhvDzWUMR9ClQVlBWUJRQlkpeYhfOov/CGL4HtkLDgoL3xYcgKAMyi+WSP3d9jIuCGzqO6fhnlTSuC3B44eXs7cvKUx6qqPgUqg5QVUpogewUO7NBsML5uYl23+QSQovQJfjzI4IbnMItHMYtHuyqgpCu1nGiifjkCjRQ30AgETJ8CNrzS+HqLMaipJmbscrA2dH9vBOX4SZ+kL8rrl0GaoHd+G8AFFymqlWO4ZUuo7X8LZwJGB69HwHWPueRizNjlRN/sRUwFxoUS9LpfHzlO9ujdxB9/RbRvPDSBw4xeDHnRp4LCzr/Q95K1f8LpTJQ+o5dRzdPYVptqbDHpGx9gF4xQXbuU9PWt4VJvFGWq6VvoqoVE+8dRR0+EJB0jUsjkb0hlMEtGUYcnz4QLBJR0ZZPpGdShCdzqVZSrV+GGZiEnmmTr78ENn+/ljyLs3As4764nAGg/s4F466dhFHu5Os1no4jy9pUMbHy+7/d+bv0wKhVcS3nzUAo5eoJ4+5foXT+ACPVNr6GOTjG4YRPxh196++7cA2ovb0HKCnvZCG7uMHbuMGbhPGSySbp5m39ux5j67mnAe3UUedvsnEYNO28YOzwESlDHp1DjE7SffARzxQIGHt8Euq+CscYsGCHe+gl6z35QiuKOG7Dzhv3ci+B05E8U9kO3BHFYFnGMHZ1NecsK7PmzqK5dir1oDm5oFubKy4j2jtPe+BDxx1/jIgWpv+5EcImGSFE8uIZyzWkP2EjRu/fiEm86pLF3xUR7zC6BJIY0xpUJbqCOOnwcvfM7ovGj2DmzqW5aTrZuLTL9O4Prn6a89Rp+f+kpai++6V8rAmlKvH0X6tgUcmrGW63W3qg2PICaOuU3YS3xRAIpYbrp0lfeRWZayEwbaYeNmBeQl36LDdSRyabfE2GGndZ+SVmLnTMbdXLa74Ez+snF2j8uTaCe4uo13GAdN9ggX7c29EAt6ToeSrrsSUrvkKdbEGvcYN0vJlxYUNrvwazAzWoA3nyIopAjEIhjXC2GWoqrh1NL+krQqOEIazLq7O8i7Afjfdv0nBIXCPRHpLru1yOgcbHP59IEQglcI4VGrVeCv7jD34W1JO98hN6976//lIhQLV9Cce9t3RH7JyFn/5O+2LlnFaPD2/TXPw3GX3zbIyFCed0Y1YorZ/h1cjUrr97x3xAA+OCzpVy96D11+Nil8We7AShvXI6df9E4ew7cyR03fn/OOc85tmwb4cjEDtl3wMnPvziOTOxgy7aR/x64PzZ/XpeDh96Xg4feZ/Pn9X+b5g/AMXoVWZPppgAAAABJRU5ErkJggg=='
const dataUrl2 =
"image://data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACAAAAAYCAYAAACbU/80AAAAAXNSR0IArs4c6QAAAARzQklUCAgICHwIZIgAAAUqSURBVEiJxZZNbFRVFMd/5747rzOdtkALttDyHaKAfEMUDST1CxOiibhR2btRF7gjLlxo4g4W6kZ3bnQBGqMYMPEjGEAWYC02RIICQgFFSwttpzPz7j0u7p3XFl1YE+NNzkzezNxz/ud/zvmfkb79vcr/eCzAkbOGSh0m6kI1U2pOqDtwPpjXYAqgoMjfOhMUBAQwEiwxwQoJpInSZIViQSkVYMdKHwBUajBeJwdRy6DuoJ4DEFQVRdDI1520SXwVCUBEBCMagjcAWCGLCTUcWICJTJioByCVOlQzqDmoOwksKKgKqiGMqqJ3kCAKIhGGBEtEYvZKmkDmQRUEwcgUANUsZF6pawQgVCMLmQfnGwwQGQjP0wDEYD5UIT4r1kAhESQFH++Y+F0OoO6g6pRqFoJX6rB7i6OWxdpPo10oJMqbX9u8DAK0FpW9jzle+dRiELralOVzlZVdytoFntNXhC9+TDCi2ERJ3RQGMgdZbLxapH9Ju/Lu8QTnJkF4QgO+sC1jIptegh1LPccvCNuXe55a5xgcFm6Ow5IOePUzi1MoWbBGYrzIBgSaM69kPjRe5kK2c0owpxnmlIO1NwdrsNawNFGeWOP55ExCW1H54FTCa4ctB/oSRqswUglB6356rJwBr5Mj52LNh8aEezp9HL/J7gflxmhw2DjPbfbUnDBSkXxknYebFaFoQxM7Lziv00Y7B6CRWq/QPVtZ1en54erkyGjUgDAFyrVbwnNbPMcvGBa0edZ0h3S8KqqwslNBPUZgXouybZnHJnD5pjBWiwkxpQRTz62KMF6H5fOUgeuG8Zpwd6fSP2joHxS+HzT0Dxq+HxSGxqGtBK8fLhCnHwVai3BXK8xrVYyBuS1KR1lpKtwZLTIg8boR4VYVLg8beldkPLTC0VaCoTFh9xZHR1n5fTSMW2ersvu9lEMDSa6LEjXy5EXhy3MGa2B9j/LNT4bb1aCALenk73IGGpJpDFgBI8qvt4Wj5w19VwwiyttHLb/dFvZ+Yjl63nDkbIKJDkyDTkNUwEl/l4aERe1KIhp8R2luCJGByQ9srt1CqQBds6CjHNDeGIUrw8KL2x2P3uP5uN9gjWJNkFshjJgRDb4M7FztuTQkrOpS5pRh40IfEwxxcgA2gdQGyeyZrTyw1DGrpGzo9qzrVjYuVFbMU87fEB652zM4LBgT7jQMUdIkgOkoK70rPIvbldtV2LzIs77bM7clyrINMXMAadTqJgvNKVwdEQ72JXx0JuHAdwlnrgnPbHJsXqTsOWgZHIF9uzLWd/v8nhDeN/Yo63qU2c3KsZ8NyzqUL88ZnlzjOXdDaLKQxs0IIH37e/X9U4axqjBea2zEIMk1F7ZYOYU/xsLG9HEv2LhcGtrf3gzDlSDTjX6w0QJIpViAUiEkWW5Snt0U13HRBnFQwhYzJpbFKXUnjFbDc1nA+zDBXoNz4p2ag3KqeZMlQr4JC4mQ2hCnWIhmp4xhqQBh2wuJhKyricZtqGQu/CdwHrwPO8HnyhhrKXEi8i4PLNkIokF9k4VSGv6Q5AAeX+X/qhB/c7zCoR8MA9ckV8+p8796vrLzXp+P2D85M/gpfLj34a1ds/3n/Vel5dQvZto63rTIs3aBjl4fNo/teuOLE/8JAIB39vSuXt3FoWsjsvjkxdAE9y3xzJ+llwaus/P5/V8NzMTfjAEAvPnigws2LkwPjlW5XwSaU749fbn29EtvHbs6U1//CgDAvj1bSxs6ih8CfPfHxK6X95+o/Bs/fwIleHxCHzUwBQAAAABJRU5ErkJggg==",
option = {
backgroundColor: 'rgba(16, 33, 71)', //设置背景颜色
color: ["#65B765", "#029AFE", "#FEAF26"],
tooltip: {
trigger: "axis",
formatter: (params) => {
let ary = params[0].name;
params.forEach((item, index) => {
if (item.value) {
if (item.dataIndex === 6 && index === 2) {
ary += "";
} else {
let value = item.value;
ary += `<br>${item.seriesName}: ${value}万`;
}
}
});
return ary;
},
textStyle: {
color: "#fff",
fontSize: 16,
},
backgroundColor: "#1b366a",
borderWidth: 0,
axisPointer: {
type: "shadow",
shadowStyle: {
color: "rgba(68, 140, 246, .2)",
},
},
},
legend: {
data: legend,
top: "10%",
right: '10%',
icon: "rect",
itemWidth: 16,
itemHeight: 2,
textStyle: {
align: "right",
color: "#fff",
fontSize: 16,
},
},
grid: {
left: '5%',
right: '5%',
bottom: "5%",
containLabel: true,
},
xAxis: [
{
type: "category",
splitLine: {
show: false,
},
axisTick: {
show: false,
},
axisLabel: {
color: "#fff",
fontSize: 16,
interval: 3, // 不隔断直接显示
},
axisLine: {
lineStyle: {
color: "#ccc",
},
},
data: [
"02-20",
"02-21",
"02-22",
"02-23",
"02-24",
"02-25",
"02-26",
"02-27",
"02-28",
"03-01",
"03-02",
"03-03",
"03-04",
"03-05",
"03-06",
"03-07",
"03-08",
"03-09",
"03-10",
"03-11",
"03-12",
"03-13",
"03-14",
"03-15",
"03-16",
"03-17",
"03-18",
"03-19",
"03-20",
"03-21",
"03-22"
],
},
],
yAxis: [
{
type: "value",
min: function (value) {
return parseInt(Math.floor(value.min * 0.99));
},
splitLine: {
show: true,
lineStyle: {
type: [6, 8],
dashOffset: 1,
color: "rgba(255, 255, 255, 0.1)",
},
},
axisLine: {
show: true,
lineStyle: {
color: "#ccc",
},
},
axisLabel: {
show: true,
color: "#fff",
fontSize: 16,
},
axisTick: {
show: false,
},
},
],
series: [
{
name: legend[0],
type: "line",
smooth: true,
data: [
"60.6",
"62.87",
"63.72",
"62.78",
"61.94",
"60.31",
"58.19",
"56.24",
"56.83",
"56.9",
"56.42",
"55.71",
"55.87",
"55.06",
"54.97",
"55.55",
"54.69",
"54.04",
"53.39",
"53.86",
"53.88",
"52.98",
"53.72",
"53.28",
"53.9",
"54.59",
"55.43",
"55.3",
"55.03",
"57.18",
"57.52"
],
symbol: "none",
},
{
name: legend[1],
type: "line",
smooth: true,
symbol: "none",
markPoint: {
data: [
{
type: "max",
symbol: dataUrl1, //base64图片
},
{
type: "min",
symbol: dataUrl2, //base64图片
},
],
symbol: "arrow",
label: {
show: true,
color: "#fff",
offset: [0, 22],
fontSize: 18,
fontWeight: "bold",
},
symbolSize: [32, 24],
symbolOffset: [0, -32],
},
data: [
"64.64",
"63.46",
"62.9",
"65.92",
"65.83",
"65.59",
"65.26",
"64.53",
"63",
"61.12",
"62.9",
"63.94",
"64.75",
"64.94",
"64.98",
"63.74",
"61.67",
"61.44",
"61.34",
"60.84",
"60.7",
"60.28",
"58.86",
"57.05",
"57.56",
"57.55",
"56.86"
],
},
{
name: legend[2],
type: "line",
smooth: true,
symbol: "none",
lineStyle: {
normal: {
type: "dotted",
},
},
data: [
null,
null,
null,
null,
null,
null,
null,
null,
null,
null,
null,
null,
null,
null,
null,
null,
null,
null,
null,
null,
null,
null,
null,
null,
null,
null,
"56.86",
"60.48",
"59.06",
"59.38",
"57.57"
],
},
],
};