做了个项目，在报表管理这一块，用到图形化报表。由于echarts是百度开源免费的组件，所以使用echarts作为报表的工具，非常简单好用、也有很多例子、用法很容易找到，笔者也是网上各种搜索，完成了任务，以下仅是用法的一些总结，方便以后查阅。
一：首先去官网下载echarts的js文件，http://echarts.baidu.com/ 官网也有非常多的例子。
二：把echarts.js 放入到我们的项目，然后在我们的页面中引用该文件，具体方式也不必多说。
三：定义dom，我发现使用echarts 你得在dom中定义其宽或者高，两者必须有其一，否则会报错。
四：最重要的编写js环节。本文以饼图和柱状图为例，其他组件也差不多。上代码
// 柱状图
var bar = {
title: {
text: '报表1'
},
tooltip: {},
legend: {
data:xarray
},
xAxis: {
type: 'category',
data:xarray,
axisLabel: {
interval:0,
rotate:20
}
},
yAxis: {
type: 'value'
},
series: [{
name: '数量',
type: 'bar',
// barWidth:30,
data:yarray
}],
};
// 基于准备好的dom，初始化echarts实例
var echart1 = echarts.init(document.getElementById('rightBar'));
// 使用刚指定的配置项和数据显示图表。
echart1.setOption(bar);
其实看变量也大概知道一些，值得一看的是，xaxis的axisLabel属性、因为我做的时候，有的名字很长，导致我的x左边根本放不下那么多字，所以我用了这个属性，interval为强制显示每一个x值，rotate为 倾斜20度，度数可以自行调整，倾斜之后可以完美看到效果。
另外我们看到series属性下有name、type、data等属性，name可以理解为，该控件名称，echarts可以让你鼠标放在控件上方会显示该控件名称，type："bar" 表明我让它以柱状图的形式呈现，barWidth为每个柱子的宽度，当然，它本身是自适应的，如果觉得不合适，可以写死宽度。data就是数据。可以理解为y轴数据，通常是一个数组，我定义成我自己写的yarray 这个数组是我通过ajax 请求 后台拿到的数据，push到yarray中的。
以下是饼图示例：
var rightPie = {
title: {
text: '饼图示例'
},
tooltip : {
trigger: 'item',
formatter: "{a} <br/>{b} : {c} ({d}%)"
},
legend: {
orient: 'vertical',
top: 'right',
data:xarray
},
series: [{
name: '数量',
type: 'pie',
// barWidth:30,
data:dataArray
}]
};
// 基于准备好的dom，初始化echarts实例
var rightChart = echarts.init(document.getElementById('rightPie'));
// 使用刚指定的配置项和数据显示图表。
rightChart.setOption(rightPie);
其实具体用法是万变不离其宗，值得注意的是因为饼图它不像柱状图、折线图这种有x、y坐标，它的数据都是放在一个键值对里，所以我定义了一个dataArray这个数组，这个数组的每一个元素都是一个map，map里有 name、value两个属性、name表示每一块扇区的名称、value为扇区对应的值，然后pie组件会帮你自动计算它所占的比例。我们要传的仅是这两个值。
还有一个属性值得注意的是：tooltip属性下的formatter:"{a} <br/>{b} : {c} ({d}%)"
{a} 是这个饼图的name值 我设置那个为：“数量” {b}是当前扇区的name值 即dataArray中的name属性的值
{c} 是当前扇区的value值，即dataArray中的value属性的值
{d}是当前扇区所占的比例，这个比例由echarts计算
echarts还有很多属性，具体可以查看官方文档：http://echarts.baidu.com/echarts2/doc/doc.html
非常有用