echarts的标记线和标记点

最新推荐文章于 2023-10-23 22:11:17 发布

故事迷人眼

最新推荐文章于 2023-10-23 22:11:17 发布

阅读量1.6w

点赞数 8

分类专栏： echarts

本文链接：https://blog.csdn.net/a736889661/article/details/79802796

版权

echarts 专栏收录该内容

10 篇文章 0 订阅

订阅专栏

markPoint: 标记点---------------------------markLine：标记线

看了好几天还是不太理解markPoint和markLine的作用，昨晚看视频终于有点理解了，比如在一个折线图形当中我们经常看到最高和最低点都会有个标记，在echarts当中markPoint就是来标记最高和最低点的，而有的图表中会有个平均值得虚线，markLine就是用来表示平局值的这条线的，我做个demo看下会更直观

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>markLine</title>
	</head>
	<body>
		<div id="main" style="height: 500px;">
			
		</div>
    <script src="http://echarts.baidu.com/build/dist/echarts-all.js"></script>
	<script type="text/javascript">
		var myCharts = echarts.init(document.getElementById("main"));
		var option = {
			title: {
				text: "2018-3最后一周车辆统计"
			},
			legend:{
				data: ["小轿车","大巴车","共享单车"]
			},
			tooltip:{
				show: true
			},
			toolbox: {
				show: true,
				feature: {
					mark:{
						show:true
					},
					saveAsImage: {
						show:true
					}
				}
			},
			xAxis: {
				type: "category",
				data: ["周一","周二","周三","周四","周五","周六","周日"]
			},
			yAxis: {
				type:"value"
			},
			series: [
				{
					name: "小轿车",
					type: "line",
					data: [10002,8000,13000,14000,7999,13333,9000],
					markPoint:{
						symbol: "pin", //标注类型
						symbolSize: 20 , //标记大小
						data:[
							{type: "max", name: "最大值"},
							{type: "min", name: "最小值"}	
						]
					}
				},
				{
					name: "大巴车",
					type: "line",
					data: [2002,5000,3000,4800,3999,3333,3000]
				},
				{
					name: "共享单车",
					type: "line",
					data: [20002,28000,23000,24000,27999,23333,29000],
					markLine:{
						symbol: "arrow",
						data:[
							{type : 'max', name: '最大值'},    // 最大值水平线或垂直线
						    {type : 'min', name: '最小值'},    // 最小值水平线或垂直线
						    {type : 'average', name: '平均值'}// 平均值水平线或垂直线
						]
					}
				}
			]
		}
		myCharts.setOption(option);
	</script>
	</body>
</html>

图中像气球的是标记点->markPoint，紫色是标记线->markLine, 我没有用过多的语言去修饰

故事迷人眼

关注

8
点赞
踩
13

收藏

觉得还不错? 一键收藏
1
评论
echarts的标记线和标记点

markPoint: 标记点---------------------------markLine：标记线看了好几天还是不太理解markPoint和markLine的作用，昨晚看视频终于有点理解了，比如在一个折线图形当中我们经常看到最高和最低点都会有个标记，在echarts当中markPoint就是来标记最高和最低点的，而有的图表中会有个平均值得虚线，markLine就是用来表示平局值的...
复制链接

扫一扫