Echarts百度图表

http://echarts.baidu.com可以在该网址下载echarts.js文件
在使用百度图表的HTML文档中加载下载的echarts.js文件：

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

html中创建一个容器，并为其设置宽和高

<div id="box"></div>

/*css*/
#box{
width:600px;
height:600px;
border:1px solid #ff5857;
}

自定义一个JS文件,在HTML页面引用

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

在自定义js文件中，使用Echarts插件

• 1、获取box

var boxNode=document.getElementById("box");

• 2、初始化echarts实例：

var myChart=echarts.init(boxNode)

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

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

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

myChart.setOption(option);

ECharts组件：图表数据中第一层键名。
1、title：标题组件
2、xAxis：水平轴
3、yAxis：垂直轴
4、legend：图例
5、tooltip：工具提示
6、series：数据系列（数组）
7、color：颜色（数组）

简易柱形图

var boxNode=document.getElementById("box");
var myChart=echarts.init(boxNode);
var option={
	"title":{  //标题组件
		text:"Echarts 入门实例"
	},
	"tooltip":{},  //工具提示
	"legend":{  //图例
		data:["销量","","".....]
	},
	"xAxis":{ //水平轴
		data:["衬衫","羊毛衫","雪纺衫","裤子","高跟鞋","袜子"]
	},
	"yAxis":{}, //垂直轴
	"series":[ //数据（数组）
		{
			name:"销量",  //与legend中的data一致
			type:"bar",   //bar-柱形图；pie-饼形图；line-折线图
			data:[10,20,30,40,50,60],
			label:{
                show:true,     //显示图表具体数字
                position:"top"  //显示位置
            }
		},
		{},{}.....
	],
	"color":["","",""....] //颜色
}