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()));
//转换为可执行的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图表都是类似的道理，这里就不再累述。