1、饼状图案例：

var myChart = echarts.init(document.getElementById('main'));

    var option = {
        title : {
            text : '某站点用户访问来源',
            subtext : '纯属虚构',
            x : 'center'
        },
        tooltip : {
            trigger: 'item',  //提示框的样式
            formatter: "{a} <br/>{b}: {c} ({d}%)"
        },
        legend : {
            orient: 'vertical',
            x: 'right',
            data:['直接访问','邮件营销','联盟广告','视频广告','搜索引擎'],
            textStyle:{    //图例文字的样式
                color:'#333',  //文字颜色
                fontSize:12    //文字大小
            }
        },
        toolbox : {//工具栏
            show : true,
            x : 'left',//居左
            feature : {
                mark : {
                    show : true
                },
                dataView : {//数据视图
                    show : true,
                    readOnly : true
                },
                restore : {//重置
                    show : true
                },
                saveAsImage : {//保存图片
                    show : true
                }
            }
        },
        calculable : true,
        series : [
            {
                name : "访问来源",
                type : "pie",
                // radius : ['30%','70%'],
                // avoidLabelOverlap: false,
                // color:['#f5b26c','#54bbab','#a3e9a5'],
                radius : ['30%','70%'],//环状
                center : ['50%','50%'],//居中
                itemStyle : {
                    normal : {
                        show: true,
                        formatter : '{b} : {c} ({d}%)'
                    }
                },
                label: {
                    normal: {  
                        show: true,
                        position: 'left'
                    },
                    emphasis: { 
                        show: true,
                        textStyle: {
                            fontSize: '20',
                            fontWeight: 'bold'
                        }
                    }
                },
                data:[
                    {value:335, name:'直接访问'},
                    {value:310, name:'邮件营销'},
                    {value:234, name:'联盟广告'},
                    {value:135, name:'视频广告'},
                    {value:1548, name:'搜索引擎'}
                ]
            }
        ]
    }
    myChart.setOption(option);

2、柱状图案例

var myChart = echarts.init(document.getElementById('main'));

    var option = {
        title : {
            text : '某地区蒸发量和降水量',
            backgroundColor : '#000',
            textAlign : 'center',
            textStyle : {
                color : '#fff'
            },
            left : 500
        },
        tooltip : {
            trigger : 'axis'
        },
        legend : {
            data : ['蒸发量','降水量'],
            x : 'left'
        },
        // toolbox : {
        //     show : true,
        //     featture : {
        //         mark : {
        //             show : true
        //         },
        //         dataView : {
        //             show : true,
        //             readOnly : true
        //         },
        //         magicType : {
        //             show : false,
        //             type : ['line','bar']
        //         },
        //         restore : {
        //             show : true
        //         },
        //         saveAsImage : {
        //             show : true
        //         }
        //     }
        // },
        calculable : true,
        xAxis : [
            {
                type : 'category',
                data : ['1月','2月','3月','4月','5月','6月','7月','8月','9月','10月','11月','12月']
            }
        ],
        yAxis : [
            {
                type : 'value'
            }
        ],
        series : [
            {
                name : '蒸发量',
                type : 'bar',
                data : [2,4.9,7,23.2,25.6,76.7,135.6,162.2,32.6,20,6.4,3.3]
            },
            {
                name : '降水量',
                type : 'bar',
                data : [2.6,5.9,9,26.4,28.7,70.7,175.6,182.2,48.7,18.8,6,2.3]
            }
        ]
    }
    myChart.setOption(option);