首页 前端知识 echarts 折线图默认只有拐点,鼠标移入折线显示

echarts 折线图默认只有拐点,鼠标移入折线显示

2025-03-02 13:03:27 前端知识 前端哥 198 520 我要收藏

默认状态

在这里插入图片描述

鼠标移入

在这里插入图片描述

// 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,
}
复制
转载请注明出处或者链接地址:https://www.qianduange.cn//article/22344.html
标签
评论
还可以输入200
共0条数据,当前/页
发布的文章

如何修改电脑mac地址?

2025-03-03 13:03:33

C 数组:深入解析与应用

2025-03-03 13:03:28

大家推荐的文章
会员中心 联系我 留言建议 回顶部
复制成功!