echarts柱状图实现demo

来源：互联网发布：淘宝详情页图片分辨率编辑：程序博客网时间：2024/06/04 23:22
echarts柱状图实现demo

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

效果图 ：
HTML代码：
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
<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代码：
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
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;
    }
0 0