开发者学堂课程【大数据分析之企业级网站流量运营分析系统开发实战（第五阶段）：网站流量日志分析--数据可视化 -- echarts 简单入门】学习笔记，与课程紧密联系，让用户快速学习知识。
课程地址：https://developer.aliyun.com/learning/course/697/detail/12255
网站流量日志分析--数据可视化 -- echarts 简单入门
内容介绍：
一、echarts 入门操作步骤
二、具体实例演示
三、总结
一、echarts 入门操作步骤
在整个开发过程中，代码大多属于前端，而且开发代码也几乎不需要我们去编写，因为 echarts 已经写好了，整个 echarts 的使用大致来看跟其他的js是一样的，在页面上进行标签的引入，然后按照 API 进行编写即可。
整体步骤大致可以分为这么几步：
第一点需要在页面上通过 script 标签引入 JS；
第二需要去准备一个 dom 容器，即高宽的范围，确定图表大小；
第三是把标签选中创建一个 echarts 实例；
最后，选中标签后就需要具体的实例了，打开官网根据业务需求去寻找所需的具体图表类型，找到对应的图之后把图点开，会发现他右边有一个 option ，把它复制过来就可以了。图形的样式需要结合具体的业务来确定，把选择的样式设置到实际当中进行启动就可以绘制出来了。
二、具体实例演示
为了方便我们使用 HBuilder 的一款前端开发工具来画出页面，首先去创建一个 web 项目，叫做 hello echarts，然后我们可以发现在这里有 echarts，里面可以放置样式图片和 js，可以在官网下载，也可以从参考资料进行下载。
打开参考资料，在项目资料中有数据报表文件夹，把 echarts.js 复制到监视目录当中，接下来打开首页，要想引入他需要在 hive 当中使用标签，添加部署 script 标签，title 可以叫做 hello echarts。
以上是第一步，创建引入我标签，接下来我们需要在页面上去创建一个有高有宽的范围，专业叫法叫做 dom 容器。
这里我们定义了一个叫做 div 的标签，表示宽为 600 像素，高为 400 像素。接下来通过 echarts api 选中这个标签，创建一个 echarts 的实例。选中方法比较简单，
代码为：(document.getElementById(' main'))，根据 ID 选择标签，这样就创造好了容器。下面这一步就比较犀利了，直接创造一个 option 的数组，数组如何具体来实现还是到网上去寻找。
在这里我们以柱状图为例，我们可以确定柱状图的大概形状，具有一个 X 轴，一个Y 轴，在官网的 option 中查看具体属性，比如图名可以直接修改，里面每个柱表示的意思，X 轴表示的是各种商品，衬衫、羊毛衫、雪纺衫等等，Y 轴表示对应的数量，可以发现 X 轴是写死的，后面我们可以设法把这些变成动态的数据，在官网把需要的内容复制过来，再把 option 设置到 echarts 当中即可，可以发现过程我们没有写入任何代码，只需要进行大量的 CtrlC 和 CtrlvV，这就是使用其他软件的好处。
复制并粘贴到我们的页面上之后，通过浏览器可以立马查看到页面上出现柱状图，而且当把鼠标放上去之后还有动态效果，显示衬衫 15 个、羊毛衫是 20 个，这些效果背后都是百度做好的工作，我们所做的就是根据需求进行复制粘贴。
三、总结
1、在页面上引入 echarts.js
代码为：
<script type="text/javascript" src="js /echarts.js" ></script>
2、在页面创建—个 dom 容器有高有宽的范围
代码为：
<div id="main" style="width: 600px;height:400px; "></div>
3、选择容器使用 echarts api 创建 echarts 实例
代码为：
var mychart = echarts.init(document.getElementById( ' main ' ));
4、根据业务需求去 echarts 官网寻找对应的图形样式复制其 option
代码为：
var option = {
title: {
text: 'Echarts 入门示例"},
too1tip: {}，
legend: {
data:['销量'}，
}
xAxis: {
data:["衬衫", "羊毛衫","雪纺衫", "裤子"，"高跟鞋"，"袜子"]
}，
yAxis:{}，
series : [{
name: '销量'，
type: 'bar ' ,
data: [5，20，36，10，10，20]
)};
5、把 option 设置到创建的 echarts 实例中
代码为：
mychart.setoption (option) ;
