百度Echarts设置markPoint展示样式

最新推荐文章于 2024-05-30 14:32:32 发布

万德佛

最新推荐文章于 2024-05-30 14:32:32 发布

阅读量6.4k

点赞数 2

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

本文链接：https://blog.csdn.net/qq_39251440/article/details/121354622

版权

前端同时被 2 个专栏收录

41 篇文章 0 订阅

订阅专栏

echarts

16 篇文章 0 订阅

订阅专栏

以下仅供参考~
效果图:
在这里插入图片描述

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>ECharts</title>
		<!-- 引入 echarts.js -->
		<script src="https://lib.baomitu.com/echarts/4.7.0/echarts.js"></script>
	</head>

	<body>
		<!-- Dom容器 -->
		<div id="main" style="width: 100%;height:500px;"></div>
		<script type="text/javascript">
			function showEchars() {
				let chart1 = echarts.getInstanceByDom(document.getElementById('main'));
				if (chart1 === undefined) {
					chart1 = echarts.init(document.getElementById('main'));
				};
				let option = {
					title: {
						text: 'Temperature Change in the Coming Week'
					},
					tooltip: {
						trigger: 'axis'
					},
					legend: {},
					toolbox: {
						show: true,
						feature: {
							dataZoom: {
								yAxisIndex: 'none'
							},
							dataView: {
								readOnly: false
							},
							magicType: {
								type: ['line', 'bar']
							},
							restore: {},
							saveAsImage: {}
						}
					},
					xAxis: {
						type: 'category',
						boundaryGap: false,
						data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun']
					},
					yAxis: {
						type: 'value',
						axisLabel: {
							formatter: '{value} °C'
						}
					},
					color: ["#5470c6", "#91cc75", "#50aa9d"],
					series: [{
							name: 'Highest',
							type: 'line',
							data: [10, 11, 13, 11, 12, 12, 9],
							markPoint: {
								symbolSize: [0, 8], // 容器大小
								symbolOffset: [0, -9], //位置偏移
								data: [{
									type: 'max',
									name: '最大值'
								}, {
									type: 'min',
									name: '最小值'
								}],
								label: {
									offset: [0, 0],
									textStyle: {
										color: "#5470c6",
										fontSize: 15,
									},
								},
							},
							markLine: {
								data: [{
									type: 'average',
									name: 'Avg'
								}]
							}
						},
						{
							name: 'Lowest',
							type: 'line',
							data: [1, -2, 2, 5, 3, 2, 0],
							markPoint: {
								data: [{
									name: '周最低',
									value: -2,
									xAxis: 1,
									yAxis: -1.5
								}]
							},
							markLine: {
								data: [{
										type: 'average',
										name: 'Avg'
									},
									[{
											symbol: 'none',
											x: '90%',
											yAxis: 'max'
										},
										{
											symbol: 'circle',
											label: {
												position: 'start',
												formatter: 'Max'
											},
											type: 'max',
											name: '最高点'
										}
									]
								]
							}
						},
						{
							name: 'Lowest2',
							type: 'line',
							data: [2, -17, 5, 6, 2, 1, 2],
							markPoint: {
								// symbol: 'path://m 0,0 h 48 v 20 h -30 l -6,10 l -6,-10 h -6 z', // 'circle', 'rect', 'roundRect', 'triangle', 'diamond', 'pin', 'arrow', path://m 0,0 h 48 v 20 h -30 l -6,10 l -6,-10 h -6 z,  path://m 0,0 h 48 v 20 h -34 l -6,10 l -6,-10 h -2 z
								itemStyle: {
									color: {
										type: 'linear',
										x: 0,
										y: 0,
										x2: 1,
										y2: 0,
										colorStops: [{
											offset: 0,
											color: '#F4515E' // 0% 处的颜色
										}, {
											offset: 1,
											color: '#21c3ae' // 100% 处的颜色
										}],
										globalCoord: false // 缺省为 false
									}
								},
								symbolSize: [50, 50], // 容器大小
								symbolOffset: [0, -20], //位置偏移
								data: [{
									type: 'max',
									name: '最大值'
								}, {
									type: 'min',
									name: '最小值'
								}],
								label: {
									offset: [0, 0],
									color: '#ffffff',
									formatter: [
										'2'
									].join('\n'),
								}

							},
							markLine: {
								data: [{
										type: 'average',
										name: 'Avg'
									},
									[{
											symbol: 'none',
											x: '90%',
											yAxis: 'max'
										},
										{
											symbol: 'circle',
											label: {
												position: 'start',
												formatter: 'Max'
											},
											type: 'max',
											name: '最高点'
										}
									]
								]
							}
						}
					]
				};
				chart1.clear();
				chart1.setOption(option, true);
				window.addEventListener("resize", function() {
					chart1.resize();
				});
			}
			showEchars()
		</script>
	</body>

</html>