echarts的hover后折线加粗、markLine标记线，tooltip十字线，echarts中的touch事件
版本： echarts@5.0.2
测试使用案例： https://echarts.apache.org/examples/zh/editor.html?c=candlestick-sh
折线hover后的加粗如何取消
解决方法： 同时设置 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
markline 标记线和折线的交点样式
- 设置 itemStyle.opacity 为 0 即可取消交点的样式
- 设置 color 和 itemStyle.emphasis.color 同色，即可解决交点的空心样式问题（使得空心颜色和折线颜色一致）
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
x轴label条件显示
需求： 只显示 第一个和最后一个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],
}
}
}
},
x轴label条件显示2
需求： x轴label想要显示三个，只显示 第一个、最后一个label和中间的label
问题1： 使用 interval: Math.floor((_this.date.length-3)/2), 始终无法准确显示最后一个和中间一个
问题2： 使用 formatter 回调进行index判断显示(第一个、中间一个、最后一个)，但是回调调用混乱
解决：
此处必须与 interval: 0 搭配使用，因为默认会自动添加interval:auto 导致label过多
如果 interval: 0 不配置，formatter会被循环调用两次（第一次是遍历，第二次是按照interval: auto）
xAxis: {
type: 'category',
data: this.date,
axisLine: {
show: false,
lineStyle: {
color: axisLabelColor
}
},
axisTick: {
show: false,
},
axisLabel: {
// interval: Math.floor((_this.date.length-3)/2),
interval: 0,
formatter(value, index) {
// 此处必须与 interval: 0 搭配使用，因为默认会自动添加interval
if (index === 0) {
return `{a|${_this.formatDate(value)}}`;
} else if (index === _this.date.length - 1) {
return `{b|${_this.formatDate(value)}}`;
} else if (index === Math.floor(_this.date.length/2)) {
return `{c|${_this.formatDate(value)}}`;
}
},
rich: {
a: {
...textCommonStyle,
padding: [0, 0, 0, this.calcEchartPx(55)]
},
b: {
...textCommonStyle,
padding: [0, this.calcEchartPx(55), 0, 0]
},
c: {
...textCommonStyle,
},
},
// margin会导致label被遮挡（显示不全）
// margin: this.calcEchartPx(8),
},
// X 轴相对于默认位置的偏移
offset: this.calcEchartPx(8)
},
十字线效果
坐标轴axisPointer （例如xAxis.axisPointer、yAxis.axisPointer） 表示对应坐标轴的的指示器，默认不显示，但是优先级最高（会覆盖tooltip.axisPointer）
tooltip.axisPointer 表示tooltip的指示器，默认显示，一般是x轴的指示器
// 区别于tooltip中的axisPointer，默认不显示，但是优先级更高
xAxis: {
axisPointer: {
show: true,
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", // 十字线，表示启用两个正交的轴，还可为'line'，'none'，'shadow'
axis: 'y', // 可以定义轴 'x','y','radius','angle'，一般是x轴
label: {
show: false
},
crossStyle: {
// type: "solid",
color: '#ff0000',
}
},
},
markline标记线不准确问题
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的显示和隐藏事件
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'
});
})
