echart - 柱形图

初始化柱状图

function initBar(category, data){
        // srcipt标签式引入
        //基于准备好的dom，初始化echarts实例
        var myChart = echarts.init(document.getElementById('bar'));
        var titleText = isStatisticLine?'1':'2';
        var barUnit = isStatisticLine?'（3：m）':'（31：个）';
        titleText = '*' + titleText + '在*****的分布情况'+barUnit;
        // 图表使用-------------------
        //一般都定义为option
        var option = {
        //背景颜色设置
            backgroundColor:'#17435c',
            //标题组件，需要额外引入
            title : {
            //标题名称
                text:titleText,
            // // 水平安放位置，默认为左对齐，可选为： 'center' ¦ 'left' ¦ 'right' |{number}（x坐标，单位px）。
            //还有个y，垂直安放位置, 默认为全图顶端，可选为：'top' ¦ 'bottom' ¦ 'center' ¦ {number}（y坐标，单位px）;
            //textAlign: null ; 水平对齐方式，默认根据x设置自动调整。
            //还可以设置边框样式
            //  itemGap:主副标题间的间隔，默认为10，单位为px
                x:'center',
                //标题文本样式
                textStyle:{
                    fontSize: 18,
                    fontWeight: 'bolder',
                    color: '#fff'
                }   
            },
            // 提示框
            tooltip : {
            //触发类型，默认数据触发，可选为：'item' ¦ 'axis'。item:数据项图形触发;axis:
                trigger: 'item',
            //提示框的格式，两种选择：字符串或者自定义函数
                formatter: "{b} <br/>{a} : {c}<br/>点击可以查看详细信息"
            },
            //内部图表大小是与div容器大小位置相关的，如果想调整图表大小位置，调整div的属性就可以了。如果是想调整图表与div间上下左右留白，则设置grid属性就可以了。左：x,上为y,右为x2，下为y2
            grid:{
                y:80,
            },
            //  图例，即表格中不同数据源的代表的颜色说明
            legend: {
                data:[],
                // 各个item之间的间隔，
                itemGap:5,
                // 垂直安放位置
                y:'25',
                textStyle:{color: '#fff'}   
            },
            calculable : false,
            //区域缩放控制器
            dataZoom : {
                show : true,//是否显示 组件。如果设置为 false，不会显示，但是数据过滤的功能还存在。
                orient: 'horizontal',  //布局方式是横还是竖。不仅是布局方式，对于直角坐标系而言，也决定了，缺省情况控制横向数轴还是纵向数轴。'horizontal'：水平。'vertical'：竖直。  

                width:400 ,
                height:15,
                //数据缩放，选择起始比例，默认为0（%），从首个数据起选择
                start : 40,
                //数据缩放，选择结束比例，默认为100（%），到最后一个数据选择结束。
                end : 60,
                handleColor:'#fff'
            },
            //横坐标，直角坐标系中的横轴，通常并默认为类目型
            xAxis : [
                {
                    type : 'category',
                    data : category,
                    //坐标标签
                    axisLabel: {
                    // 旋转角度
                        rotate:-20,
                        textStyle:{color: '#fff'}
                    }
                }                
            ],
            yAxis :  [{
                type : 'value',
                axisLabel: {textStyle:{color: '#fff'}
            }}],
            series : []
        };

        // 动态添加数据和legend 
        for(var layerName in data){
        //驱动图表生成的数据内容数组，数组中每一项为一个系列的选项及数据，其中个别选项仅在部分图表类型中有效，请注意适用类型
            option.series.push({
                name:layerName,
                //图表类型，bar为柱状图
                type:'bar',
                data:data[layerName]
            });
            option.legend.data.push(layerName);
        }


        myChart.setOption(option);
        // 点击单个柱形图后的下一步操作
        myChart.on(echarts.config.EVENT.CLICK, function(event){
            $("#result-tab li:last").css("display","block");
            initDetailTable(detail[event.seriesName], event.name);
        });
    }