百度图表（一）

一、学习百度图表插件ECharts

百度图表官方域名为：http://echarts.baidu.com。可以从该网站上下载百度图表的js文件，该文件的文件名为：echarts.js
在使用百度图表的HTML文档中加载下载的echarts.js文件：

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

首先需要在HTML文档中创建一个容器，并利用CSS技术为该容器设置宽度和高度。

<div id="main"></div>

#main{
	width:600px; height:500px; //宽度和高度可以根据需要任意设置
	border:solid 1px #666666;
}

在HTML文档中家在一个自定义js文件，并放置在<script></acript>标记对的末尾：

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

在自定义js文件中，使用ECharts插件，需要采用下列步骤：

1、获取盛放图表的div容器：

var mainNode=document.getElementById("main");

2、初始化echarts实例：

var myChart=echarts.init(mainNode);

3、指定图标的配置项和数据：

var option={
…
}; //指定的图表配置项和数据可以放在 JSON 文件中

4、使用配置项和数据显示图表：

myChart.setOption(option);

如果想制作出符合自身要求的图表，需要指定图表的配置项和数据。图标的配置项和数据是一个JSON数据，可以存储在一个独立的JSON文件中，并按照百度图表的规定书写这个JSON文件。

二、制作第一个简易柱状图

下面为大家展示一个制作好的柱状图的配置项和数据：

var option={
	"title":{	//标题组件
		"text":"ECharts 入门实例"
	},
	"tooltip":{},	//工具提示
	"legend":{	//图例
		"data":["销量"]
	},
	"xAxis":{	//水平轴
		"data":["衬衫","羊毛衫","雪纺衫","裤子","高跟鞋","袜子"]
	},
	"yAxis":{},	//垂直轴（必须要写）
	"series":[{	//数据系列（数组）
		"name":"销量",
		"type":"bar",
		"data":[10,20,30,100,30,15]
	}],
	"color":["#ff5857"]	//颜色（数组）
}

上述代码定义了一个 JSON 数据，该 JSON 数据的第一级键名被 ECharts 称为“组件”。
title 是图表的标题组件；t
ooltip 是图表的提示框组件，也叫作“气泡”组件；
legend 是图表的图例组件；
xAxis 是图表的平面直角坐标系的 x 轴组件；
yAxis 是图表的平面直角坐标系的 y 轴组件；
series 是图表的数据系列组件；
color 是图表的调色盘组件。

ECharts 的各个组件包含更多的键名选项，可以控制每一个组件的功能和样式，是 ECharts 图表插件的核心内容。

将上述代码书写在一个独立的 JSON 文件中，再配合上一节中创建的 index.js 文件、样式文件、HTML文件就可以制作出一个简单的柱状图。