echart中custom类型的图表
自定义系列，是比较灵活的系列，我们可以在renderItem这个方法中进行设定在坐标系中的某个坐标做些什么事情，比如画折线，矩形等来展示数据。这个案例主要展示的是，在三个大类下六个小类分别所占时长，通过矩形的宽度表示其时长，矩形越宽时长越长
echart依赖包请自行npm下载引入
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Document</title>
</head>
<style>
#echart {
width: 800px;
height: 500px;
}
</style>
<body>
<div id="echart"></div>
<script src="./node_modules/echarts/dist/echarts.min.js"></script>
<script>
let echart = document.getElementById('echart')
let myEchart = echarts.init(echart)
// data中的value值 0表示是属于categories中的哪一类 1，2表示时间范围 3表示所占的时长
var data = [
{
name: 'Nodes',
value: [0, 1608991598383, 1608991605037, 6654],
itemStyle: { normal: { color: '#75d874' } },
},
{
name: 'Listeners',
value: [0, 1608991605280, 1608991606570, 1290],
itemStyle: { normal: { color: '#e0bc78' } },
},
{
name: 'JS Heap',
value: [0, 1608991607963, 1608991613345, 5382],
itemStyle: { normal: { color: '#7b9ce1' } },
},
{
name: 'GPU Memory',
value: [0, 1608991614586, 1608991615224, 638],
itemStyle: { normal: { color: '#dc77dc' } },
},
{
name: 'JS Heap',
value: [0, 1608991615842, 1608991616561, 719],
itemStyle: { normal: { color: '#7b9ce1' } },
},
{
name: 'JS Heap',
value: [0, 1608991617912, 1608991619175, 1263],
itemStyle: { normal: { color: '#7b9ce1' } },
},
{
name: 'GPU',
value: [0, 1608991620654, 1608991624374, 3720],
itemStyle: { normal: { color: '#72b362' } },
},
{
name: 'Documents',
value: [0, 1608991624976, 1608991631226, 6250],
itemStyle: { normal: { color: '#bd6d6c' } },
},
{
name: 'JS Heap',
value: [0, 1608991632080, 1608991638191, 6111],
itemStyle: { normal: { color: '#7b9ce1' } },
},
{
name: 'Nodes',
value: [0, 1608991639425, 1608991646509, 7084],
itemStyle: { normal: { color: '#75d874' } },
},
{
name: 'Listeners',
value: [1, 1608991598383, 1608991605845, 7462],
itemStyle: { normal: { color: '#e0bc78' } },
},
{
name: 'Listeners',
value: [1, 1608991607554, 1608991615552, 7998],
itemStyle: { normal: { color: '#e0bc78' } },
},
{
name: 'Nodes',
value: [1, 1608991615566, 1608991622979, 7413],
itemStyle: { normal: { color: '#75d874' } },
},
{
name: 'Listeners',
value: [1, 1608991623267, 1608991625662, 2395],
itemStyle: { normal: { color: '#e0bc78' } },
},
{
name: 'GPU',
value: [1, 1608991627560, 1608991635011, 7451],
itemStyle: { normal: { color: '#72b362' } },
},
{
name: 'GPU',
value: [1, 1608991636996, 1608991646925, 9929],
itemStyle: { normal: { color: '#72b362' } },
},
{
name: 'Nodes',
value: [1, 1608991647997, 1608991648993, 996],
itemStyle: { normal: { color: '#75d874' } },
},
{
name: 'Listeners',
value: [1, 1608991649256, 1608991650772, 1516],
itemStyle: { normal: { color: '#e0bc78' } },
},
{
name: 'GPU Memory',
value: [1, 1608991652367, 1608991660634, 8267],
itemStyle: { normal: { color: '#dc77dc' } },
},
{
name: 'GPU Memory',
value: [1, 1608991662399, 1608991671753, 9354],
itemStyle: { normal: { color: '#dc77dc' } },
},
{
name: 'Listeners',
value: [2, 1608991598383, 1608991602756, 4373],
itemStyle: { normal: { color: '#e0bc78' } },
},
{
name: 'GPU',
value: [2, 1608991604287, 1608991607787, 3500],
itemStyle: { normal: { color: '#72b362' } },
},
{
name: 'Documents',
value: [2, 1608991609402, 1608991612765, 3363],
itemStyle: { normal: { color: '#bd6d6c' } },
},
{
name: 'Documents',
value: [2, 1608991614519, 1608991615817, 1298],
itemStyle: { normal: { color: '#bd6d6c' } },
},
{
name: 'Documents',
value: [2, 1608991616380, 1608991618162, 1782],
itemStyle: { normal: { color: '#bd6d6c' } },
},
{
name: 'JS Heap',
value: [2, 1608991618319, 1608991627713, 9394],
itemStyle: { normal: { color: '#7b9ce1' } },
},
{
name: 'JS Heap',
value: [2, 1608991629188, 1608991633037, 3849],
itemStyle: { normal: { color: '#7b9ce1' } },
},
{
name: 'GPU Memory',
value: [2, 1608991633362, 1608991633897, 535],
itemStyle: { normal: { color: '#dc77dc' } },
},
{
name: 'Documents',
value: [2, 1608991635616, 1608991645000, 9384],
itemStyle: { normal: { color: '#bd6d6c' } },
},
{
name: 'Documents',
value: [2, 1608991645658, 1608991646915, 1257],
itemStyle: { normal: { color: '#bd6d6c' } },
},
]
var dataCount = 10
var startTime = 1608991598383
var categories = ['categoryA', 'categoryB', 'categoryC']
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 < dataCount; i++) {
// var typeItem = types[Math.round(Math.random() * (types.length - 1))]
// var duration = Math.round(Math.random() * 10000)
// data.push({
// name: typeItem.name,
// value: [index, baseTime, (baseTime += duration), duration],
// itemStyle: {
// normal: {
// color: typeItem.color,
// },
// },
// })
// baseTime += Math.round(Math.random() * 2000)
// }
// console.log(JSON.stringify(data))
// })
function renderItem(params, api) {
console.log(params, api)
console.log(api.value(0), api.value(1), api.value(2))
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.3
console.log(api.value(2) - api.value(1))
return {
type: 'rect',
shape: {
// 在(x,y)坐标点画宽高为多少的矩形
x: start[0], //x坐标
y: start[1] - height / 2, //y坐标
width: end[0] - start[0], //宽
height: height, //高
},
style: api.style(),
}
}
option = {
tooltip: {
formatter: function (params) {
return params.marker + params.name + ': ' + params.value[3] + ' ms'
},
},
title: {
text: 'Profile',
left: 'center',
},
grid: {
height: 300,
},
// x轴会动态将日期格式化
xAxis: {
min: startTime,
scale: true,
axisLabel: {
formatter: function (val) {
console.log(startTime, val)
// 将日期进行整合处理
console.log(new Date(val))
return Math.max(0, val - startTime) + ' ms'
},
},
},
yAxis: {
data: categories,
},
series: [
{
type: 'custom',
renderItem: renderItem,
//指定x映射的是data数组中每一个元素中value的第几个值
//将值收集起来并且进行统一范围处理 比如上面的data中有30个值就会把30个值收集然后进行10s的一个间隔进行区间处理生成x轴
encode: {
x: [1, 2],
y: 0,
},
data: data,
},
],
}
myEchart.setOption(option)
</script>
</body>
</html>
533
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
