let information = { legend: [ "照明插座系统用电", "空调系统用电", "动力系统用电", "特殊系统用电", ], colorArrays: ["#1890ff", "#a0d911", "#fa541c", "#722ed1"], dataArray: [ [172, 47, 117, 192, 323, 251, 195, 359, 9, 211, 277, 242, 292, 87, 70], [472, 88, 396, 314, 193, 486, 39, 87, 174, 88, 337, 165, 25, 333, 72], [ 265, 404, 115, 464, 243, 197, 335, 431, 448, 338, 99, 472, 177, 243, 285, ], [147, 147, 398, 423, 288, 449, 265, 185, 127, 32, 31, 202, 244, 151, 163], ], // 日期，不知道要几天的 area: [ "2024-03-01", "2024-03-02", "2024-03-03", "2024-03-04", "2024-03-05", "2024-03-06", "2024-03-07", "2024-03-08", "2024-03-09", "2024-03-10", "2024-03-11", "2024-03-12", "2024-03-13", "2024-03-14", "2024-03-15", ], }; let option = { backgroundColor:"#021032", grid: { left: "3%", right: "3%", bottom: "8%", top: "34%", containLabel: true, }, tooltip: { trigger: "axis", backgroundColor: "rgba(9,40,84,0.8)", borderColor: "rgba(9,40,84,0.8)", textStyle: { fontSize: 20, color: "#fff", }, formatter: function (params) { // 加x轴名称 var res = params[0].name + "

"; for (var i = 0, l = params.length; i < l; i++) { // 创建 marker 标签 var color = params[i].color; // 获取系列颜色 res += "

"; res += params[i].seriesName + "

" + "" + params[i].value + "

"; } res += "

"; return res; }, }, legend: { show: true, x: "center", y: "70", icon: "rect", itemWidth: 16, itemHeight: 16, textStyle: { //图例文字的样式 color: "#b4e4ff", fontSize: 20, // 给出高度和rich对象，实现图标与文字居中对齐 height: 16, rich: { a: { verticalAlign: "middle", }, }, }, itemStyle: { borderWidth: 0, }, data: information.legend, }, xAxis: { type: "category", axisLabel: { color: "#b4e4ff", fontSize: 20, margin: 20, }, axisLine: { show: true, lineStyle: { color: "rgba(180, 228, 255, 0.3)", width: 2, }, }, axisTick: { show: false, }, splitLine: { show: true, interval: information.area.length, lineStyle: { color: "rgba(180, 228, 255, 0.1)", width: 1, }, }, data: information.area, }, yAxis: { type: "value", axisLabel: { formatter: "{value}", color: "#b4e4ff", fontSize: 20, }, axisLine: { show: true, lineStyle: { color: "rgba(180, 228, 255, 0.3)", width: 2, }, }, axisTick: { show: false, }, splitLine: { show: false, }, splitArea: { show: true, areaStyle: { color: ["rgba(255,255,255,0)", "rgba(18, 63, 115, 0.3)"], }, }, splitLine: { show: true, lineStyle: { color: "rgba(180, 228, 255, 0.1)", }, }, }, series: [], }; for (var i = 0; i < information.legend.length; i++) { let index = Math.floor(Math.random() * information.area.length); option.series.push( { name: information.legend[i], type: "line", symbol: "circle", smooth: true, //是否平滑 symbolSize: 10, itemStyle: { color: information.colorArrays[i], borderColor: "#fff", borderWidth: 2, shadowColor: "rgba(0, 0, 0, .3)", shadowBlur: 0, shadowOffsetY: 2, shadowOffsetX: 2, }, data: information.dataArray[i], }, { name: information.legend[i], // 设置涟漪特效动画 type: "effectScatter", // 有三种: cartesian2d(二维的直角坐标系) polar(极坐标系) geo(地理坐标系) ,此需求使用cartesian2d coordinateSystem: "cartesian2d", // 单个闪烁点 ↓ // data: [{value:[xData[4],item.data[4]],symbolSize:8}], //2d坐标系--[x轴, y轴, 标记大小] data: [ { value: [information.area[index], information.dataArray[i][index]], symbolSize: 10, }, ], //2d坐标系--[x轴, y轴, 标记大小] // data: cart, //2d坐标系--[x轴, y轴, 标记大小] // 何时显示特效:'render'-绘制完成后显示特效 'emphasis'-高亮（hover）的时候显示特效 showEffectOn: "render", // 涟漪特效配置 rippleEffect: { // 波纹的绘制方式,可选'stroke'和'fill' brushType: "fill", number: 5, period: 3, scale: 3, }, emphasis: { scale: true, }, itemStyle: { color: information.colorArrays[i], shadowBlur: 50, shadowColor: "#fff", }, zlevel: 1, tooltip: { show: false, }, } ); }

折线图（含随机出现闪点）