【echarts】echarts开发流程详解

缺乏、安全感 2022-08-19 13:19 192阅读 0赞

首先是封装echarts option和echarts series的两个POJO类：

EchartsOptions.java

package com.hollycrm.hollyuniproxy.opration.svcmonitor.entities;
    import java.util.ArrayList;
    import java.util.List;
    import java.util.Map;
    
    /**
     *  echarts图表封装options数据的POJO类
     * @author lmb_
     *
     */
    public class EchartsOptions {
    
        public List<String> legend = new ArrayList<String>();//图例
        public List<String> category = new ArrayList<String>();//横坐标  
        public List<List<String>> categoryList = new ArrayList<List<String>>();//横坐标
        public List<String> timeline = new ArrayList<String>();//时间轴
        public List<EchartsSeries> seriesLeft = new ArrayList<EchartsSeries>();//左侧纵坐标  
        public List<EchartsSeries> seriesRight = new ArrayList<EchartsSeries>();//右侧纵坐标  
        public List<List<EchartsSeries>> series = new ArrayList<List<EchartsSeries>>();
        public List<Map<String, Object>> seriesPie = new ArrayList<Map<String,Object>>();
    
        public EchartsOptions(List<String> legend, List<String> category,
                List<List<EchartsSeries>> series) {
            super();
            this.legend = legend;
            this.category = category;
            this.series = series;
        }
        public EchartsOptions(List<String> legend, List<String> category,
                List<String> timeline, List<EchartsSeries> seriesLeft,
                List<EchartsSeries> seriesRight) {
            super();
            this.legend = legend;
            this.category = category;
            this.timeline = timeline;
            this.seriesLeft = seriesLeft;
            this.seriesRight = seriesRight;
        }
        public EchartsOptions(List<String> legend, List<String> category,
                List<String> timeline, List<List<EchartsSeries>> series) {
            super();
            this.legend = legend;
            this.category = category;
            this.timeline = timeline;
            this.series = series;
        }
        public EchartsOptions(List<String> legend, List<String> category,
                List<List<String>> categoryList, List<String> timeline,
                List<EchartsSeries> serieLeft, List<EchartsSeries> serieRight,
                List<List<EchartsSeries>> series) {
            this.legend = legend;
            this.category = category;
            this.categoryList = categoryList;
            this.timeline = timeline;
            this.seriesLeft = seriesLeft;
            this.seriesRight = serieRight;
            this.series = series;
        }
        public EchartsOptions(List<String> legend,
                List<Map<String, Object>> seriesPie) {
            super();
            this.legend = legend;
            this.seriesPie = seriesPie;
        }
    }

EchartsSeries.java：：

package com.hollycrm.hollyuniproxy.opration.svcmonitor.entities;
    import java.util.List;
    
    /**
     *  echarts图表封装series数据的POJO类
     * @author lmb_
     *
     */
    public class EchartsSeries {
        
    
        public String name;  
        public String type;  
        public List<Double> data;//不能用String,否则前台不能正常显示（特别是在做数学运算的时候）  
        public EchartsSeries(String name, String type, List<Double> data) {
            super();
            this.name = name;
            this.type = type;
            this.data = data;
        }
    }

流程：前台发送请求调用后台方法将需要的数据查回来之后，将数据按照定义的两个POJO类的形式进行数据封装，之后传给前台，在前台相应的地方加载相应的数据（通过名称legend、series、timeline等进行识别）.

以服务器监控应用总体情况的并发数折线图为例：

1、在realConcurrencyData.js中的URL中配置请求地址，请求成功之后将对应echarts折线图的图例、横坐标以及纵坐标分别加载到前台的图表中。

realConcurrencyData.js：

/**
     *  服务器运行总体情况
     * @param echarts
     * @param divId
     * @param ctx
     */
    HollyProxy.ServerWorkMonitor.prototype.realConcurrencyData= function(echarts,divId,ctx){     
    //  alert("HollyProxy.ServerWorkMonitor.prototype.realConcurrencyData  " + ctx);
        var myChart = echarts.init(document.getElementById(divId));  
        myChart.showLoading({  
        text : "图表数据正在努力加载..."  
        });  
    
        //定义图表options  
        var options = {
                tooltip : {
                    trigger: 'axis'
                },
                toolbox: {
                    show : false,
                    feature : {
                        dataView : {show: true, readOnly: false},
                        saveAsImage : {show: true}
                    }
                },
                calculable : true,
                dataZoom: {
                    show: true,
                    start : 60,
                    end : 100,
                    height : 20
                },
                legend: {
                    textStyle:{
                        color:'white'
                    },
                    data:['并发数','每分钟访问量']
                },
                xAxis : [
                    {
                        type : 'category',
                        axisLabel :{
                            show:true,
                            textStyle:{
                                color:'white'
                            }
                        },
                        splitLine:{
                            show:false
                        },
                        data : ['1月','2月','3月','4月','5月','6月','7月','8月','9月','10月','11月','12月']
                    }
                ],
                yAxis : [
                    {
                        type : 'value',
                        name : '并发数',
                        splitLine:{
                            show:false
                        },
                        axisLabel : {
                            show:true,
                            textStyle:{
                                color:'white'
                            },
    //                      formatter: '{value}'
                        }
                    },
                    {
                        type : 'value',
                        name : '每分钟访问量',
                        splitLine:{
                            show:false
                        },
                        axisLabel : {
                            show:true,
                            textStyle:{
                                color:'white'
                            },
    //                      formatter: '{value}'
                        }
                    }
                ],
                series : [
                    {
                        name:'并发数',
                        type:'line',
                        symbol:'none',
                        data:[2.6, 5.9, 9.0, 26.4, 28.7, 70.7, 175.6, 182.2, 48.7, 18.8, 6.0, 2.3],
                        markPoint : {
                            data : [
                                {
       type : 'max', name: '最大值'},
                                {
       type : 'min', name: '最小值'}
                            ]
                        }
                    },
                    {
                        name:'每分钟访问量',
                        type:'line',
                        symbol:'none',
                        yAxisIndex: 1,
                        data:[2.0, 2.2, 3.3, 4.5, 6.3, 10.2, 20.3, 23.4, 23.0, 16.5, 12.0, 6.2],
                        markPoint : {
                            data : [
                                {
       type : 'max', name: '最大值'},
                                {
       type : 'min', name: '最小值'}
                            ]
                        }
                    }
                ]
            };
    
          //设置延迟
        setTimeout( function getChartData() {  
            //获得图表的options对象  
            //通过Ajax获取数据  
            $.ajax({
                url:ctx+ "/rest/qryRealConcurrencyData",
                type:'POST',
                dataType:'json',
                 success : function(result) {  
                        if (result) {  
                            //请求成功将数据设置到相应的位置上
    //                        options.options[0].legend.data = result[0].legend;  
                             options.legend.data = ["并发数","每分钟访问量"];  
                             console.info("options.legend.data" +   options.legend.data);
                             options.xAxis[0].data = result.category;  
    //                        options.xAxis[0].data = ["0:01","0:02","0:03","0:04","0:05","0:06","0:07","0:08","0:09","0:10","0:11","0:12","0:13","0:14","0:15","0:16","0:17","0:18","0:19","0:20","0:21","0:22","0:23","0:24","0:25","0:26","0:27","0:28","0:29","0:30","0:31","0:32","0:33","0:34","0:35","0:36","0:37","0:38","0:39","0:40","0:41","0:42","0:43","0:44","0:45","0:46","0:47","0:48","0:49","0:50","0:51","0:52","0:53","0:54","0:55","0:56","0:57","0:58","0:59","1:00"];
                             console.info("options.options[0].xAxis[0].data" +  options.xAxis[0].data);
                             options.series[0].data = result.series[0][0].data;//并发量
                            options.series[1].data = result.series[1][0].data;//每秒访问量
    //                          options.series[0].data= ["9800","4000","9000","6000","5000","6000","7000","6000","5000","4000","9800","7000","7900","6000","4000","5000","6000","8000","5000","6000","6000","5000","6000","7000","9800","4000","9000","6000","5000","6000","7000","6000","5000","4000","9800","7000","7900","6000","4000","5000","9800","4000","9000","6000","5000","6000","7000","6000","5000","4000","9800","7000","7900","6000","4000","5000","6000","8000","5000","6000"];
    //                        options.series[1].data = ["8000","1000","9000","1000","1000","1000","7000","1000","1000","1000","9800","1000","7900","1000","1000","1000","1000","8000","1000","1000","1000","1000","1000","1000","8000","1000","9000","1000","1000","1000","7000","1000","1000","1000","9800","1000","7900","1000","1000","1000","9800","4000","9000","6000","5000","6000","7000","6000","5000","4000","9800","7000","7900","6000","4000","5000","6000","8000","5000","6000"];
                            console.info("options.options[0].series[0].data" +  options.series[0].data);
                            console.info("options.options[0].series[1].data" + options.series[1].data);
                            myChart.hideLoading();  
                            console.log("成功率options" + JSON.stringify(options));
                            myChart.setOption(options);  
                        }  
                    },  
                    error : function(xmlHttpRequest,errorMsg,exceptionObject) {  
    //                    alert('xmlHttpRequest>>>>>' + xmlHttpRequest);
                        myChart.hideLoading();  
                    }  
            });
        } ,100);
    };

