HTML实现折现图完整源码及效果图（附源码）

最新推荐文章于 2024-05-14 02:27:52 发布

刺心疯

最新推荐文章于 2024-05-14 02:27:52 发布

阅读量2.1k

点赞数 1

分类专栏： HTML5

本文链接：https://blog.csdn.net/qq_42363090/article/details/94445746

版权

HTML5 专栏收录该内容

201 篇文章 10 订阅

订阅专栏

效果图
在这里插入图片描述
源码

<!DOCTYPE html>
<html>
 
	<head>
		<meta charset="utf-8" />
		<script src="https://cdnjs.cloudflare.com/ajax/libs/echarts/4.2.1/echarts-en.common.min.js" type="text/javascript" charset="utf-8"></script>
		<script src="http://libs.baidu.com/jquery/2.0.0/jquery.min.js"></script>
		<title></title>
	</head>
	<style type="text/css">
		div {
			display: flex;
		}
	</style>
 
	<body>
		<!-- 为 ECharts 准备一个具备大小（宽高）的 DOM -->
		<div id="main" style="width: 80%;margin-left: 10%;height:400px;"></div>
		<script type="text/javascript">
			// 基于准备好的dom，初始化echarts实例
			var myChart = echarts.init(document.getElementById('main'));
 
			// 指定图表的配置项和数据
			option = {
				color: '#8CE24F',
				xAxis: {
					type: 'category',
					data: ['20190615', '20190616', '20190617', '20190618', '20190619', '20190620', '20190621']
				},
 
				yAxis: {
					axisLine: {
						show: false
					},
					axisTick: {
						show: false
					},
					//                                  splitLine:{show:false},
					type: 'value',
					axisLabel: {
						formatter: '{value} M'
					}
				},
				center: [200, 300],
				series: [{
					data: [3, 1, 2, 1, 4, 3],
					symbolSize: 10, // 图表	的点的大小
					type: 'line'
				}]
			};
 
			// 使用刚指定的配置项和数据显示图表。
			myChart.setOption(option);
		</script>
	</body>
 
</html>

刺心疯

关注

1
点赞
踩
10

收藏

觉得还不错? 一键收藏
打赏
0
评论
HTML实现折现图完整源码及效果图（附源码）

效果图源码<!DOCTYPE html><html> <head> <meta charset="utf-8" /> <script src="https://cdnjs.cloudflare.com/ajax/libs/echarts/4.2.1/echarts-en.common.min.js" type="text/...
复制链接

扫一扫