echarts柱状图又一个简单例子

echarts柱状图效果

代码

 

 代码如下 复制代码
function get() {
        //折线图
                lineChart = echarts.init(document.getElementById("line"));
                var lineChartOtion = getLineChartOption();
                lineChart.setOption(lineChartOtion);
    }
    //获得Line图的选项和数据
    function getLineChartOption() {
        var lineChartOption = {
            title : {
                text : "吸光度/抑制率", //<a href=www.111cn.net 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;
    }
时间： 2024-08-01 05:46:56

echarts柱状图又一个简单例子的相关文章

web.config文件自定义配置节的使用方法的一个简单例子

web web.config文件自定义配置节的使用方法的一个简单例子用来演示的程序名为MyApp,Namespace也是MyApp 1.编辑web.config文件 添加以下内容,声明一个Section <configSections>    <section name="AppConfig" type="MyApp.AppConfig, MyApp" /> </configSections>   声明了一个叫AppConfig的

filenamefilter-关于FilenameFilter的一个简单例子，但总是有空指针异常，哪位大侠帮忙看看吧

问题描述 关于FilenameFilter的一个简单例子,但总是有空指针异常,哪位大侠帮忙看看吧 public class Demo { public static void main(String[] args) { File dir=new File("D:\test"); JavaTest filter=new JavaTest("java"); File[] files=dir.listFiles(filter); for(File a:files){ Sy

一个简单例子教你揭开AJAX神秘面纱

ajax 本文通过一个简单的例子来说明如何在IE6中使用AJAX技术.在这例子中,客户端每隔十秒,从服务器端取回一个随机的字符串,在不重新刷新页情况下,自动更新部分页面内容.例子仅用到了两个jsp文件,client.jsp及server.jsp. AJAX,即"Asynchronous JavaScript And XML"的缩写,可翻译为异步JavaScript及XML技术.其核心是一个寄宿在浏览器中名为XMLHTTPRequest的类.通过此类,可以做到无需提交表单就可以实现与服务

Python操作json数据的一个简单例子_python

更多的信息,可以参考python内部的json文档: python>>> help(json) 或者官方文档: http://docs.python.org/library/json.html#module-json. 下面给出一个使用python解析json的简单例子: 复制代码 代码如下: #!/usr/bin/python import json #Function:Analyze json script #Json is a script can descript data st

npm install —— 从一个简单例子，看本地安装与全局安装的区别

npm的包安装分为本地安装(local).全局安装(global)两种,从敲的命令行来看,差别只是有没有-g而已,比如 npm install grunt # 本地安装 npm install -g grunt-cli # 全局安装 这两种安装方式有什么区别呢?从npm官方文档的说明来看,主要区别在于(后面通过具体的例子来说明):本地安装 1. 将安装包放在 ./node_modules 下(运行npm时所在的目录) 2. 可以通过 require() 来引入本地安装的包 全局安装 1. 将安装

Redux系列01：从一个简单例子了解action、store、reducer

其实,redux的核心概念就是store.action.reducer,从调用关系来看如下所示 store.dispatch(action) --> reducer(state, action) --> final state 可以先看下面的极简例子有个感性的认识,下面会对三者的关系进行简单介绍 // reducer方法, 传入的参数有两个 // state: 当前的state // action: 当前触发的行为, {type: 'xx'} // 返回值: 新的state var reduc

Java中使用正则表达式的一个简单例子及常用正则分享_java

import java.util.Scanner; public class regexTest { // 新建类 public static void main(String[] args){ // 主方法 Scanner sc = new Scanner(System.in); // new Scanner类对象 System.out.println("Please Enter Email:"); String email = sc.nextLine(); System.out.p

Excel中宏功能一个简单例子

1.假如如下图所示我们要在黑框处加一个按钮,功能是清除数据的功能了,具体如下图所示. 2.现在开始操作,我们点击菜单上的"视图"-"宏"-"录制宏" ,然后取个名为"清空数据".现天我们选中要清空的单元格,然后删除选中单元格的数据之后再点击"停止录制宏".   3.现在我们在菜单上点击"插入"-"文本框"到指定区域了,然后我们在"文本框"里面输入&

c#中子线程控制进度条的一个简单例子

这个问题来自社区提问,代码保留一份用来以后回答 using System; using System.ComponentModel; using System.Windows.Forms; namespace WindowsApplication4 ...{ /**//// <summary> /// gui 类 /// </summary> public partial class Form1 : Form ...{ public Form1() ...{ InitializeC