echarts配置项详解

具体配置的样式参考帮助文档

$(function(){
    //多列柱形图
    var mychar=echarts.init(document.getElementById('bar'));
    var option={
        title:{
            text:'柱形图',
            subtext:'--cx',
            padding:[5,5,5,5]
            //主标题与副标题之间的距离
            //itemGap:100
        },
        legend: {
            //图例布局
             //orient:'vertical'//竖着，默认是横着
        },
        dataset:{
            sourceHeader:'true',
            source:[
                ['product','2017','2018'],
                ['Mon','120','123'],
                ['Tue','110','173'],
                ['Wed','100','113'],
                ['Thu','90','103'],
                ['Fri','80','113'],
                ['Sat','80','133'],
                ['Sun','125','128']
            ]
        },
        xAxis:{
            type:'category',
            name:'横轴',
            nameLocation:'end',
            //与坐标轴之间的距离
            nameGap:30,
            //坐标轴名字旋转，角度值。
            nameRotate:30
            //是否是反向坐标轴
                //inverse:true
            //坐标轴两边留白策略
                //boundaryGap:['20%','50%']
            //X 轴或者 Y 轴的轴线是否在另一个轴的 0 刻度上，只有在另一个轴为数值轴且包含 0 刻度时有效。
            //onZero:true,
        },
        //区域缩放
        dataZoom: [
            {
                id:'datazoomx',
                type:'slider',
                xAxisIndex:[0]
            },
            {
                id:'datazoomy',
                type:'slider',
                yAxisIndex:[0]
            }
        ],
        yAxis:{},
        //tooltip:提示框组件
        tooltip:{
            trigger :'axis',
            axisPointer:{
                type:'cross',
                crossStyle:{
                    color:'red'
                },
                lineStyle:{
                    color:'red'
                }
            }
        },
        //toolbox:工具栏
        toolbox:{
            emphasis :{},
            show:true,
            showTitle:true,
            feature: {
               saveAsImage:{},//保存为图片
               restore:{},//还原
               dataView:{},//数据视图
               magicType:{
                type: ['line', 'bar']
               },
               //数据缩放
               dataZoom:{}
            }
        },
        series:[
            {type:'bar'},
            {type:'bar'}

        ]
    };
    mychar.setOption(option);
});