Apach Echarts入门

一、简介

        ECharts是百度公司开源的一个使用 JavaScript 实现的开源可视化库，兼容性强，底层依赖矢量图形库 ZRender ，提供直观，交互丰富，可高度个性化定制的数据可视化图表。ECharts一经面世，收到广大用户的种种好评，主要在于它的各方面优点：开源免费、功能丰富、社区活跃、多种数据支持、流数据支持、移动端优化、跨平台、酷炫特效、数据的三维展示等等。

        ECharts 能够做出各种各样漂亮的图表，它能满足绝大多数可视化图表的实现。它的兼容性强, 使用方便,功能强大, 是实现数据可视化的最佳选择之一, 更多特点和介绍可以查阅官网地址：
https://echarts.apache.org/zh/index.html，官方对应文件工具，有更详细的工具使用方法：
https://echarts.apache.org/zh/option.html

二、入门使用

2.1 引入

在 echarts CDN by jsDelivr - A CDN for npm and GitHub 选择 dist/echarts.js，点击并保存为 echarts.js 文件。引入Echarts.js文件

<script src = "./js/echarts.min.js"> </script>

2.2 设计呈现区域

        这个区域通常来说就是我们熟悉的div（标签对象）,这个div决定了图表显示在哪里。 

<div id="container" style = "width:800px;height:600px"> </div>

2.3 初始化echarts实例化对象

        通过 echarts.init 方法初始化一个 echarts 实例，并且是用来指明图表最终显示在哪里的DOM元素 

var echart=echarts.init(document.getElementById('container'));

2.4 设置配置项

        对配置项的设置，决定了图表最终的表达效果。所有的图表其他步骤都一样，区别都在于配置项的设置。

var option={
			//图表标题
			title:{
				text:"我的第一个图表"
			},
			//图标提示
			tooltip:{},
			//图例
			legend:{data:['睡眠时长']},
			//水平轴
			xAxis:{data:["周一","周二","周三","周四","周五","周六","周日"]},
			//垂直轴  {}代表默认值
			yAxis:{},
			//设置数据
			series:[
				{
					name:"睡眠时长",//数据名称
					type:"bar",//类型为柱状图
					data:[8,10,4,5,9,4,8]//数据
				}
			]
		};

2.5 将配置项设置给实例对象

echart.setOption(option);

最终效果：

 三、相关配置

xAxis：直角坐标系中的 x 轴, 如果 type 属性的值为 category ,那么需要配置 data 数据, 代表在 x 轴的；
呈现
yAxis：直角坐标系 中的 y轴, 如果 type 属性配置为 value , 那么无需配置 data , 此时 y 轴会自动去
series 下找数据进行图表的绘制；
series：系列列表。每个系列通过 type 决定自己的图表类型, data 来设置每个系列的数据
配置项都是以键值对的形式存在, 并且配置项有很多, ECharts 的学习大多是针对于这些配置项的, 对于配置项的学习, 不用死记硬背, 需要的时候查一查官方文档即可. 网址:
https://echarts.apache.org/zh/option.html 。