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 += `<div style="background: rgba(204,204,204,0.1);border-radius:4px;padding:8px;backdrop-filter: blur(5px);box-shadow: 0px 0px 16px 0px rgba(29,48,92,0.15);">
<h2 style="color:#1D2129;font-size:12px;">会话数</h2>
<div style="background:#ffffff;border-radius:6px;margin:4px;padding:4px 8px;color:#000000;margint-bottom:30px">
<b style="display:inline-block;width:8px;height:8px;border-radius:6px;background-color:${param[0].color}"></b>
<span style="color:#4E5969;">${param[0].seriesName} </span>
<span style="float:right;color:#1D2129;font-size:12px;">${param[0].value} </span>
</div>
<div style="background:#ffffff;border-radius:6px;margin:4px;padding:4px 8px;color:#000000;margint-bottom:10px">
<b style="display:inline-block;width:8px;height:8px;border-radius:6px;background-color:${param[1].color}"></b>
<span style="color:#4E5969; margin-right:50px;">${param[1].seriesName} </span>
<span style="float:right;color:#1D2129;font-size:12px;">${param[1].value} </span>
</div>
</div>`;
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],
},
],
}