Echart是一款非常强大和简单的展示报表的插件，最近业务需求，需要用到报表方面的功能，这里推荐使用Echart插件，非常轻便和简介，操作简单易于上手，下面就列举一个柱状图和饼状图的代码：
主要是使用一个div标签，然后使用js进行渲染完成的，下面分别是饼状图和柱状图的js结构代码：
柱状图:
option = {
color: [‘#3398DB’],
tooltip : {
trigger: ‘axis’,
axisPointer : { // 坐标轴指示器，坐标轴触发有效
type : ‘shadow’ // 默认为直线，可选为：’line’ | ‘shadow’
}
},
grid: {
left: ‘3%’,
right: ‘4%’,
bottom: ‘3%’,
containLabel: true
},
xAxis : [
{
type : ‘category’,
data : //json1,
axisTick: {
alignWithLabel: true
}
}
],
yAxis : [
{
type : ‘value’
}
],
series : [
{
name:’直接访问’,
type:’bar’,
barWidth: ‘60%’,
data:json2
}
]
};
主要的结构就是2个data的josn数据
下面是饼状图：
option = {
title : {
text: ‘某站点用户访问来源’,
subtext: ‘纯属虚构’,
x:’center’
},
tooltip : {
trigger: ‘item’,
formatter: “{a}
{b} : {c} ({d}%)”
},
legend: {
orient: ‘vertical’,
left: ‘left’,
data: json1
},
series : [
{
name: ‘访问来源’,
type: ‘pie’,
radius : ‘55%’,
center: [‘50%’, ‘60%’],
data:[//下面的json数据类似于map结构
{value:335, name:’直接访问’},
{value:310, name:’邮件营销’},
{value:234, name:’联盟广告’},
{value:135, name:’视频广告’},
{value:1548, name:’搜索引擎’}
],
itemStyle: {
emphasis: {
shadowBlur: 10,
shadowOffsetX: 0,
shadowColor: ‘rgba(0, 0, 0, 0.5)’
}
}
}
]
};
数据结构一个data的json数据和一个类似map集合的数据
后台使用的是servlet完成的，直接把数据对象先转成json格式，然后通过response对象传到页面的ajax里面 在页面上进行展示即可