Profileecharts custom配置项内容和展示
配置项如下
var data = [];
var datas = [];
var dataCount = 10;
var startTime = +new Date();
// var startTime = 1523948895311;
// console.log(startTime);
var categories = ['A01', 'A02', 'A03'];
var types = [
{name: 'JS Heap', color: '#7b9ce1'},
{name: 'Documents', color: '#bd6d6c'}
// {name: 'Nodes', color: '#75d874'},
// {name: 'Listeners', color: '#e0bc78'},
// {name: 'GPU Memory', color: '#dc77dc'},
// {name: 'GPU', color: '#72b362'}
];
// Generate mock data
echarts.util.each(categories, function (category, index) {
var baseTime = startTime;
for (var i = 0; i < types.length; i++) {
var endTime = startTime + Math.round(Math.random() * 2000);
var duration = Math.round(Math.random() * 10000);
data.push({
name: types[i].name,
value: [
index,
baseTime,
baseTime += duration,
'北京',
'上海'
],
itemStyle: {
normal: {
color: types[i].color
}
}
});
}
});
datas = [{
name: 'JS Heap',
value: [
0,
1523963808292,
1523963818175,
'北京',
'上海'
],
itemStyle: {
normal: {
color: '#7b9ce1'
}
}
},
// {
// name: 'Documents',
// value: [
// 0,
// 1523963809793,
// 1523963810379,
// '广州',
// '深圳'
// ],
// itemStyle: {
// normal: {
// color: '#bd6d6c'
// }
// }
// },
// {
// name: 'JS Heap',
// value: [
// 1,
// 1523963805999,
// 1523963813589,
// '重庆',
// '北京'
// ],
// itemStyle: {
// normal: {
// color: '#7b9ce1'
// }
// }
// }, {
// name: 'Documents',
// value: [
// 1,
// 1523963816217,
// 1523963825558,
// '杭州',
// '深圳'
// ],
// itemStyle: {
// normal: {
// color: '#bd6d6c'
// }
// }
// }, {
// name: 'JS Heap',
// value: [
// 2,
// 1523963801610,
// 1523963804811,
// '石家庄',
// '上海'
// ],
// itemStyle: {
// normal: {
// color: '#7b9ce1'
// }
// }
// }, {
// name: 'Documents',
// value: [
// 2,
// 1523963802273,
// 1523963802631,
// '东京',
// '深圳'
// ],
// itemStyle: {
// normal: {
// color: '#bd6d6c'
// }
// }
// }
];
// function renderItem(params, api) {
// console.log(params);
// var categoryIndex = api.value(0);
// var start = api.coord([api.value(1), categoryIndex]);
// var end = api.coord([api.value(2), categoryIndex]);
// var height = api.size([0, 1])[1] * 0.6;
// return {
// type: 'rect',
// shape: echarts.graphic.clipRectByRect({
// x: start[0],
// y: start[1] - height / 2,
// width: end[0] - start[0],
// height: height
// }, {
// x: params.coordSys.x,
// y: params.coordSys.y,
// width: params.coordSys.width,
// height: params.coordSys.height
// }),
// style: api.style({
// text: '{start|开始}{middle|中间}{end|结尾}',
// textWidth: end[0] - start[0] - 10,
// rich: {
// start: {
// textFill: 'yellow',
// textBackgroundColor: 'red',
// textAlign: 'left'
// },
// middle: {
// textFill: '#fff',
// textAlign: 'center'
// },
// end: {
// textFill: 'yellow',
// textBackgroundColor: 'red',
// textAlign: 'right'
// }
// }
// })
// };
// }
function renderItem(params, api) {
var categoryIndex = api.value(0); // index
var start = api.coord([api.value(1), categoryIndex]); // 开始时间，index
var end = api.coord([api.value(2), categoryIndex]); // 结束时间，index
var height = api.size([0, 1])[1] * 0.8; // 获得 Y 轴上数值范围为 1 的一段所对应的像素长度
// console.log(end[0] - start[0]);
var startText = api.value(3);
var endText = api.value(4);
var middleText = '航班号';
var barLength = end[0] - start[0];
var startTextWidth = echarts.format.getTextRect(startText).width;
var endTextWidth = echarts.format.getTextRect(endText).width;
var text = '';
if (barLength > startTextWidth + endTextWidth + 40) {
text = '{start|' + startText + '}{middle|' + middleText + '}{end|' + endText + '}';
}
else if (barLength > 40) {
text = '{middle|' + middleText + '}';
}
else {
text = '';
}
var points = [];
var x = start[0];
var y = start[1] - height / 2;
var width = barLength;
var len = 50;
var halfHeight = y - height / 2;
var xWidth = x + width;
points.push([x, halfHeight]);
points.push([(x + len), y]);
points.push([x + width - len, y]);
points.push([(x + width), halfHeight]);
points.push([(x + width - len), (y - height)]);
points.push([(x + len), y - height]);
console.log(points);
return {
type: 'polygon',
shape: {
points: echarts.graphic.clipPointsByRect(
points,
{
x: params.coordSys.x,
y: params.coordSys.y,
width: params.coordSys.width,
height: params.coordSys.height
}
)
},
style: api.style({
// text: '{start|' + startText + '}{middle|' + middleText + '}{end|' + endText + '}',
// text: ['{start|{@[3]}}', '{middle|{@name}}', '{end|{{@[4]}}'].join('\n'),
text: text,
textWidth: barLength - 10,
rich: {
start: {
textFill: '#fff',
textAlign: 'left'
},
middle: {
textFill: '#fff',
textAlign: 'center'
},
end: {
textFill: '#fff',
textAlign: 'right'
}
}
})
// echarts.graphic.clipPointsByRect({
// points: points
// }, {
// x: params.coordSys.x,
// y: params.coordSys.y,
// width: params.coordSys.width,
// height: params.coordSys.height
// }),
// style: api.style({
// // text: '{start|' + startText + '}{middle|' + middleText + '}{end|' + endText + '}',
// // text: ['{start|{@[3]}}', '{middle|{@name}}', '{end|{{@[4]}}'].join('\n'),
// text: text,
// textWidth: barLength - 10,
// rich: {
// start: {
// textFill: '#fff',
// textAlign: 'left'
// },
// middle: {
// textFill: '#fff',
// textAlign: 'center'
// },
// end: {
// textFill: '#fff',
// textAlign: 'right'
// }
// }
// })
};
}
option = {
tooltip: {
// formatter: function (params) {
// var html = '';
// html += '航班:' + params.data.name + '<br />';
// html += '起飞时间:' + format(params.value[1], 'yyyy-MM-dd HH:mm:ss') + '<br />';
// html += '结束时间:' + format(params.value[2], 'yyyy-MM-dd HH:mm:ss') + '<br />';
// html += '起飞时间:' + params.value[1] + '<br />';
// html += '结束时间:' + params.value[2] + '<br />';
// html += '起飞地点:' + params.value[3] + '<br />';
// html += '结束地点:' + params.value[4] + '<br />';
// return html;
// // return params.marker + params.name + ': ' + params.value[3] + ' ms';
// }
},
title: {
text: 'Profile',
left: 'center'
},
legend: {
data: ['bar', 'error']
},
dataZoom: [{
type: 'slider',
filterMode: 'weakFilter',
showDataShadow: false,
top: 400,
height: 10,
borderColor: 'transparent',
backgroundColor: '#e2e2e2',
handleIcon: 'M10.7,11.9H9.3c-4.9,0.3-8.8,4.4-8.8,9.4c0,5,3.9,9.1,8.8,9.4h1.3c4.9-0.3,8.8-4.4,8.8-9.4C19.5,16.3,15.6,12.2,10.7,11.9z M13.3,24.4H6.7v-1.2h6.6z M13.3,22H6.7v-1.2h6.6z M13.3,19.6H6.7v-1.2h6.6z', // jshint ignore:line
handleSize: 20,
handleStyle: {
shadowBlur: 6,
shadowOffsetX: 1,
shadowOffsetY: 2,
shadowColor: '#aaa'
},
labelFormatter: ''
}, {
type: 'inside',
filterMode: 'weakFilter'
}],
grid: {
height:300
},
xAxis: {
// min: startTime,
scale: true,
type: 'time',
axisLabel: {
formatter: function (val) {
return val;
// return Math.max(0, val - startTime) + ' ms';
// return format(val, 'HH:mm:ss');
}
}
},
yAxis: {
data: categories
},
series: [{
type: 'custom',
renderItem: renderItem,
itemStyle: {
normal: {
opacity: 0.8
}
},
encode: {
x: [1, 2],
y: 0,
},
data: datas
}]
};
截图如下
