前端Echart图表展示

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} <br/>{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里面 在页面上进行展示即可