ECharts百度图表

一、学习百度图表插件ECharts

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

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

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

<div class="main"></div>

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

在HTML文档中家在一个自定义js文件，并放置在

<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 称为“组件”。
把我们写好的代码放在一个独立的 JSON 文件中，再配合上一节中创建的 index.js 文件、样式文件、HTML文件就可以制作出一个简单的柱状图。

title 是图表的标题组件；t
ooltip 是图表的提示框组件，也叫作“气泡”组件；
legend 是图表的图例组件；
xAxis 是图表的平面直角坐标系的 x 轴组件；
yAxis 是图表的平面直角坐标系的 y 轴组件；
series 是图表的数据系列组件；
color 是图表的调色盘组件。
ECharts 的各个组件包含更多的键名选项，可以控制每一个组件的功能和样式，是 ECharts 图表插件的核心内容。