echarts 折线图默认只有拐点，鼠标移入折线显示
默认状态
鼠标移入
// const xData = [
"1",
"2",
"3",
"4",
"5",
"6",
"7",
"8",
"100",
"10",
"11",
"12",
"13",
"14",
"15",
"16",
"17",
"18",
];
//var maxNum = Math.max.apply(null, xData);
option = {
series: [
{
name: "Calls",
type: "bar",
data: [
111112, 858565, 88285, 2255, 57575, 758655, 14574, 85685, 58587,
56565656, 444444, 158585, 2255, 57575, 758655, 14574, 85685, 58587,
],
itemStyle: {
color: "rgba(74, 181, 232, 1)",
},
},
{
name: "Puts",
type: "bar",
data: [
111112, 858565, 88285, 2255, 111112, 858565, 88285, 2255, 57575, 758655,
57575, 758655, 858565, 88285, 2255, 57575, 758655, 57575,
],
itemStyle: {
color: "rgba(234, 204, 174, 1)",
},
},
{
name: "Total Intrinsic Value",
type: "line",
yAxisIndex: 1,
data: cyData,
//标记x轴最大值
markLine: {
symbol: [],
symbolSize: [14, 17],
label: {
show: true,
padding: [0, 0, 5, 0],
formatter() {
return `Max Strike Price：${maxNum}`;
},
},
data: [{ xAxis: maxNum.toString() }],
lineStyle: {
width: 1,
color: "#979797",
},
},
symbol: "circle", //将小圆点改成实心 不写symbol默认空心
symbolSize: 8, //小圆点
lineStyle: {
normal: {
color: " ",
width: 0,
},
//hover状态,显示折线，设置颜色跟线宽
emphasis:{
color: "rgba(0, 102, 210, 1)",
width: 1.5,
}
},
itemStyle: {
color: "rgba(0, 102, 210, 1)",
},
},
],
}
核心代码
emphasis:{
//里面也可以配置拐点边框、背景颜色.....
color: "rgba(0, 102, 210, 1)",
width: 1.5,
}