Echarts——画图三步曲

最新推荐文章于 2024-09-21 19:53:56 发布

four_three

最新推荐文章于 2024-09-21 19:53:56 发布

阅读量2.1k

点赞数

分类专栏： Echarts，每日一图文章标签： javascript html5 前端大数据 json

本文链接：https://blog.csdn.net/four_three/article/details/110670191

版权

Echarts，每日一图专栏收录该内容

5 篇文章 0 订阅

订阅专栏

今天，小编以“画图三步曲”作为和大家一起学习Echarts的开端。
接下来，小编就跟大家介绍一下这个所谓的“画图三步曲”：

引用文件（主要是echarts的JS文件和数据资源）
设置容器
为生成图表做一些配置（核心步骤）

下面就为大家一一介绍。

1.引用文件

创建一个 HTML 页面，引入 echarts.min.js：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>基础折线图</title>
    <script src="../js/echarts.min.js"></script>
</head>
<body>
</body>
</html>

echarts.min.js是我们画图所必须引用的文件，当然，echarts还有别的一些js文件，这个是因图而异的，后面讲图的的时候会和大家一一介绍~

2.设置容器

第二步就是为我们的图表设置一个容器：

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

这里宽度、高度和id都是可以更改的。

3.配置

ECharts 库使用 json 格式来配置。

<script type="text/javascript">
	var mycharts=echarts.init(document.getElementById("main"));
	var option={
		......
		......
		......
	}
	
	mycharts.setOption(option);
</script>

注意：document.getElementById(“main”)中的“main”是步骤2中容器的id，这里一定要对应上。

对于不同的图表会有不同的配置项，先给大家看一个例子，后面讲图表的时候会跟大家详细介绍。

var option={
	title:{
		text:'测试'
	},
	tooltip:{},
	legend:{
		data:['test']
	},
	xAxis:{
		type:'category',
		data:['1','2','3','4','5']
	},
	yAxis:{
		type:'value'
	},
	series:[{
		name:'test',
		data:[12,15,10,15,16],
		type:'line'
	}]
};

好，画图三步曲就介绍到这里，有什么问题随时跟小编留言哦~
欢迎大家加入小编的课堂，和小编一起拿下Echarts！