学习笔记：使用echarts画图表

最新推荐文章于 2024-05-21 15:16:20 发布

木匠之子

最新推荐文章于 2024-05-21 15:16:20 发布

阅读量4.3w

点赞数

文章标签： echarts helloworld

本文链接：https://blog.csdn.net/imageprocessing2/article/details/40437909

版权

项目需要在网页上画图表，在网上找了一下，发现百度出品的echarts非常好用。echarts把看似复杂的图表进行了分解，使用结构化的模型来完成图表的配置。画图表就跟写CSS一样，实际上echarts使用的很多属性名字都和CSS是一样的。

echarts有非常详细的文档，官网还提供了很多个例子，很容易学会。

echarts是支持IE8的，虽然IE8不支持canvas，但是echarts画出的图表在IE8显示，目前没有发现有问题。

想学echarts，看官网的文档就可以了。以下是个人学习之后整理的helloworld小例子，以及学习过程中碰到的一些小问题。

1 画一个最粗糙的图表

官方推荐使用模块化单文件引入，我不知道模块化，所以采用了标签式单文件引入。

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>echarts测试</title>
</head>
<body>
	<!-- 第二步：为ECharts准备一个具备大小（宽高）的Dom -->
	<div id="main"
		style="height: 400px; width: 800px; border: 1px dotted black"></div>
		
	<!-- 第一步：标签式单文件引入。引入之后可以直接使用echarts对象。 -->
	<script src="../js/echarts-plain-original.js"></script>
	
	<!-- 注意顺序，使用echarts对象要在引入echarts文件之后 -->
	<script type="text/javascript">
		// 初始化一个图表实例
		var myChart = echarts.init(document.getElementById('main'));

		// echarts把复杂的图表结构化，图表的基本结构包括以下部分：标题，x轴，y轴，数值序列。
		var option = {
			// 标题
			title : {
				text : '销量和进货量'
			},
			// x轴
			xAxis : [ {
				type : 'category',
				data : [ "衬衫", "羊毛衫", "雪纺衫", "裤子", "高跟鞋", "袜子" ]
			} ],
			// y轴
			yAxis : [ {
				type : 'value',
				axisLabel : {
					formatter : '{value}件'
				}
			} ],
			// 数值序列
			series : [ {
				name : '销量',
				type : 'line',
				data : [ 5, 20, 40, 10, 10, 20 ],
			} ]
		};

		// 为图表实例加载数据
		myChart.setOption(option);
	</script>
</body>
</html>

得到的图表