echarts柱状图又一个简单例子

时间：2016-06-08 编辑：简简单单来源：一聚教程网

echarts柱状图效果

代码

代码如下

复制代码

function get() {
        //折线图
                lineChart = echarts.init(document.getElementById("line"));
                var lineChartOtion = getLineChartOption();
                lineChart.setOption(lineChartOtion);
    }
    //获得Line图的选项和数据
    function getLineChartOption() {
        var lineChartOption = {
            title : {
                text : "吸光度/抑制率", //报表标题
                subtext : "对比" //报表副标题
            },
            //提示框,鼠标悬浮交互时的信息提示
            tooltip : {
                trigger : "axis",//触发类型，默认数据触发,可选为：'item' | 'axis'
                backgroundColor:'rgba(0,0,0,0.7)',
                formatter: function(params,ticket,callback) {                //自定义的提示框内容

                    var res = ' 样品合格率 :';
                    var aa=null;
                    for (var i = 0, l = params.length; i < l; i++) {
                        aa=params[i][2],
                        res += '
' + params[i][0] + ' : ' + reportchardata(aa);
                    }
                    setTimeout(function(){
                    // 仅为了模拟异步回调
                        callback(ticket, res);
                    }, 0);
                    return 'loading';
                }
            },
            //图例，每个图表最多仅有一个图例
            legend : {
                data : [ "吸光度", "抑制率" ]
            //上面显示的那两个要生成的图   *必须要和下面的数据是一样的。多了空格都不可以
            },
            //工具箱，每个图表最多仅有一个工具箱
            toolbox : {
                show : true,
                feature : {
                    magicType : [ "line", "bar" ],
                    restore : true,
                    saveAsImage : true
                }
            },

            dataZoom : {//x轴时间滑动条
                show : true,
                realtime : true,
                start :0,
                end : 100
            },

            //是否启用拖拽重计算特性，默认关闭
            calculable : true,
            xAxis : [ {
                type : "category", //坐标轴类型，横轴默认为类目型"category"，纵轴默认为数值型"value"
                //boundaryGap : false,       //如果生成的报表是柱图，这个属性不要，如果是折线图加上
                //data : ['1月','2月','3月','4月','5月','6月','7月','8月','9月','10月','11月','12月']
                data:fetchXname()           //动态获取X轴的数据
            } ],
            yAxis : [ {
                type : "value", //坐标轴类型，横轴默认为类目型"category"，纵轴默认为数值型"value"
                axisLabel : { //坐标轴文本标签
                    formatter : "{value} %"
                },
                splitNumber : 20,
                splitArea : {
                    show : true
                }
            //分隔区域，默认不显示，属性show控制显示与否
            } ],
            //驱动图表生成的数据内容数组，数组中每一项为一个系列的选项及数据，其中个别选项仅在部分图表类型中有效
            series : [ {
                name : "吸光度",
                type : "bar",      //bar表示生成的是柱状图,line表示生成的是折线图
                itemStyle : {
                    normal : {
                        lineStyle : {
                            shadowColor : "rgba(0,0,0,0.4)"
                        }
                    }
                },
                data : fetchNpAbs()        //动态获取数据
            }, {
                name : "抑制率",
                type : "bar",
                itemStyle : {
                    normal : {
                        lineStyle : {
                            shadowColor : "rgba(0,0,0,0.4)"
                        }
                    }
                },
                data : fetchNpYzl()    //动态获取数据
            } ]
        };
        return lineChartOption;
    }
    function fetchXname() {
        var arr = new Array();
        $("#form").form("validate");
        var url = "reportProductAction.do?method=getChart";
        var param={
                "samName" :$("#samNameTree").combotree("getValue"),
                "testTime":$("#testTime").val()
                };
        $.ajax({
            url : url,
            type : "post",
            data : param,
            dataType : "json",
            async : false,
            success : function(data) {
                //调用函数获取值，转换成数组模式
                if (data != null) {
                    var ss = eval(data);
                    for ( var i = 0; i < ss.length; i++) {
                            arr.push(ss[i].testTime);
                    }
                }
            }
        });
        return arr;
    }
    //npAbs;// 吸光度
    function fetchNpAbs() {
        var arr = new Array();
        var url = "reportProductAction.do?method=getChart";
            var param={
                "samName" :$("#samNameTree").combotree("getValue"),
                "testTime":$("#testTime").val()
            };
        $.ajax({
            url : url,
            type : "post",
            data : param,
            dataType : "json",
            async : false,
            success : function(data) {
                //调用函数获取值，转换成数组模式
                if (data != null) {
                    var ss = eval(data);
                    for ( var i = 0; i < ss.length; i++) {
                            arr.push(ss[i].npAbs);
                    }
                }
            }
        });
        return arr;
    }
    //npYzl;// 抑制率
    function fetchNpYzl() {
        var arr = new Array();
        $("#form").form("validate");
        var url = "reportProductAction.do?method=getChart";
            var param={
                "samName" :$("#samNameTree").combotree("getValue"),
                "testTime":$("#testTime").val()
                };
        $.ajax({
            url : url,
            type : "post",
            data : param,
            dataType : "json",
            async : false,
            success : function(data) {
                //调用函数获取值，转换成数组模式
                if (data != null) {
                    var ss = eval(data);
                    if (ss.length == 0) {
                        lineChart.dispose();
                        showmsg("没有相关数据,请重新查询~~！");
                    }
                    for ( var i = 0; i < ss.length; i++) {
                        if (ss[i].npYzl != null) {
                            arr.push(ss[i].npYzl);
                        } else {
                            lineChart.dispose();
                            showmsg("没有相关数据,请重新查询~~！");
                        }
                    }
                }
            }
        });
        return arr;
    }

上一个：浏览器缓存数据localStorage数据例子
下一个： FCKeditor编辑器在IE11浏览器不加载不显示问题解决办法

推荐专题

最新下载

热门教程

echarts柱状图又一个简单例子

相关文章

热门栏目

php教程

asp.net教程

手机开发

css教程

网页制作

办公数码

jsp教程