版本： echarts@5.0.2
测试使用案例： https://echarts.apache.org/examples/zh/editor.html?c=candlestick-sh
解决方法： 同时设置 lineStyle 和 emphasis.lineStyle即可解决hover折线加粗问题
series: [
{
name: ‘MA5‘,
type: ‘line‘,
data: calculateMA(5),
showSymbol: false, // 取消值点的空心样式，只有在hover时显示
smooth: true, // 折线平滑
lineStyle: {
// opacity: 0.5,
width: 1, // 正常时的折线宽度
},
emphasis: {
lineStyle: {
width: 1, // hover时的折线宽度
}
}
},
]
参考博客：
https://blog.csdn.net/weixin_29491885/article/details/113870075
series: [
{
name: ‘MA5‘,
type: ‘line‘,
data: calculateMA(5),
showSymbol: false, // 取消值点的空心样式，只有在hover时显示
smooth: true, // 折线平滑
lineStyle: {
// opacity: 0.5,
width: 1, // 正常时的折线宽度
},
emphasis: {
lineStyle: {
width: 1, // hover时的折线宽度
}
},
color: ‘#ff0000‘,
itemStyle: {
opacity: 0, // 取消交点的样式，即hover交点时没有效果
emphasis: {
color: ‘#ff0000‘, // hover交点空心处的颜色
}
}
},
]
参考博客：(注意： 博客中设置的itemStyle.normal的border样式没有效果，只有itemStyle.normal.color覆盖了外部设置的color，可能是版本问题)
https://blog.csdn.net/qq_38918953/article/details/109387063
需求： 只显示 第一个和最后一个label
问题： label文字过长，导致只显示一半（第一个显示后半部分，最后一个显示前半部分）
interval 和 formatter 都可以进行筛选
xAxis: {
type: ‘category‘,
data: data0.categoryData,
axisLabel: {
// interval: data0.categoryData.length - 2, // 只显示 第一个和最后一个label，或者使用formatter
formatter: (value, index) => {
if (index === 0 || index === data0.categoryData.length - 1) { // 只显示 第一个和最后一个label
return value;
}
},
}
},
对于label显示不全问题，使用了formatter 和 rich 属性搭配解决
xAxis: {
type: ‘category‘,
data: data0.categoryData,
axisLabel: {
interval: data0.categoryData.length - 2,
formatter: (value, index) => {
if (index === 0) {
return `{a|${value}}`;
} else {
return `{b|${value}}`;
}
},
rich: {
a: {
padding: [0, 0, 0, 40],
},
b: {
padding: [0, 40, 0, 0],
}
}
}
},
tooltip.axisPointer 表示十字线的横向线
axisPointer 表示十字线的纵向线
// 区别于tooltip中的axisPointer，此处是十字线的纵向线（不设置则使用默认的灰色虚线）
axisPointer: {
type: "line",
label: {
show: false
},
lineStyle: {
type: "solid",
color: ‘#00ff00‘,
}
},
tooltip: {
trigger: "axis",
triggerOn: "mousemove|click", // tooltip触发事件
hideDelay: 2000, // tooltip 延迟2s消失
// 区别于axisPointer，此次是十字线的横向线
axisPointer: {
type: "cross", // 十字线
label: {
show: false
},
crossStyle: {
// type: "solid",
color: ‘#ff0000‘,
}
},
},
markLine.precision设置数值精度
series: [
{
name: ‘MA5‘,
type: ‘line‘,
data: calculateMA(5),
//... 其他配置
markLine: {
symbol: [‘none‘, ‘none‘],
precision: 4, // 标记线的值精度，表示小数点
data: [
// 0值标记线
{
yAxis: 0,
name: `0.00%`,
lineStyle: {
color: ‘#000000‘,
width: 1
},
label: {
formatter: `0.00%`,
position: "insideStartTop",
offset: [-8, 0],
},
},
// 最小值标记线
{
// type: "min",
yAxis: minValue,
// name: `${Number(minValue * 100).toFixed(2)}%`,
lineStyle: {
type: "solid",
color: ‘#ff0000‘,
width: 1,
},
label: {
formatter: `${Number(minValue * 100).toFixed(2)}%`,
position: "insideEndBottom",
offset: [8, 0],
},
},
// 最大值标记线
{
// type: "max",
yAxis: maxValue,
// name: `${Number(maxValue * 100).toFixed(2)}%`,
lineStyle: {
type: "solid",
color: ‘#ff0000‘,
width: 1,
},
label: {
formatter: `${Number(maxValue * 100).toFixed(2)}%`,
position: "insideEndTop",
offset: [8, 0],
},
}
]
}
},
]
参考博客：
https://blog.csdn.net/qq_40287461/article/details/86740922
tooltip的简单配置
注意：triggerOn触发事件有 mousemove click，没有 touch 事件选项
在源码中发现处理事件的为zrender库，阅读zrender源码的event.ts，handle.ts，handleProxy后发现，在echarts中把touchstart事件分发为了mouseover，touchmove事件分发为touchmove，touchend事件分发为mouseup事件。
同时对于手动使用showTip来触发tooltip显示，需使用被echarts代理的event对象中的zrX和zrY（分别对应鼠标、手指位置对应echarts canvas的位置）来计算当前的x轴index。
echarts文档 - ECharts事件和行为： https://echarts.apache.org/zh/tutorial.html#ECharts 中的事件和行为
tooltip: {
trigger: "axis",
triggerOn: "mousemove|click", // tooltip触发事件
hideDelay: 2000, // tooltip 延迟2s消失
// ...
}
移动端touch事件结束时，隐藏tooltip和十字线
document.getElementById("chart").addEventListener("touchend", () => {
console.log("touchend")
// 即时隐藏tooltip
myChart.dispatchAction({
type: ‘hideTip‘,
});
// 即时隐藏十字线
myChart.dispatchAction({
type: ‘updateAxisPointer‘,
currTrigger: ‘leave‘
});
})
echarts的hover后折线加粗、markLine标记线，tooltip十字线，echarts中的touch事件
原文：https://www.cnblogs.com/nangezi/p/14721188.html