option = { // title:{ // text: "会话数", // textStyle:{ // fontSize:12, // Color:'#86909C' // } // }, legend: { data: ["会话人数", "成交人数"], bottom: "3%", }, tooltip: { trigger: "axis", axisPointer: { lineStyle: { color: "#86909C", //显示竖线颜色 type: "dashed", }, }, backgroundColor: "none", //tooltip背景色 borderColor: "rgba(204,204,204,0.1)", //tooltip边框颜色 borderWidth: 1, borderRadius: 4, width: 300, formatter: function (param) { //自定义tooltip内容 // console.log("数据=========", param); var text = ""; text += `

会话数

${param[0].seriesName} ${param[0].value}

${param[1].seriesName} ${param[1].value}

`; return text; }, }, dataset: [{}], xAxis: { type: "category", boundaryGap: false, data: [ "2022-10-11", "2022-10-12", "2022-10-13", "2022-10-14", "2022-10-15", "2022-10-16", "2022-10-17", ], axisLine: { //x轴 lineStyle: { color: "#E5E6EB", }, }, axisTick: { //x轴刻度线 lineStyle: { color: "#C9CDD4", }, }, axisLabel: { textStyle: { color: "#86909C", }, }, }, yAxis: { type: "value", name: "会话数", nameLocation: "end", nameTextStyle: { color: "#86909C", fontSize: 12, // align:"left" }, axisLine: { //y轴线 show: false, }, axisTick: { //y轴刻度 show: false, }, axisLabel: { // show :false, color: "#86909C", }, splitLine: { lineStyle: { color: "#E5E6EB", width: 1, type: "dashed", }, }, }, grid: { top: "10%", right: "6%", bottom: "12%", left: "3%", containLabel: true, }, series: [ { type: "line", name: "会话人数", showSymbol: false, itemStyle: { normal: { color: "#165DFF", lineStyle: { color: "#165DFF", }, }, }, data: [120, 132, 101, 134, 90, 230, 210], }, { type: "line", name: "成交人数", showSymbol: false, itemStyle: { normal: { color: "#1FA087", lineStyle: { color: "#1FA087", }, }, }, data: [220, 182, 191, 234, 290, 330, 310], }, ], }

折线图图，x，y轴以及数据内容高度定制，鼠标划过实现毛玻璃效果