2、InterfaceAccessEchartsController.java中的qryRealConcurrencyData方法即为上面JS请求的后台方法，在该方法中调用业务逻辑层UniformDetailDao.java中的方法查询实时并发数据。

InterfaceAccessEchartsController.java：

/**
         *  并发数 + 每秒访问量 （服务器监控应用总体情况）
         * @param json
         * @param req
         * @return
         * @throws ParseException 
         */
        @   RequestMapping(value= "/qryRealConcurrencyData",produces="text/plain;charset=UTF-8")
        public @ResponseBody String qryRealConcurrencyData(String json,HttpServletRequest req) throws ParseException {
            EchartsOptions  superveneData = UniformDetailDao.qryRealConcurrencyDetail(adminService);
            return JSON.toJSONString(superveneData);
        }

3、业务逻辑层UniformDetailDao.java中的方法查询实时并发数据，之后调用EchartsDataUtil.java对查回的数据进行封装。

UniformDetailDao.java：

/**
     * 统一接口明细查询业务逻辑类
     * @author lmb_
     *
     */
    public class UniformDetailDao {
        
    
        private static final Log logger = LogFactory.getLog(InterfaceAccessController.class);
        /**
         *  查询并发数 + 每秒访问量 （服务器监控应用总体情况）明细
         * @param adminService
         * @return
         * @throws ParseException
         */
        @SuppressWarnings({ "unchecked", "rawtypes" })
        public static EchartsOptions qryRealConcurrencyDetail(AdminService adminService) throws ParseException {
            SimpleDateFormat sdf = new SimpleDateFormat("yyyy-MM-dd HH:mm:ss");
            Calendar calendar = Calendar.getInstance();//HOUR_OF_DAY 指示一天中的小时
            calendar.set(Calendar.HOUR_OF_DAY, calendar.get(Calendar.HOUR_OF_DAY) - 1);
            String startDate = sdf.format(calendar.getTime());
            calendar.set(Calendar.HOUR_OF_DAY, calendar.get(Calendar.HOUR_OF_DAY) - 1);
            List<Map<String, Object>> superveneDatas = new ArrayList<Map<String, Object>>();
            List args = new ArrayList<>();
            String sql="select to_char(modify_time,'yyyy-MM-dd HH24:mi') modify_time,sum(supervene_count) supervene_count,sum(total_count) total_count from TBL_MONITOR_HEARTBEAT_HIS " +
                    "where modify_time >= to_date(?,'yyyy-MM-dd HH24:mi:ss') and modify_time <= to_date(?,'yyyy-MM-dd HH24:mi:ss') group by to_char(modify_time,'yyyy-MM-dd HH24:mi')";
            args.add(sdf.format(calendar.getTime())); 
            args.add(sdf.format(new Date()));
            //转换为可执行的SQL
            String executeSQL=DaoUtil.converseQesmarkSQL(sql, args);
            logger.debug("查询应用总体情况并发量及每分钟访问量的可执行sql>>>>>>>" + executeSQL);
            superveneDatas=adminService.findBySql(sql, args.toArray());
            logger.debug("执行sql语句查回的list集合 superveneDatas>>" + superveneDatas);
            EchartsOptions  superveneData = EchartsDataUtil.getEchartsSuperveneData(superveneDatas,startDate,sdf.format(new Date()));
            return superveneData;
        } 
    }

4、在EchartsDataUtil.java中对数据按照EchartsOptions.java和EchartsSeries.java定义的echarts格式进行封装。

EchartsDataUtil.java：

