echarts开发流程详解
来源：互联网 发布：如何用excel做数据库 编辑：程序博客网 时间：2024/05/22 13:53
首先是封装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图表都是类似的道理，这里就不再累述。
2 0
- echarts开发流程详解
- echarts开发详解
- ECharts详解
- JavaME 开发流程详解
- 驱动程序开发流程详解
- JavaME开发流程详解
- ios开发流程详解
- 微信小程序开发流程详解
- 详解Echarts 绘制柱状图
- ECharts地图详解
- ECharts地图详解
- echarts的使用详解
- echarts 配置文件详解
- ECharts开发入门
- Echarts图简单开发
- [博客链接]驱动程序开发流程详解
- 快速开发平台(流程建模详解）
- 详解 Arm linux QT 程序开发流程
- Centos 6.5 64bit安装RStudio server
- Jsoup.connect(url).get()解析html页面空格&bsp乱码问题
- VS2010 C++ 大杂烩
- uestc The Desire of Asuna 1263 (递推模拟)
- hdoj N!
- echarts开发流程详解
- 组合模式
- C语言的问题，关于temp参数的一些知识
- UESTC 1263-The Desire of Asuna
- iOS之 json数据解析
- c语言关于二叉树的知识和float的一些问题
- 人生在世，不在于读多少，在于读什么?
- 高并发服务端分布式系统设计概要
- 【php】 勾搭 Composer\Autoload\ClassLoader 类
