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 标记线和折线的交点样式

1. 设置 itemStyle.opacity 为 0 即可取消交点的样式
2. 设置 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],
                }
            }
        }
    },

    

十字线效果

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标记线不准确问题

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‘
	});
})

    

原文：https://www.cnblogs.com/nangezi/p/14721188.html