package com.hollycrm.hollyuniproxy.opration.util;
    
    import java.math.BigDecimal;
    import java.text.ParseException;
    import java.text.SimpleDateFormat;
    import java.util.ArrayList;
    import java.util.Arrays;
    import java.util.Calendar;
    import java.util.Date;
    import java.util.HashMap;
    import java.util.List;
    import java.util.Locale;
    import java.util.Map;
    
    import org.apache.commons.lang.StringUtils;
    
    import com.hollycrm.hollyuniproxy.opration.svcmonitor.entities.EchartsOptions;
    import com.hollycrm.hollyuniproxy.opration.svcmonitor.entities.EchartsSeries;
    import com.hollycrm.hollyuniproxy.util.ApDateTime;
    import com.itextpdf.text.pdf.PdfStructTreeController.returnType;
    import com.jcraft.jsch.Logger;
    
    /**
     * 组装echarts图表的工具类
     * 
     * @author lmb_
     * 
     */
    public class EchartsDataUtil {
        
    
        /**
         *  获取应用的并发数及每秒访问量
         * @param superveneDatas
         * @param startDate
         * @param endDate
         * @return
         * @throws ParseException 
         */
        public static EchartsOptions getEchartsSuperveneData(List<Map<String, Object>> list, String startDate,String endDate) throws ParseException {
            System.out.println(">>>into EchartsUtil.getEchartsSuperveneData()>>>>");
            List<EchartsOptions> echartsDataList = new ArrayList<EchartsOptions>();
            EchartsOptions superveneData = querySuperveneData(list, startDate, endDate);// 成功率图表
            echartsDataList.add(superveneData);
            System.out.println("getEchartsSuperveneData>>echartsDataList>" + echartsDataList);
            return superveneData;
        }
    /**
         *  封装应用的并发数和每秒访问量
         * @param list
         * @param startDate
         * @param endDate
         * @return
         * @throws ParseException
         */
        private static EchartsOptions querySuperveneData(List<Map<String, Object>> list, String startDate, String endDate) throws ParseException {
    
            List<String> legend = new ArrayList<String>();// 图例
            List<String> category = new ArrayList<String>();// 横坐标
            List<String> categoryForSeries = new ArrayList<String>();yyyy-MM-dd HH:mm
            List<String> categoryForSeriesLastMin = new ArrayList<String>();yyyy-MM-dd HH:mm
            List<List<EchartsSeries>> series = new ArrayList<List<EchartsSeries>>();// 纵坐标
    
            category = installCategory(startDate, endDate);//HH:mm
            categoryForSeries = installCategoryForSeries(startDate, endDate);
            categoryForSeriesLastMin = installCategoryForSeriesLastMin(startDate, endDate);
            series = installSeries(startDate, endDate, list,categoryForSeriesLastMin,categoryForSeries);
            EchartsOptions superveneData = new EchartsOptions(legend, category, series);
            System.out.println("querySuperveneData>>superveneData    " + superveneData);
            return superveneData;
        }
    /**
         *  封装并发数和每秒访问量的横坐标（HH:mm）
         * @param startDate
         * @param endDate
         * @return
         * @throws ParseException
         */
        private static List<String> installCategory(String startDate, String endDate) throws ParseException {
    //      一个小时前的时间：  2015-12-16 15:34:33
    //      当前的时间：  2015-12-16 16:34:33
            List<String> category = new ArrayList<String>();
            String[] categoryStr = new String[60];// 横坐标显示数据
            SimpleDateFormat sdf = new SimpleDateFormat("yyyy-MM-dd HH:mm");
            for (int i = 0; i < categoryStr.length; i++) {
                Calendar calendar = Calendar.getInstance();  
                calendar.setTime(sdf.parse(startDate));
    
                categoryStr[i] = calendar.get(Calendar.HOUR_OF_DAY) + ":" + calendar.get(Calendar.MINUTE); //HH:mm
                //将startDate的时间设置为下一分钟
                calendar.add(Calendar.MINUTE, 1);
                startDate = calendar.get(Calendar.YEAR) + "-" + (calendar.get(Calendar.MONTH) + 1) + "" + "-" 
                        + calendar.get(Calendar.DAY_OF_MONTH) + " " + calendar.get(Calendar.HOUR_OF_DAY) + ":" 
                        + calendar.get(Calendar.MINUTE);//yyyy-MM-dd HH:mm:ss
            }
            category.addAll(Arrays.asList(categoryStr));
            return category;
        }
    /**
         *  封装并发数和每秒访问量的横坐标（yyyy-MM-dd HH:mm:ss）
         * @param startDate
         * @param endDate
         * @return
         * @throws ParseException
         */
        private static List<String> installCategoryForSeries(String startDate,String endDate) throws ParseException {
            List<String> categoryForSeries = new ArrayList<String>();
            String[] categoryForSeriesStr = new String[60];
            SimpleDateFormat sdf = new SimpleDateFormat("yyyy-MM-dd HH:mm");
            for (int i = 0; i < categoryForSeriesStr.length; i++) {
                Calendar calendar = Calendar.getInstance();  
                calendar.setTime(sdf.parse(startDate));
                categoryForSeriesStr[i]= sdf.format(ApDateTime.getDate(calendar.get(Calendar.YEAR) + "-" + (calendar.get(Calendar.MONTH) + 1) + "" + "-" 
                        + calendar.get(Calendar.DAY_OF_MONTH) + " " + calendar.get(Calendar.HOUR_OF_DAY) + ":" 
                        + calendar.get(Calendar.MINUTE),"yyyy-MM-dd HH:mm"));//yyyy-MM-dd HH:mm
                //将startDate的时间设置为下一分钟
                calendar.add(Calendar.MINUTE, 1);
                startDate = sdf.format(ApDateTime.getDate( calendar.get(Calendar.YEAR) + "-" + (calendar.get(Calendar.MONTH) + 1) + "" + "-" 
                        + calendar.get(Calendar.DAY_OF_MONTH) + " " + calendar.get(Calendar.HOUR_OF_DAY) + ":" 
                        + calendar.get(Calendar.MINUTE),"yyyy-MM-dd HH:mm"));//yyyy-MM-dd HH:mm:ss
            }
            categoryForSeries.addAll(Arrays.asList(categoryForSeriesStr));
            System.out.println(" installCategoryForSeries   categoryForSeries    " + categoryForSeries);
            return categoryForSeries;
        }
    /**
         *  封装并发数和每秒访问量的横坐标（yyyy-MM-dd HH:mm:ss）
         * @param startDate
         * @param endDate
         * @return
         * @throws ParseException
         */
            private static List<String> installCategoryForSeriesLastMin(String startDate,String endDate) throws ParseException {
                List<String> categoryForSeries = new ArrayList<String>();
                String[] categoryForSeriesStr = new String[60];
                SimpleDateFormat sdf = new SimpleDateFormat("yyyy-MM-dd HH:mm");
                Calendar calendar = Calendar.getInstance();  
                calendar.setTime(sdf.parse(startDate));
                calendar.add(Calendar.MINUTE, -1);//将startDate的时间设置为上一分钟
                for (int i = 0; i < categoryForSeriesStr.length; i++) {
                    categoryForSeriesStr[i]= sdf.format(ApDateTime.getDate(calendar.get(Calendar.YEAR) + "-" + (calendar.get(Calendar.MONTH) + 1) + "" + "-" 
                            + calendar.get(Calendar.DAY_OF_MONTH) + " " + calendar.get(Calendar.HOUR_OF_DAY) + ":" 
                            + calendar.get(Calendar.MINUTE),"yyyy-MM-dd HH:mm"));//yyyy-MM-dd HH:mm
                    //将startDate的时间设置为下一分钟
                    calendar.add(Calendar.MINUTE, 1);
                    startDate = sdf.format(ApDateTime.getDate( calendar.get(Calendar.YEAR) + "-" + (calendar.get(Calendar.MONTH) + 1) + "" + "-" 
                            + calendar.get(Calendar.DAY_OF_MONTH) + " " + calendar.get(Calendar.HOUR_OF_DAY) + ":" 
                            + calendar.get(Calendar.MINUTE),"yyyy-MM-dd HH:mm"));//yyyy-MM-dd HH:mm:ss
                }
                categoryForSeries.addAll(Arrays.asList(categoryForSeriesStr));
                System.out.println("   installCategoryForSeriesLastMin  categoryForSeries    " + categoryForSeries);
                return categoryForSeries;
            }
        /**
         *  封装并发数和每秒访问量的纵坐标
         * @param startDate
         * @param endDate
         * @param list
         * @param categoryForSeriesLastMin
         * @param categoryForSeries
         * @return
         * @throws ParseException
         */
        private static List<List<EchartsSeries>> installSeries(String startDate,String endDate, List<Map<String, Object>> list,List<String> categoryForSeriesLastMin, List<String> categoryForSeries) throws ParseException {
    
            Object[] categoryForSeriesStr = categoryForSeries.toArray();
            Object[] categoryForSeriesLastMinStr = categoryForSeriesLastMin.toArray();
            List<EchartsSeries> seriesLeft = new ArrayList<EchartsSeries>();// 纵坐标
            List<EchartsSeries> seriesRight = new ArrayList<EchartsSeries>();// 纵坐标
            List<List<EchartsSeries>> series = null;
            Double[] seriesLeftStr = new Double[categoryForSeriesStr.length];// 左边纵坐标显示数据
            Double[] seriesRightStr = new Double[categoryForSeriesStr.length];// 右边纵坐标显示数据
            Double[] seriesRightStrLastMin = new Double[categoryForSeriesStr.length];
            SimpleDateFormat sdf = new SimpleDateFormat("yyyy-MM-dd HH:mm");
    
            // 并发量和每秒访问量
            for (int i = 0; i < categoryForSeriesStr.length; i++) {
    //          System.out.println(" list  " + list);
                for (Map<String, Object> superveneData : list) {
                    //获取与横坐标刻度对应的小时数据
                    if (categoryForSeriesStr[i].toString().substring(0, 16).equals(sdf.format(sdf.parse(superveneData.get("modify_time").toString())).substring(0, 16))) {
                        //并发量
                        seriesLeftStr[i] = Double.parseDouble(StringUtils.isNotEmpty(superveneData.get("supervene_count").toString()) ? superveneData.get("supervene_count").toString() : "5");
                        //当前横坐标刻度对应的总访问量
                        seriesRightStr[i] = Double.parseDouble(StringUtils.isNotEmpty(superveneData.get("total_count").toString()) ? superveneData.get("total_count").toString() : "30000");
                        break;
                    }
                }
            }
    
            for (int i = 0; i < categoryForSeriesLastMinStr.length; i++) {
                //获取当前横坐标刻度上一分钟的总访问量
                for (Map<String, Object> superveneData : list) {
                    Calendar calendar = Calendar.getInstance();  
                    calendar.setTime(sdf.parse(categoryForSeriesLastMinStr[i].toString()));
                    calendar.add(Calendar.MINUTE, -1);//将categoryStr[i]的时间设置为上一分钟
    //              System.out.println("categoryForSeriesLastMinStr[i].toString()  " + categoryForSeriesLastMinStr[i].toString() + "   superveneData  " + sdf.format(sdf.parse(superveneData.get("modify_time").toString())));
                    if (categoryForSeriesLastMinStr[i].toString().substring(0, 16).equals(sdf.format(sdf.parse(superveneData.get("modify_time").toString())).subSequence(0, 16))) {
                        //当前横坐标刻度对应的上一分钟的总访问量
                        seriesRightStrLastMin[i] = Double.parseDouble(StringUtils.isNotEmpty(superveneData.get("total_count").toString()) ? superveneData.get("total_count").toString() : "30000");
                        break;
                    }
                }
                //当前横坐标刻度对应的该分钟的访问量
                    seriesRightStr[i] = seriesRightStr[i] - seriesRightStrLastMin[i];
            }
            seriesLeft.add(new EchartsSeries("", "", new ArrayList<Double>(Arrays.asList(seriesLeftStr))));
            seriesRight.add(new EchartsSeries("", "",new ArrayList<Double>(Arrays.asList(seriesRightStr))));
            series = new ArrayList<List<EchartsSeries>>();
            series.add(seriesLeft);
            series.add(seriesRight);
            return series;
        }
    }

扩展：

带时间轴（timeline）的折线图  
（注：以下实现timeline的间隔范围最大为10，是由options数组内的数据的个数来决定的。）

