echarts柱状图实现demo

echarts柱状图实现demo

作者: IT小兵 | 2016年6月7日| 热度:1068℃ | 评论:8 |参与:9

效果图 ：

HTML代码：

<div>
            <form method="post" id="form">
                <table align="center">
                    <tr>
                        <td align="right">
                        样品名称：
                        </td>
                        <td>
                            <input id="samNameTree" name="samNameTree" class="easyui-combotree" required="required" style="width:128px;">
                        </td>
                        <td align="right">
                            检测时间：
                        </td>
                        <td>
                            <input class="easyui-validatebox" required="required" id="testTime" name="testTime" style="width: 128px;"
                                class="Wdate" onfocus="WdatePicker({dateFmt:'yyyy-MM'})"
                                readonly="true" style="width: 125">
                        </td>
                    </tr>
                    <tr>
                        <td align="right">
                        </td>
                        <td colspan=2 align="right">
                            <a href="javascript:void(0)" id="mxbutton"
                                class="easyui-linkbutton" iconCls="icon-search" onclick="get()">查询</a>
                            <a href="javascript:void(0)" id="reastbutton"
                                class="easyui-linkbutton" iconCls="icon-reload"
                                onclick="rest();">重置</a>
                        </td>
                    </tr>
                </table>
            </form>
        </div>
        <div id="line" style="width: 1000px; height: 500px; margin: 0 auto"></div>

js代码：

function get() {
        //折线图
                lineChart = echarts.init(document.getElementById("line"));
                var lineChartOtion = getLineChartOption();
                lineChart.setOption(lineChartOtion);
    }
    //获得Line图的选项和数据
    function getLineChartOption() {
        var lineChartOption = {
            title : {
                text : "吸光度/抑制率", //<a href="http://www.suchso.com/catalog.asp?tags=html5%E6%8A%A5%E8%A1%A8%E6%8F%92%E4%BB%B6" class="keylink" title=" 报表" target="_blank">报表</a>标题
                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 += '<br/>' + 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;
    }