echarts流动的光效

最新推荐文章于 2024-08-31 09:27:14 发布

城永

最新推荐文章于 2024-08-31 09:27:14 发布

阅读量571

点赞数 6

本文链接：https://blog.csdn.net/weixin_47133092/article/details/137072115

版权

<!DOCTYPE html>
<html>

<head>
	<meta charset="utf-8">
	<title>echarts流动的光效</title>
	<!-- 引入 echarts.js -->
	<script src="https://cdn.staticfile.net/echarts/4.3.0/echarts.min.js"></script>
</head>

<body>
	<!-- 为ECharts准备一个具备大小（宽高）的Dom -->
	<div id="main" style="width: 600px;height:600px;"></div>
	<script type="text/javascript">
		var chartDom = document.getElementById('main');
		var myChart = echarts.init(chartDom);
		var option;

		option = {
			xAxis: {
				type: 'category',
				data: ['A', 'B', 'C', 'D', 'E', 'F']
			},
			yAxis: {
				type: 'value'
			},
			series: [{
					name: '注册总量',
					type: 'line',
					data: [502.84, 205.97, 332.79, 281.55, 398.35, 214.02]
				},
				//折线图流光配置
				{
					name: '滑行的光点',
					type: 'lines',
					coordinateSystem: 'cartesian2d',
					polyline: true,
					effect: {
						show: true, //是否展示
						period: 5, //时间
						trailLength: 0.3, //尾部长度
						symbolSize: 8, //点大小
						symbol: 'circle', //点的类型
						color: 'red' //颜色
					},
					data: [{
						//coords:[['x轴数据'，y轴数据]] 一一对应拼接
						coords: [
							['A', 502.84],
							['B', 205.97],
							['C', 332.79],
							['D', 281.55],
							['E', 398.35],
							['F', 214.02]
						]
					}]
				}
			]
		};

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

</html>