echarts入门

最新推荐文章于 2024-10-12 21:05:15 发布

原创最新推荐文章于 2024-10-12 21:05:15 发布 · 164 阅读

1 ·

CC 4.0 BY-SA版权

javascript 同时被 2 个专栏收录

22 篇文章

订阅专栏

echart

1 篇文章

订阅专栏

功能

一个基于 JavaScript 的开源可视化图表库

入门

1

新建一个html文件

2

引入js
在这里插入图片描述

<script type="text/javascript" src="js/echarts.min.js"></script>

3

给一个具有足够宽高的盒子

<div id="main" style="width: 600px;height:400px;"></div>

4

将需要的图表实例代码复制黏贴就好了
网址
https://echarts.apache.org/examples/zh/index.html

例子

基础折线图
import这句代码删掉才会正常显示，不太了解这行作用*
在这里插入图片描述

完整代码

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<script type="text/javascript" src="js/echarts.min.js"></script>
	</head>
	<body>
		<div id="main" style="width: 600px;height:400px;"></div>
			
		</div>
		<script>
		
	
		var chartDom = document.getElementById('main');
		var myChart = echarts.init(chartDom);
		var option;
		
		option = {
		    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>

进阶案例-每五秒随机改变折线图的值

注意：锁定纵坐标并赋值是
option.series[0].data[0]=XXX而不是option.series[0].data[0].value=XXX

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<script type="text/javascript" src="js/echarts.min.js"></script>
		<script src="https://cdn.staticfile.org/jquery/1.10.2/jquery.min.js"></script>
	</head>
	<body>
		<div id="main" style="width: 600px;height:400px;"></div>
			
		</div>
		<script>
		
	
		var chartDom = document.getElementById('main');
		var myChart = echarts.init(chartDom);
		var option;
			
		option = {
		    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);
		
		 timeTicket = setInterval(function() {	
		
			option.series[0].data[0]=(15 + Math.random() * 100).toFixed(1) - 0;
			  myChart.setOption(option, true);
		},3000);
	
		</script>
	</body>
</html>