HollyProxy.HomePage.prototype.homePageSvcSuccessData = function(echarts,divId,qryParam,ctx){   
    //      alert("into homePageSvcSuccessData>>>divId>>" + divId);
            var myChart = echarts.init(document.getElementById(divId));  
            myChart.showLoading({  
            text : "图表数据正在努力加载..."  
            });  
            var linecolor = "#BA610C";
    
            //定义图表options  
            var options =  {
                    timeline: {
                        label:{
                            textStyle:{
                                color:'white'
                            }
                        },
                        data:[],
                        height: 80,
                        x: 50,
                        padding: [
                        30,
                        10,
                        10,
                        10
                        ],
                        label : {
                            formatter : function(s) {
                                return s;
                            }
                        },
                        autoPlay: false,
                        playInterval: 2000
                   },
                   options:[
                    {
                        calculable:true,
                         title : {  
                             x:'left'
                        }, 
                         dataZoom : {
                            show : true,
                            realtime : true,
                            start : 30,//从30%开始展现
                            end : 60,//在60%的数据处截止
                            height:15
                        },
                        tooltip : {
                            show:true
                        },
                        legend: {
                            data:['接口访问总量','接口成功率']//,'北京','山东'
                        },
                        toolbox: {
                          x: 'right', 
                            y: 'center',
                            orient : 'vertical',
                            show : true,
                            feature : {
                                mark : {show: true},
                                dataView : {show: true},
                                magicType : {show: true, type: ['line','bar',  'stack']},
                                restore : {show: true},
                                saveAsImage : {show: true}
                            }
                        },
                        xAxis : [
                            {
                                type : 'category',
                                position: 'bottom',
                                boundaryGap: true,
                                axisLine : {    // x轴线轴线的设置
                                    show: false,
                                    lineStyle: {
                                        color: 'green',
                                        type: 'solid',
                                        width: 2
                                    }
                                },
                                axisTick : {    // X轴坐标点标记
                                    show:true,
                                    length: 5,
                                    lineStyle: {
                                        color: 'red',
                                        type: 'solid',
                                        width: 1
                                    }
                                },
                                axisLabel : {
       //X轴数据风格
                                    show:true,
                                    interval: 'auto',    // {number}
                                    rotate: 0,
                                    margin:-20,
                                    splitNumber: 23,
                                    textStyle:{
                                        color:'white'
                                    },
                                    formatter: '{value}'
                                },
                                splitLine : {
                                    show:false,
                                    lineStyle: {
                                        color: '#483d8b',
                                        type: 'dashed',
                                        width: 1
                                    }
                                },
                                data:[]
                                /*
                                 data :  [
                                    1,2,3,4,5,6,7,8,9,10,11,12,13,14,15,16,17,18,19,20,21,22,23,24]
                                */
                            }
                        ],
                        yAxis : [
                            {
                                type : 'value',
                                'name':'接口访问总量',
                                position: 'left',
                                 splitNumber: 10,
                                boundaryGap: [0,0.1],
                                axisLine : {    // 左边y轴线
                                    show: true
                                },
                                axisTick : {    //左边y轴坐标标记
                                    show:true,
                                    length: 10,
                                    lineStyle: {
                                        color: 'green',
                                        type: 'solid',
                                        width: 2
                                    }
                                },
                                axisLabel : {
                                    show:true,
                                    interval: 10,//'auto',    // {number}
                                    rotate: 0,//左边Y轴左边数据的选择角度
                                    margin: 18,
                                    textStyle:{
                                        color:'white'
                                    },
                                    formatter: '{value}'    // Template formatter!
                                },
                                splitLine : {
                                    show:false,
                                    lineStyle: {
                                        color: '#483d8b',
                                        type: 'dashed',
                                        width: 1
                                    }
                                }
                            },
                            {
                                type : 'value',
                                'name':'接口成功率',
                                splitNumber: 10,
                                axisLabel : {
                                    textStyle:{
                                        color:'white'
                                    },
                                    formatter: function (value) {
                                        // Function formatter
                                        return value;
                                    }
                                },
                                splitLine : {
                                    show: false
                                }
                            }
                        ],
                        series : [
                            {
                                name: '接口访问总量',
                                type: 'line',
                                data:[],
                                 markPoint : {
                                        data : [
                                            {
       type : 'max', name: '最大值'},
                                            {
       type : 'min', name: '最小值'}
                                        ]}
                              },
                            {
                                name: '接口成功率',
                                type: 'line',
                                yAxisIndex: 1,
                                data:[],
                                 markPoint : {
                                    data : [
                                        {
       type : 'max', name: '最大值'},
                                        {
       type : 'min', name: '最小值'}
                                        ]
                                        }
                                    }
                              ]
                    },
                    {
                        calculable:true,
                         title : {  
                             x:'left'
                        }, 
                         dataZoom : {
                            show : true,
                            realtime : true,
                            start : 30,//从30%开始展现
                            end : 60,//在60%的数据处截止
                            height:15
                        },
                        tooltip : {
                            trigger: 'axis',
                            formatter: ""
                        },
                        legend: {
                            data:['接口访问总量','接口成功率']//,'北京','山东'
                        },
                        toolbox: {
                          x: 'right', 
                            y: 'center',
                            orient : 'vertical',
                            show : true,
                            feature : {
                                mark : {show: true},
                                dataView : {show: true},
                                magicType : {show: true, type: ['line','bar',  'stack']},
                                restore : {show: true},
                                saveAsImage : {show: true}
                            }
                        },
                        xAxis : [
                            {
                                type : 'category',
                                position: 'bottom',
                                boundaryGap: true,
                                axisLine : {    // x轴线轴线的设置
                                    show: false,
                                    lineStyle: {
                                        color: 'green',
                                        type: 'solid',
                                        width: 2
                                    }
                                },
                                axisTick : {    // X轴坐标点标记
                                    show:true,
                                    length: 5,
                                    lineStyle: {
                                        color: 'red',
                                        type: 'solid',
                                        width: 1
                                    }
                                },
                                axisLabel : {
       //X轴数据风格
                                    show:true,
                                    interval: 'auto',    // {number}
                                    rotate: 0,
                                    margin:-20,
                                    splitNumber: 23,
                                    textStyle:{
                                        color:'white'
                                    },
                                    formatter: '{value}'
                                },
                                splitLine : {
                                    show:false,
                                    lineStyle: {
                                        color: '#483d8b',
                                        type: 'dashed',
                                        width: 1
                                    }
                                },
                                data:[]
                                /*
                                 data :  [
                                    1,2,3,4,5,6,7,8,9,10,11,12,13,14,15,16,17,18,19,20,21,22,23,24]
                                */
                            }
                        ],
                        yAxis : [
                            {
                                type : 'value',
                                'name':'接口访问总量',
                                position: 'left',
                                 splitNumber: 10,
                                boundaryGap: [0,0.1],
                                axisLine : {    // 左边y轴线
                                    show: true
                                },
                                axisTick : {    //左边y轴坐标标记
                                    show:true,
                                    length: 10,
                                    lineStyle: {
                                        color: 'green',
                                        type: 'solid',
                                        width: 2
                                    }
                                },
                                axisLabel : {
                                    show:true,
                                    interval: 10,//'auto',    // {number}
                                    rotate: 0,//左边Y轴左边数据的选择角度
                                    margin: 18,
                                    textStyle:{
                                        color:'white'
                                    },
                                    formatter: '{value}'    // Template formatter!
                                },
                                splitLine : {
                                    show:false,
                                    lineStyle: {
                                        color: '#483d8b',
                                        type: 'dashed',
                                        width: 1
                                    }
                                }
                            },
                            {
                                type : 'value',
                                'name':'接口成功率',
                                splitNumber: 10,
                                axisLabel : {
                                    textStyle:{
                                        color:'white'
                                    },
                                    formatter: function (value) {
                                        // Function formatter
                                        return value;
                                    }
                                },
                                splitLine : {
                                    show: false
                                }
                            }
                        ],
                        series : [
                            {
                                name: '接口访问总量',
                                type: 'line',
                                data:[],
                                 markPoint : {
                                        data : [
                                            {
       type : 'max', name: '最大值'},
                                            {
       type : 'min', name: '最小值'}
                                        ]}
                              },
                            {
                                name: '接口成功率',
                                type: 'line',
                                yAxisIndex: 1,
                                data:[],
                                 markPoint : {
                                    data : [
                                        {
       type : 'max', name: '最大值'},
                                        {
       type : 'min', name: '最小值'}
                                        ]
                                        }
                                    }
                              ]
                    },
                    {
                        calculable:true,
                         title : {  
                             x:'left'
                        }, 
                         dataZoom : {
                            show : true,
                            realtime : true,
                            start : 30,//从30%开始展现
                            end : 60,//在60%的数据处截止
                            height:15
                        },
                        tooltip : {
                            trigger: 'axis',
                            formatter: ""
                        },
                        legend: {
                            data:['接口访问总量','接口成功率']//,'北京','山东'
                        },
                        toolbox: {
                          x: 'right', 
                            y: 'center',
                            orient : 'vertical',
                            show : true,
                            feature : {
                                mark : {show: true},
                                dataView : {show: true},
                                magicType : {show: true, type: ['line','bar',  'stack']},
                                restore : {show: true},
                                saveAsImage : {show: true}
                            }
                        },
                        xAxis : [
                            {
                                type : 'category',
                                position: 'bottom',
                                boundaryGap: true,
                                axisLine : {    // x轴线轴线的设置
                                    show: false,
                                    lineStyle: {
                                        color: 'green',
                                        type: 'solid',
                                        width: 2
                                    }
                                },
                                axisTick : {    // X轴坐标点标记
                                    show:true,
                                    length: 5,
                                    lineStyle: {
                                        color: 'red',
                                        type: 'solid',
                                        width: 1
                                    }
                                },
                                axisLabel : {
       //X轴数据风格
                                    show:true,
                                    interval: 'auto',    // {number}
                                    rotate: 0,
                                    margin:-20,
                                    splitNumber: 23,
                                    textStyle:{
                                        color:'white'
                                    },
                                    formatter: '{value}'
                                },
                                splitLine : {
                                    show:false,
                                    lineStyle: {
                                        color: '#483d8b',
                                        type: 'dashed',
                                        width: 1
                                    }
                                },
                                data:[]
                                /*
                                 data :  [
                                    1,2,3,4,5,6,7,8,9,10,11,12,13,14,15,16,17,18,19,20,21,22,23,24]
                                */
                            }
                        ],
                        yAxis : [
                            {
                                type : 'value',
                                'name':'接口访问总量',
                                position: 'left',
                                 splitNumber: 10,
                                boundaryGap: [0,0.1],
                                axisLine : {    // 左边y轴线
                                    show: true
                                },
                                axisTick : {    //左边y轴坐标标记
                                    show:true,
                                    length: 10,
                                    lineStyle: {
                                        color: 'green',
                                        type: 'solid',
                                        width: 2
                                    }
                                },
                                axisLabel : {
                                    show:true,
                                    interval: 10,//'auto',    // {number}
                                    rotate: 0,//左边Y轴左边数据的选择角度
                                    margin: 18,
                                    textStyle:{
                                        color:'white'
                                    },
                                    formatter: '{value}'    // Template formatter!
                                },
                                splitLine : {
                                    show:false,
                                    lineStyle: {
                                        color: '#483d8b',
                                        type: 'dashed',
                                        width: 1
                                    }
                                }
                            },
                            {
                                type : 'value',
                                'name':'接口成功率',
                                splitNumber: 10,
                                axisLabel : {
                                    textStyle:{
                                        color:'white'
                                    },
                                    formatter: function (value) {
                                        // Function formatter
                                        return value;
                                    }
                                },
                                splitLine : {
                                    show: false
                                }
                            }
                        ],
                        series : [
                            {
                                name: '接口访问总量',
                                type: 'line',
                                data:[],
                                 markPoint : {
                                        data : [
                                            {
       type : 'max', name: '最大值'},
                                            {
       type : 'min', name: '最小值'}
                                        ]}
                              },
                            {
                                name: '接口成功率',
                                type: 'line',
                                yAxisIndex: 1,
                                data:[],
                                 markPoint : {
                                    data : [
                                        {
       type : 'max', name: '最大值'},
                                        {
       type : 'min', name: '最小值'}
                                        ]
                                        }
                                    }
                              ]
                    },
                    {
                        calculable:true,
                         title : {  
                             x:'left'
                        }, 
                         dataZoom : {
                            show : true,
                            realtime : true,
                            start : 30,//从30%开始展现
                            end : 60,//在60%的数据处截止
                            height:15
                        },
                        tooltip : {
                            trigger: 'axis',
                            formatter: ""
                        },
                        legend: {
                            data:['接口访问总量','接口成功率']//,'北京','山东'
                        },
                        toolbox: {
                          x: 'right', 
                            y: 'center',
                            orient : 'vertical',
                            show : true,
                            feature : {
                                mark : {show: true},
                                dataView : {show: true},
                                magicType : {show: true, type: ['line','bar',  'stack']},
                                restore : {show: true},
                                saveAsImage : {show: true}
                            }
                        },
                        xAxis : [
                            {
                                type : 'category',
                                position: 'bottom',
                                boundaryGap: true,
                                axisLine : {    // x轴线轴线的设置
                                    show: false,
                                    lineStyle: {
                                        color: 'green',
                                        type: 'solid',
                                        width: 2
                                    }
                                },
                                axisTick : {    // X轴坐标点标记
                                    show:true,
                                    length: 5,
                                    lineStyle: {
                                        color: 'red',
                                        type: 'solid',
                                        width: 1
                                    }
                                },
                                axisLabel : {
       //X轴数据风格
                                    show:true,
                                    interval: 'auto',    // {number}
                                    rotate: 0,
                                    margin:-20,
                                    splitNumber: 23,
                                    textStyle:{
                                        color:'white'
                                    },
                                    formatter: '{value}'
                                },
                                splitLine : {
                                    show:false,
                                    lineStyle: {
                                        color: '#483d8b',
                                        type: 'dashed',
                                        width: 1
                                    }
                                },
                                data:[]
                                /*
                                 data :  [
                                    1,2,3,4,5,6,7,8,9,10,11,12,13,14,15,16,17,18,19,20,21,22,23,24]
                                */
                            }
                        ],
                        yAxis : [
                            {
                                type : 'value',
                                'name':'接口访问总量',
                                position: 'left',
                                 splitNumber: 10,
                                boundaryGap: [0,0.1],
                                axisLine : {    // 左边y轴线
                                    show: true
                                },
                                axisTick : {    //左边y轴坐标标记
                                    show:true,
                                    length: 10,
                                    lineStyle: {
                                        color: 'green',
                                        type: 'solid',
                                        width: 2
                                    }
                                },
                                axisLabel : {
                                    show:true,
                                    interval: 10,//'auto',    // {number}
                                    rotate: 0,//左边Y轴左边数据的选择角度
                                    margin: 18,
                                    textStyle:{
                                        color:'white'
                                    },
                                    formatter: '{value}'    // Template formatter!
                                },
                                splitLine : {
                                    show:false,
                                    lineStyle: {
                                        color: '#483d8b',
                                        type: 'dashed',
                                        width: 1
                                    }
                                }
                            },
                            {
                                type : 'value',
                                'name':'接口成功率',
                                splitNumber: 10,
                                axisLabel : {
                                    textStyle:{
                                        color:'white'
                                    },
                                    formatter: function (value) {
                                        // Function formatter
                                        return value;
                                    }
                                },
                                splitLine : {
                                    show: false
                                }
                            }
                        ],
                        series : [
                            {
                                name: '接口访问总量',
                                type: 'line',
                                data:[],
                                 markPoint : {
                                        data : [
                                            {
       type : 'max', name: '最大值'},
                                            {
       type : 'min', name: '最小值'}
                                        ]}
                              },
                            {
                                name: '接口成功率',
                                type: 'line',
                                yAxisIndex: 1,
                                data:[],
                                 markPoint : {
                                    data : [
                                        {
       type : 'max', name: '最大值'},
                                        {
       type : 'min', name: '最小值'}
                                        ]
                                        }
                                    }
                              ]
                    },
                    {
                        calculable:true,
                         title : {  
                             x:'left'
                        }, 
                         dataZoom : {
                            show : true,
                            realtime : true,
                            start : 30,//从30%开始展现
                            end : 60,//在60%的数据处截止
                            height:15
                        },
                        tooltip : {
                            trigger: 'axis',
                            formatter: ""
                        },
                        legend: {
                            data:['接口访问总量','接口成功率']//,'北京','山东'
                        },
                        itemStyle:{
                            normal:{
                                lineStyle:{
                                  color:function(){
                                    if(linecolor == "#BA610C"){
                                        linecolor = "#00713E";
                                      return linecolor;
                                    }else{
                                      return linecolor;
                                    }
    
                                  }
                                },
    
                        }
                       },
    
                        toolbox: {
                          x: 'right', 
                            y: 'center',
                            orient : 'vertical',
                            show : true,
                            feature : {
                                mark : {show: true},
                                dataView : {show: true},
                                magicType : {show: true, type: ['line','bar',  'stack']},
                                restore : {show: true},
                                saveAsImage : {show: true}
                            }
                        },
                        xAxis : [
                            {
                                type : 'category',
                                position: 'bottom',
                                boundaryGap: true,
                                axisLine : {    // x轴线轴线的设置
                                    show: false,
                                    lineStyle: {
                                        color: 'green',
                                        type: 'solid',
                                        width: 2
                                    }
                                },
                                axisTick : {    // X轴坐标点标记
                                    show:true,
                                    length: 5,
                                    lineStyle: {
                                        color: 'red',
                                        type: 'solid',
                                        width: 1
                                    }
                                },
                                axisLabel : {
       //X轴数据风格
                                    show:true,
                                    interval: 'auto',    // {number}
                                    rotate: 0,
                                    margin:-20,
                                    splitNumber: 23,
                                    textStyle:{
                                        color:'white'
                                    },
                                    formatter: '{value}'
                                },
                                splitLine : {
                                    show:false,
                                    lineStyle: {
                                        color: '#483d8b',
                                        type: 'dashed',
                                        width: 1
                                    }
                                },
                                data:[]
                                /*
                                 data :  [
                                    1,2,3,4,5,6,7,8,9,10,11,12,13,14,15,16,17,18,19,20,21,22,23,24]
                                */
                            }
                        ],
                        yAxis : [
                            {
                                type : 'value',
                                'name':'接口访问总量',
                                position: 'left',
                                 splitNumber: 10,
                                boundaryGap: [0,0.1],
                                axisLine : {    // 左边y轴线
                                    show: true
                                },
                                axisTick : {    //左边y轴坐标标记
                                    show:true,
                                    length: 10,
                                    lineStyle: {
                                        color: 'green',
                                        type: 'solid',
                                        width: 2
                                    }
                                },
                                axisLabel : {
                                    show:true,
                                    interval: 10,//'auto',    // {number}
                                    rotate: 0,//左边Y轴左边数据的选择角度
                                    margin: 18,
                                    textStyle:{
                                        color:'white'
                                    },
                                    formatter: '{value}'    // Template formatter!
                                },
                                splitLine : {
                                    show:false,
                                    lineStyle: {
                                        color: '#483d8b',
                                        type: 'dashed',
                                        width: 1
                                    }
                                }
                            },
                            {
                                type : 'value',
                                'name':'接口成功率',
                                splitNumber: 10,
                                axisLabel : {
                                    textStyle:{
                                        color:'white'
                                    },
                                    formatter: function (value) {
                                        // Function formatter
                                        return value;
                                    }
                                },
                                splitLine : {
                                    show: false
                                }
                            }
                        ],
                        series : [
                            {
                                name: '接口访问总量',
                                type: 'line',
                                data:[],
                                 markPoint : {
                                        data : [
                                            {
       type : 'max', name: '最大值'},
                                            {
       type : 'min', name: '最小值'}
                                        ]}
                              },
                            {
                                name: '接口成功率',
                                type: 'line',
                                yAxisIndex: 1,
                                data:[],
                                 markPoint : {
                                    data : [
                                        {
       type : 'max', name: '最大值'},
                                        {
       type : 'min', name: '最小值'}
                                        ]
                                        }
                                    }
                              ]
                    },
                    {
                        calculable:true,
                         title : {  
                             x:'left'
                        }, 
                         dataZoom : {
                            show : true,
                            realtime : true,
                            start : 30,//从30%开始展现
                            end : 60,//在60%的数据处截止
                            height:15
                        },
                        tooltip : {
                            trigger: 'axis',
                            formatter: ""
                        },
                        legend: {
                            data:['接口访问总量','接口成功率']//,'北京','山东'
                        },
                        toolbox: {
                          x: 'right', 
                            y: 'center',
                            orient : 'vertical',
                            show : true,
                            feature : {
                                mark : {show: true},
                                dataView : {show: true},
                                magicType : {show: true, type: ['line','bar',  'stack']},
                                restore : {show: true},
                                saveAsImage : {show: true}
                            }
                        },
                        xAxis : [
                            {
                                type : 'category',
                                position: 'bottom',
                                boundaryGap: true,
                                axisLine : {    // x轴线轴线的设置
                                    show: false,
                                    lineStyle: {
                                        color: 'green',
                                        type: 'solid',
                                        width: 2
                                    }
                                },
                                axisTick : {    // X轴坐标点标记
                                    show:true,
                                    length: 5,
                                    lineStyle: {
                                        color: 'red',
                                        type: 'solid',
                                        width: 1
                                    }
                                },
                                axisLabel : {
       //X轴数据风格
                                    show:true,
                                    interval: 'auto',    // {number}
                                    rotate: 0,
                                    margin:-20,
                                    splitNumber: 23,
                                    textStyle:{
                                        color:'white'
                                    },
                                    formatter: '{value}'
                                },
                                splitLine : {
                                    show:false,
                                    lineStyle: {
                                        color: '#483d8b',
                                        type: 'dashed',
                                        width: 1
                                    }
                                },
                                data:[]
                                /*
                                 data :  [
                                    1,2,3,4,5,6,7,8,9,10,11,12,13,14,15,16,17,18,19,20,21,22,23,24]
                                */
                            }
                        ],
                        yAxis : [
                            {
                                type : 'value',
                                'name':'接口访问总量',
                                position: 'left',
                                 splitNumber: 10,
                                boundaryGap: [0,0.1],
                                axisLine : {    // 左边y轴线
                                    show: true
                                },
                                axisTick : {    //左边y轴坐标标记
                                    show:true,
                                    length: 10,
                                    lineStyle: {
                                        color: 'green',
                                        type: 'solid',
                                        width: 2
                                    }
                                },
                                axisLabel : {
                                    show:true,
                                    interval: 10,//'auto',    // {number}
                                    rotate: 0,//左边Y轴左边数据的选择角度
                                    margin: 18,
                                    textStyle:{
                                        color:'white'
                                    },
                                    formatter: '{value}'    // Template formatter!
                                },
                                splitLine : {
                                    show:false,
                                    lineStyle: {
                                        color: '#483d8b',
                                        type: 'dashed',
                                        width: 1
                                    }
                                }
                            },
                            {
                                type : 'value',
                                'name':'接口成功率',
                                splitNumber: 10,
                                axisLabel : {
                                    textStyle:{
                                        color:'white'
                                    },
                                    formatter: function (value) {
                                        // Function formatter
                                        return value;
                                    }
                                },
                                splitLine : {
                                    show: false
                                }
                            }
                        ],
                        series : [
                            {
                                name: '接口访问总量',
                                type: 'line',
                                data:[],
                                 markPoint : {
                                        data : [
                                            {
       type : 'max', name: '最大值'},
                                            {
       type : 'min', name: '最小值'}
                                        ]}
                              },
                            {
                                name: '接口成功率',
                                type: 'line',
                                yAxisIndex: 1,
                                data:[],
                                 markPoint : {
                                    data : [
                                        {
       type : 'max', name: '最大值'},
                                        {
       type : 'min', name: '最小值'}
                                        ]
                                        }
                                    }
                              ]
                    },
                    {
                        calculable:true,
                         title : {  
                             x:'left'
                        }, 
                         dataZoom : {
                            show : true,
                            realtime : true,
                            start : 30,//从30%开始展现
                            end : 60,//在60%的数据处截止
                            height:15
                        },
                        tooltip : {
                            trigger: 'axis',
                            formatter: ""
                        },
                        legend: {
                            data:['接口访问总量','接口成功率']//,'北京','山东'
                        },
                        toolbox: {
                          x: 'right', 
                            y: 'center',
                            orient : 'vertical',
                            show : true,
                            feature : {
                                mark : {show: true},
                                dataView : {show: true},
                                magicType : {show: true, type: ['line','bar',  'stack']},
                                restore : {show: true},
                                saveAsImage : {show: true}
                            }
                        },
                        xAxis : [
                            {
                                type : 'category',
                                position: 'bottom',
                                boundaryGap: true,
                                axisLine : {    // x轴线轴线的设置
                                    show: false,
                                    lineStyle: {
                                        color: 'green',
                                        type: 'solid',
                                        width: 2
                                    }
                                },
                                axisTick : {    // X轴坐标点标记
                                    show:true,
                                    length: 5,
                                    lineStyle: {
                                        color: 'red',
                                        type: 'solid',
                                        width: 1
                                    }
                                },
                                axisLabel : {
       //X轴数据风格
                                    show:true,
                                    interval: 'auto',    // {number}
                                    rotate: 0,
                                    margin:-20,
                                    splitNumber: 23,
                                    textStyle:{
                                        color:'white'
                                    },
                                    formatter: '{value}'
                                },
                                splitLine : {
                                    show:false,
                                    lineStyle: {
                                        color: '#483d8b',
                                        type: 'dashed',
                                        width: 1
                                    }
                                },
                                data:[]
                                /*
                                 data :  [
                                    1,2,3,4,5,6,7,8,9,10,11,12,13,14,15,16,17,18,19,20,21,22,23,24]
                                */
                            }
                        ],
                        yAxis : [
                            {
                                type : 'value',
                                'name':'接口访问总量',
                                position: 'left',
                                 splitNumber: 10,
                                boundaryGap: [0,0.1],
                                axisLine : {    // 左边y轴线
                                    show: true
                                },
                                axisTick : {    //左边y轴坐标标记
                                    show:true,
                                    length: 10,
                                    lineStyle: {
                                        color: 'green',
                                        type: 'solid',
                                        width: 2
                                    }
                                },
                                axisLabel : {
                                    show:true,
                                    interval: 10,//'auto',    // {number}
                                    rotate: 0,//左边Y轴左边数据的选择角度
                                    margin: 18,
                                    textStyle:{
                                        color:'white'
                                    },
                                    formatter: '{value}'    // Template formatter!
                                },
                                splitLine : {
                                    show:false,
                                    lineStyle: {
                                        color: '#483d8b',
                                        type: 'dashed',
                                        width: 1
                                    }
                                }
                            },
                            {
                                type : 'value',
                                'name':'接口成功率',
                                splitNumber: 10,
                                axisLabel : {
                                    textStyle:{
                                        color:'white'
                                    },
                                    formatter: function (value) {
                                        // Function formatter
                                        return value;
                                    }
                                },
                                splitLine : {
                                    show: false
                                }
                            }
                        ],
                        series : [
                            {
                                name: '接口访问总量',
                                type: 'line',
                                data:[],
                                 markPoint : {
                                        data : [
                                            {
       type : 'max', name: '最大值'},
                                            {
       type : 'min', name: '最小值'}
                                        ]}
                              },
                            {
                                name: '接口成功率',
                                type: 'line',
                                yAxisIndex: 1,
                                data:[],
                                 markPoint : {
                                    data : [
                                        {
       type : 'max', name: '最大值'},
                                        {
       type : 'min', name: '最小值'}
                                        ]
                                        }
                                    }
                              ]
                    },
                    {
                        calculable:true,
                         title : {  
                             x:'left'
                        }, 
                         dataZoom : {
                            show : true,
                            realtime : true,
                            start : 30,//从30%开始展现
                            end : 60,//在60%的数据处截止
                            height:15
                        },
                        tooltip : {
                            trigger: 'axis',
                            formatter: ""
                        },
                        legend: {
                            data:['接口访问总量','接口成功率']//,'北京','山东'
                        },
                        toolbox: {
                          x: 'right', 
                            y: 'center',
                            orient : 'vertical',
                            show : true,
                            feature : {
                                mark : {show: true},
                                dataView : {show: true},
                                magicType : {show: true, type: ['line','bar',  'stack']},
                                restore : {show: true},
                                saveAsImage : {show: true}
                            }
                        },
                        xAxis : [
                            {
                                type : 'category',
                                position: 'bottom',
                                boundaryGap: true,
                                axisLine : {    // x轴线轴线的设置
                                    show: false,
                                    lineStyle: {
                                        color: 'green',
                                        type: 'solid',
                                        width: 2
                                    }
                                },
                                axisTick : {    // X轴坐标点标记
                                    show:true,
                                    length: 5,
                                    lineStyle: {
                                        color: 'red',
                                        type: 'solid',
                                        width: 1
                                    }
                                },
                                axisLabel : {
       //X轴数据风格
                                    show:true,
                                    interval: 'auto',    // {number}
                                    rotate: 0,
                                    margin:-20,
                                    splitNumber: 23,
                                    textStyle:{
                                        color:'white'
                                    },
                                    formatter: '{value}'
                                },
                                splitLine : {
                                    show:false,
                                    lineStyle: {
                                        color: '#483d8b',
                                        type: 'dashed',
                                        width: 1
                                    }
                                },
                                data:[]
                                /*
                                 data :  [
                                    1,2,3,4,5,6,7,8,9,10,11,12,13,14,15,16,17,18,19,20,21,22,23,24]
                                */
                            }
                        ],
                        yAxis : [
                            {
                                type : 'value',
                                'name':'接口访问总量',
                                position: 'left',
                                 splitNumber: 10,
                                boundaryGap: [0,0.1],
                                axisLine : {    // 左边y轴线
                                    show: true
                                },
                                axisTick : {    //左边y轴坐标标记
                                    show:true,
                                    length: 10,
                                    lineStyle: {
                                        color: 'green',
                                        type: 'solid',
                                        width: 2
                                    }
                                },
                                axisLabel : {
                                    show:true,
                                    interval: 10,//'auto',    // {number}
                                    rotate: 0,//左边Y轴左边数据的选择角度
                                    margin: 18,
                                    textStyle:{
                                        color:'white'
                                    },
                                    formatter: '{value}'    // Template formatter!
                                },
                                splitLine : {
                                    show:false,
                                    lineStyle: {
                                        color: '#483d8b',
                                        type: 'dashed',
                                        width: 1
                                    }
                                }
                            },
                            {
                                type : 'value',
                                'name':'接口成功率',
                                splitNumber: 10,
                                axisLabel : {
                                    textStyle:{
                                        color:'white'
                                    },
                                    formatter: function (value) {
                                        // Function formatter
                                        return value;
                                    }
                                },
                                splitLine : {
                                    show: false
                                }
                            }
                        ],
                        series : [
                            {
                                name: '接口访问总量',
                                type: 'line',
                                data:[],
                                 markPoint : {
                                        data : [
                                            {
       type : 'max', name: '最大值'},
                                            {
       type : 'min', name: '最小值'}
                                        ]}
                              },
                            {
                                name: '接口成功率',
                                type: 'line',
                                yAxisIndex: 1,
                                data:[],
                                 markPoint : {
                                    data : [
                                        {
       type : 'max', name: '最大值'},
                                        {
       type : 'min', name: '最小值'}
                                        ]
                                        }
                                    }
                              ]
                    },
                    {
                        calculable:true,
                         title : {  
                             x:'left'
                        }, 
                         dataZoom : {
                            show : true,
                            realtime : true,
                            start : 30,//从30%开始展现
                            end : 60,//在60%的数据处截止
                            height:15
                        },
                        tooltip : {
                            trigger: 'axis',
                            formatter: ""
                        },
                        legend: {
                            data:['接口访问总量','接口成功率']//,'北京','山东'
                        },
                        toolbox: {
                          x: 'right', 
                            y: 'center',
                            orient : 'vertical',
                            show : true,
                            feature : {
                                mark : {show: true},
                                dataView : {show: true},
                                magicType : {show: true, type: ['line','bar',  'stack']},
                                restore : {show: true},
                                saveAsImage : {show: true}
                            }
                        },
                        xAxis : [
                            {
                                type : 'category',
                                position: 'bottom',
                                boundaryGap: true,
                                axisLine : {    // x轴线轴线的设置
                                    show: false,
                                    lineStyle: {
                                        color: 'green',
                                        type: 'solid',
                                        width: 2
                                    }
                                },
                                axisTick : {    // X轴坐标点标记
                                    show:true,
                                    length: 5,
                                    lineStyle: {
                                        color: 'red',
                                        type: 'solid',
                                        width: 1
                                    }
                                },
                                axisLabel : {
       //X轴数据风格
                                    show:true,
                                    interval: 'auto',    // {number}
                                    rotate: 0,
                                    margin:-20,
                                    splitNumber: 23,
                                    textStyle:{
                                        color:'white'
                                    },
                                    formatter: '{value}'
                                },
                                splitLine : {
                                    show:false,
                                    lineStyle: {
                                        color: '#483d8b',
                                        type: 'dashed',
                                        width: 1
                                    }
                                },
                                data:[]
                                /*
                                 data :  [
                                    1,2,3,4,5,6,7,8,9,10,11,12,13,14,15,16,17,18,19,20,21,22,23,24]
                                */
                            }
                        ],
                        yAxis : [
                            {
                                type : 'value',
                                'name':'接口访问总量',
                                position: 'left',
                                 splitNumber: 10,
                                boundaryGap: [0,0.1],
                                axisLine : {    // 左边y轴线
                                    show: true
                                },
                                axisTick : {    //左边y轴坐标标记
                                    show:true,
                                    length: 10,
                                    lineStyle: {
                                        color: 'green',
                                        type: 'solid',
                                        width: 2
                                    }
                                },
                                axisLabel : {
                                    show:true,
                                    interval: 10,//'auto',    // {number}
                                    rotate: 0,//左边Y轴左边数据的选择角度
                                    margin: 18,
                                    textStyle:{
                                        color:'white'
                                    },
                                    formatter: '{value}'    // Template formatter!
                                },
                                splitLine : {
                                    show:false,
                                    lineStyle: {
                                        color: '#483d8b',
                                        type: 'dashed',
                                        width: 1
                                    }
                                }
                            },
                            {
                                type : 'value',
                                'name':'接口成功率',
                                splitNumber: 10,
                                axisLabel : {
                                    textStyle:{
                                        color:'white'
                                    },
                                    formatter: function (value) {
                                        // Function formatter
                                        return value;
                                    }
                                },
                                splitLine : {
                                    show: false
                                }
                            }
                        ],
                        series : [
                            {
                                name: '接口访问总量',
                                type: 'line',
                                data:[],
                                 markPoint : {
                                        data : [
                                            {
       type : 'max', name: '最大值'},
                                            {
       type : 'min', name: '最小值'}
                                        ]}
                              },
                            {
                                name: '接口成功率',
                                type: 'line',
                                yAxisIndex: 1,
                                data:[],
                                 markPoint : {
                                    data : [
                                        {
       type : 'max', name: '最大值'},
                                        {
       type : 'min', name: '最小值'}
                                        ]
                                        }
                                    }
                              ]
                    },
                    {
                        calculable:true,
                         title : {  
                             x:'left'
                        }, 
                         dataZoom : {
                            show : true,
                            realtime : true,
                            start : 30,//从30%开始展现
                            end : 60,//在60%的数据处截止
                            height:15
                        },
                        tooltip : {
                            trigger: 'axis',
                            formatter: ""
                        },
                        legend: {
                            data:['接口访问总量','接口成功率']//,'北京','山东'
                        },
                        toolbox: {
                          x: 'right', 
                            y: 'center',
                            orient : 'vertical',
                            show : true,
                            feature : {
                                mark : {show: true},
                                dataView : {show: true},
                                magicType : {show: true, type: ['line','bar',  'stack']},
                                restore : {show: true},
                                saveAsImage : {show: true}
                            }
                        },
                        xAxis : [
                            {
                                type : 'category',
                                position: 'bottom',
                                boundaryGap: true,
                                axisLine : {    // x轴线轴线的设置
                                    show: false,
                                    lineStyle: {
                                        color: 'green',
                                        type: 'solid',
                                        width: 2
                                    }
                                },
                                axisTick : {    // X轴坐标点标记
                                    show:true,
                                    length: 5,
                                    lineStyle: {
                                        color: 'red',
                                        type: 'solid',
                                        width: 1
                                    }
                                },
                                axisLabel : {
       //X轴数据风格
                                    show:true,
                                    interval: 'auto',    // {number}
                                    rotate: 0,
                                    margin:-20,
                                    splitNumber: 23,
                                    textStyle:{
                                        color:'white'
                                    },
                                    formatter: '{value}'
                                },
                                splitLine : {
                                    show:false,
                                    lineStyle: {
                                        color: '#483d8b',
                                        type: 'dashed',
                                        width: 1
                                    }
                                },
                                data:[]
                                /*
                                 data :  [
                                    1,2,3,4,5,6,7,8,9,10,11,12,13,14,15,16,17,18,19,20,21,22,23,24]
                                */
                            }
                        ],
                        yAxis : [
                            {
                                type : 'value',
                                'name':'接口访问总量',
                                position: 'left',
                                 splitNumber: 10,
                                boundaryGap: [0,0.1],
                                axisLine : {    // 左边y轴线
                                    show: true
                                },
                                axisTick : {    //左边y轴坐标标记
                                    show:true,
                                    length: 10,
                                    lineStyle: {
                                        color: 'green',
                                        type: 'solid',
                                        width: 2
                                    }
                                },
                                axisLabel : {
                                    show:true,
                                    interval: 10,//'auto',    // {number}
                                    rotate: 0,//左边Y轴左边数据的选择角度
                                    margin: 18,
                                    textStyle:{
                                        color:'white'
                                    },
                                    formatter: '{value}'    // Template formatter!
                                },
                                splitLine : {
                                    show:false,
                                    lineStyle: {
                                        color: '#483d8b',
                                        type: 'dashed',
                                        width: 1
                                    }
                                }
                            },
                            {
                                type : 'value',
                                'name':'接口成功率',
                                splitNumber: 10,
                                axisLabel : {
                                    textStyle:{
                                        color:'white'
                                    },
                                    formatter: function (value) {
                                        // Function formatter
                                        return value;
                                    }
                                },
                                splitLine : {
                                    show: false
                                }
                            }
                        ],
                        series : [
                            {
                                name: '接口访问总量',
                                type: 'line',
                                data:[],
                                 markPoint : {
                                        data : [
                                            {
       type : 'max', name: '最大值'},
                                            {
       type : 'min', name: '最小值'}
                                        ]}
                              },
                            {
                                name: '接口成功率',
                                type: 'line',
                                yAxisIndex: 1,
                                data:[],
                                 markPoint : {
                                    data : [
                                        {
       type : 'max', name: '最大值'},
                                        {
       type : 'min', name: '最小值'}
                                        ]
                                        }
                                    }
                              ]
                    }
                   ]
                };
    
              //设置延迟
            setTimeout( function getChartData() {  
                //通过Ajax获取数据  
                $.ajax({
                    url:ctx+ "/rest/homePage/qrySvcSuccDual",
                    type:'POST',
                    dataType:'json',
                    data:JSON.stringify(qryParam),
                     success : function(result) {  
                            if (result) {  
                                //请求成功将数据设置到相应的位置上
                                options.timeline.data = result[0].timeline;
                                console.info("options.timeline.data>" + options.timeline.data);
                                options.options[0].legend.data = result[0].legend;  
                                options.options[0].xAxis[0].data = ["1点","2点","3点","4点","5点","6点","7点","8点","9点","10点","11点","12点","13点","14点","15点","16点","17点","18点","19点","20点","21点","22点","23点","24点"];
                                /*  if(result[0].category.length > 0){
    //                              options.options[0].xAxis[0].data = result[0].category;  
                                }else{
                                    alert("111");
                                    for(var j = 0; j < result[0].categoryList.length; j++){
                                        alert("222");
    //                                  options.options[j].xAxis[0].data = result[0].categoryList[j];
                                        options.options[j].xAxis[0].data = ["1点","2点","3点","4点","5点","6点","7点","8点","9点","10点","11点","12点","13点","14点","15点","16点","17点","18点","19点","20点","21点","22点","23点","24点"];
                                    }
                                }*/
                                for ( var i = 0; i < result[0].timeline.length; i++) {
    //                              options.options[i].series[0].data = result[0].series[0][0].data;//接口访问总量
    //                              options.options[i].series[1].data = result[0].series[1][0].data;//接口成功率
                                    options.options[i].series[0].data= ["240000","236700","198900","245800","288900","299900","195000","219300","300100","380000","299800","300000","207900","321000","290000","320000","280000","348000","298100","392000","239400","310000","360000","217900"];
                                    options.options[i].series[1].data = ["92","100","98","100","97","99","99","97","99","100","98","100","97","98","100","96","100","98","100","96","99","100","98","97"];
                                    console.info("options.options[i].series[0].data" +  options.options[i].series[0].data);
                                    console.info("options.options[i].series[1].data" + options.options[i].series[1].data);
                                }
    
                                myChart.hideLoading();  
                                console.log("成功率options>>>" + JSON.stringify(options));
                                myChart.setOption(options);  
                            }  
                        }, 
                        error : function(xmlHttpRequest,errorMsg,exceptionObject) {  
    //                      alert('xmlHttpRequest>>>>>' + xmlHttpRequest + ' errorMsg>>>>>' + errorMsg + ' exceptionObject>>>>>' + exceptionObject);
                            myChart.hideLoading();
                        }  
                });
            } ,100);
        };

饼状图、柱状图和地图等其他类型的echarts图表都是类似的道理，这里就不再累述。