【echarts】echarts开发流程详解

首先是封装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()));//转换为可执行的SQLString 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:mmList<String> categoryForSeriesLastMin = new ArrayList<String>();yyyy-MM-dd HH:mmList<List<EchartsSeries>> series = new ArrayList<List<EchartsSeries>>();// 纵坐标category = installCategory(startDate, endDate);//HH:mmcategoryForSeries = 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:33List<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 formatterreturn 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 formatterreturn 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 formatterreturn 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 formatterreturn 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 formatterreturn 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 formatterreturn 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 formatterreturn 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 formatterreturn 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 formatterreturn 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 formatterreturn 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图表都是类似的道理，这里就不再累述。

【echarts】echarts开发流程详解相关推荐

杂志订阅管理系统c++_电池管理系统BMS功能安全开发流程详解
点击上面 "电动知家"可以订阅哦! BMS功能安全开发流程详解 BMS和ISO26262 - BMS & ISO26262简介 BMS即Battery Management ...
【联机对战】微信小程序联机游戏开发流程详解
现有一个微信小程序叫中国象棋项目,棋盘类的单机游戏看着有缺少了什么,现在给补上了,加个联机对战的功能,增加了可玩性,对新手来说,实现联机游戏还是有难度的,那要怎么实现的呢,接下来给大家讲一下. 考虑到 ...
苹果app开发流程详解
苹果App Store上传应用流程详解,在向AppStore提交应用之前,开发者首先要成为苹果iOS开发者项目的成员,每年向苹果缴纳99美元或199美元的费用(具体申请方法后期更新). 免688开发 ...
tx2 fpga pcie无法读写_Cyclone V SOC(ARM+FPGA)开发文档_之开发流程详解
双击可查看大图(手动狗头) 目录 Altera Cyclone V soc开发文档之软硬件开发 1 Cyclone V开发流程介绍 5 专业术语 5 Cyclone V软件开发介绍 6 U-BOOT ...
ubuntu arm qt_Cyclone V SOC(ARM+FPGA)开发文档_之开发流程详解
双击可查看大图(手动狗头) 目录 Altera Cyclone V soc开发文档之软硬件开发 1 Cyclone V开发流程介绍 5 专业术语 5 Cyclone V软件开发介绍 6 U-BOOT ...
Android App Bundles相关概念及开发流程详解
本文会根据官网的介绍,结合自己的一些理解,来阐述Android App Bundles的相关概念和开发流程. 主要参考文章如下. https://developer.android.com/guide ...
用MindStudio进行TensorFlow模型开发流程详解
相对应的视频教学可以在B站进行观看 https://www.bilibili.com/video/BV18a411S7pr 一.MindStudio简介与安装 1.MindStudio简介 Mind ...
【迷宫】地下迷宫游戏-微信小程序开发流程详解
可曾记得,小时候上学路边买的透明铅笔盒,里面内嵌了一个小球,它用重力可从起点滚动到终点,对小朋友来说是感觉有趣的,在这个游戏的基础上,弄一款微信小程序的迷宫探索游戏试试,在不同关卡的迷宫中解开机关与谜 ...
实战：移动APP项目产品开发流程详解
问题补充:移动端APP产品的开发流程是如何的?开发移动端APP,从产品需求规划到最终上线发版,都有哪些必要流程,其中需要重点注意的事情有哪些,可以基于你当前的工作情况酌情回答. 黄沐秋Moon NBP ...
php微信公众号怎么开发_PHP对接微信公众平台消息接口开发流程详解及实例
这篇文章主要介绍了PHP对接微信公众平台消息接口开发流程,如何使用PHP版接口操作公众平台消息,需要的朋友可以参考下一.写好接口程序在你的服务器上上传好一个接口程序文件内容如下: 代码如下:< ...

【echarts】echarts开发流程详解

【echarts】echarts开发流程详解相关推荐

最新文章

热门文章