echarts：为tooltip添加链接

最新推荐文章于 2023-12-05 10:50:11 发布

粉末的沉淀

最新推荐文章于 2023-12-05 10:50:11 发布

阅读量1.7k

点赞数 1

分类专栏： echarts 前端开发文章标签： echarts javascript 前端

本文链接：https://blog.csdn.net/lilycheng1986/article/details/122528328

版权

前端开发同时被 2 个专栏收录

61 篇文章 6 订阅

订阅专栏

echarts

33 篇文章 6 订阅

订阅专栏

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<title>ECharts</title>
		<script src="js/echarts.js"></script>
		<style>
		/* 去掉链接下划线 */
			a {
				text-decoration:none
			}
		</style>
	</head>
	<body>
		<div id="app" style="display: flex;">
			<!-- 为 ECharts 准备一个定义了宽高的 DOM -->
			<div id="main" style="width: 600px;height:400px;"></div>
		</div>

		<!-- 脚本 -->
		<script type="text/javascript">
			var chartDom = document.getElementById('main');
			var myChart = echarts.init(chartDom);
			var option;

			option = {
				tooltip: {
					show: true,
					// enterable设置为true，鼠标可进入提示框浮层中
					enterable: true,
					// alwaysShowContent一定要设置为true，否则鼠标无法移到tooltip去点击链接
					alwaysShowContent: true,
					formatter: function(params, ticket, callback) {
						// target="_blank"，在新窗口中打开链接
						var link = '';
						link = '<div>' +
							'<a href="http://www.baidu.com" target="_blank">' +
							params.name + ':' + params.value +
							'</a>' +
							'</div>';
						return link;
					}
				},
				xAxis: {
					type: 'category',
					data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun']
				},
				yAxis: {
					type: 'value'
				},
				series: [{
					data: [150, 230, 224, 218, 135, 147, 260],
					type: 'line'
				}]
			};

			option && myChart.setOption(option);
		</script>
	</body>
</html>