在做项目时，在放置可视图表时可能会遇到。 我经常为了一个功能找很长时间。 因此，我要记录折线图的具体配置项目，它具备我做过的功能
更改鼠标提示框的背景图像，动态设置浮动框的位置，更改折线图表的背景颜色，更改坐标轴样式，设置坐标轴偏移，设置折线样式， echarts图init chart (数据、日期、标志(letvalue=this.eer let arr=[ valuulue ] )，在主图位置设置折线拐点样式，并设置指示线和标记线，使面积小于或等于折线的区域渐变value.thresholdHighHigh，value.thresholdLow，value.thresholdLow，]； //15取零作为整数，以使其为20，并设定y轴的最大值letmax=math.ceil(math.max ) . arr )/10。 const bar chart=e charts.init (this.$ refs [ ' line charts ' ]，' shine ' )； let option={ color : [ ' # 002339 ' ]，tooltip: { trigger: 'axis '，//将浮动框设置为跟随鼠标并显示在鼠标上。 此功能不能在鼠标上显示太薄的position3360fuse，因为params、dom、rect、size(//鼠标坐标和提示框位置的参照坐标系以外层div左上角的点为原点，x轴为右侧//x坐标位置var y=0； //y坐标位置//当前鼠标位置var pointX=point[0]； var pointY=point[1]； //提示帧大小varboxwidth=size.contentsize [0]； varboxheight=size.contentsize [1]； //boxWidth pointX说明鼠标左侧提示框if(boxwidthpointx ) x=6； (else(/放在左边的下x=pointX - boxWidth/2； } //boxHeight pointY在鼠标上单击提示框//if(boxheightpointy(//y=5； //} else { ////上y=pointY - boxHeight； //} return [x，y]；//更换浮动框架背景图像background color 3360 ' transparent '，borderWidth: 0，Formatter3360function(Params ) varstr=` div styster height:26px； 文本对齐3360中心； color : # fff ' $ { params [0].data }/div `； 返回str；//更改垂直指示线样式axis pointer : (行样式： ) width:1，type: ) XQDBMH )、color:(#27c6e0)、}、)、//
ght: "5%", // containLabel: true, // 设置折线图表格区域背景颜色 backgroundColor: "#002339", borderColor: "transparent", }, xAxis: { type: "category", data: date, // 更改坐标轴文字颜色，文字大小，设置最小间隔，可以最大程度的把x轴数据显示完全 axisLabel: { interval: 0, textStyle: { color: "#fff", fontSize: 15, }, }, // 是否显示刻度 axisTick: { show: false, }, // 是否显示表格背景线 splitLine: { show: false }, // 折线颜色 axisLine: { lineStyle: { color: "#45515D", width: 1, }, }, }, yAxis: { type: "value", // 坐标轴位置偏移 offset: 8, // 最小显示刻度 minInterval: 1, // 最大值 max: max, // interval: 25, // 坐标轴文字颜色 axisLabel: { textStyle: { color: "#fff", fontSize: 15, }, }, // 设置坐标轴颜色 axisLine: { lineStyle: { color: "#45515D", width: 1, }, }, }, series: [ { data: dataNum, type: "line", // 是否显示折线上面的点 showSymbol: true, // 是否平滑曲线显示 smooth: true, // 折线拐点样式 symbol: "circle", symbolSize: 4, // 折线点的样式 itemStyle: { color: "#FFFFFF", borderColor: "#2FE4FF", borderWidth: 1, }, //折线下面的面积区域颜色 // areaStyle: { // z: 10, // type: "default", // // 渐变色实现 // color: new Echarts.graphic.LinearGradient( // 0, // 0, // 0, // 1, // // 变化度 // // 三种由深及浅的颜色 // [ // { // offset: 0, // color: "#0C556C", // }, // { // offset: 0.5, // color: "#074157", // }, // { // offset: 1, // color: "rgba(4, 53, 76, .7)", // }, // ] // ), // }, lineStyle: { // 折线的样式 width: 1, type: "solid", color: "#2BD7F1", }, /* * 标记的四条虚线 */ markLine: { // 是否显示虚线箭头 symbol: "none", // 图形是否不响应和触发鼠标事件 silent: true, // 线的样式 lineStyle: { normal: { type: "dashed" } }, // 虚线后面label的显示样式 label: { position: "insideEndTop", formatter: "{b}", color: "#fff", }, data: [ { name: "上限", yAxis: value.thresholdHigh ? value.thresholdHigh : -1, lineStyle: { width: 1.656, color: "#ff6367" }, }, { name: "上上限", yAxis: value.thresholdHighHigh ? value.thresholdHighHigh : -1, lineStyle: { width: 1.656, color: "#D8D8D8" }, }, { name: "下限", yAxis: value.thresholdLow ? value.thresholdLow : -1, lineStyle: { width: 1.656, color: "#46C67F" }, }, { name: "下下限", yAxis: value.thresholdLowLow ? value.thresholdLowLow : -1, lineStyle: { width: 1.656, color: "#46C67F" }, // label: { show: false }, }, ], }, }, ], }; barChart.setOption(option); },最终效果图