现在位置首页 / 前端开发 /正文

echarts柱状图实现demo

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

效果图 :

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 : "吸光度/抑制率", //报表标题
                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;
    }


点击阅读本文所属分类的更多文章: 前端开发 。和高手一起交流:346717337
友荐云推荐

未注明转发、原文均为本站原创。分享本文请注明 原文链接

给您更多信息和帮助

在这里您可以找到更多:

技术交流群:346717337 Jquery插件交流

投稿:suchso@vip.qq.com

承接:企业网站门户/微网站/微商城/CMS系统/微信公众号运营/业务咨询

抢天猫双11红包
推荐使用阿里云服务器
echarts教程系列
本月最热文章

微信扫一扫,徜徉悠嘻网,您的休闲乐园

微信公众号:快乐每一天

随机文章
标签

技术交流群:346717337

投稿:suchso@vip.qq.com

专业专注:企业网站门户/微网站/微商城/CMS系统/微信公众号运营/付费问题咨询