-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathtest.html
248 lines (239 loc) · 8.85 KB
/
test.html
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
226
227
228
229
230
231
232
233
234
235
236
237
238
239
240
241
242
243
244
245
246
247
248
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<script src="js/echarts.min.js"></script>
<title>Title</title>
</head>
<body>
<div id="main" style="width: 800px; height: 500px; border: solid 1px"></div>
<script type="text/javascript">
var dataCount = 10;
var startTime = +new Date(); //开始时间为当前时间，+号用于将日期类型转换为number类型，这里是转换为日期对应的毫秒值
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" },
];
var data = [];
function getData() {
// var data = [];
//组装数据
//遍历categories数组
categories.forEach((category, index) => {
//category为数组中的每个元素，index为元素对应的索引
//开始时间
var baseTime = startTime;
//为categories数组中的每个元素生成10个对应的元素，并追加到data中
for (var i = 0; i < dataCount; i++) {
//随机生成数据项类型 Math.round(随机生成的索引)：对随机生成的索引进行四舍五入，达到取整的效果
var typeItem =
types[Math.round(Math.random() * (types.length - 1))];
//随机生成持续时间 Math.round(随机生成的持续时间)：对随机生成的持续时间进行四舍五入，达到取整的效果
var duration = Math.round(Math.random() * 10000);
var status = Math.floor(Math.random() * 3);
data.push({
//数据项类型对应的名称
name: typeItem.name,
value: [
index, //categories数组中的元素索引
baseTime, //开始时间
(baseTime += duration), //结束时间
duration, //持续时间
status, //状态
],
});
//在startTime的基础上更新开始时间
baseTime += Math.round(Math.random() * 2000);
}
});
console.log(111, data);
renderChart();
}
var myChart = echarts.init(document.querySelector('#main'));
initChart();
getData();
setInterval(() => {
getData();
}, 1000);
function initChart() {
myChart.setOption({
tooltip: {
//自定义提示信息
formatter: function (params) {
//params为当前点击图形元素的数据信息的对象
//params.marker为标记小圆点 params.name为数据项的名称 params.value[3]为数据项中value数据的第4个元素，即持续时间
return (
params.marker + params.name + ": " + params.value[3] + " ms"
);
},
},
title: {
text: "Profile",
left: "center",
},
dataZoom: [
{
//区域缩放组件的类型为滑块，默认作用在x轴上
type: "slider",
//区域缩放组件的过滤模式，weakFilter：在进行区域缩放时，允许图形的一部分在坐标系上(可见)，另一部分在坐标系外(隐藏)
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: "",
},
{
//区域缩放组件的类型为内置在坐标系中，默认作用在x轴的坐标系中
type: "inside",
//区域缩放组件的过滤模式，weakFilter：在进行区域缩放时，允许图形的一部分在坐标系上(可见)，另一部分在坐标系外(隐藏)
filterMode: "weakFilter",
},
],
//图表底板
grid: {
height: 300,
},
xAxis: {
min: startTime,
//是否是脱离0值比例，设置成true后坐标刻度不会强制包含零刻度。只有当x轴类型为数值轴时才有效，x轴的类型默认为数值轴，即type: 'value'
scale: true,
//x轴样式
axisLabel: {
formatter: function (val) {
//因为没有为x轴设置数值数据，只设置了最小值min，
//所以var的初始值为min，之后会进行有序递增
return Math.max(0, val - startTime) + " ms";
},
},
},
yAxis: {
data: categories,
},
series: [
{
type: "custom",
//使用自定义的图形元素
renderItem: renderItem,
itemStyle: {
//透明度
opacity: 0.8,
color(item) {
console.log(item.value);
const colorMap = {
0: "green",
1: "red",
2: "yellow",
};
return colorMap[item.value[4]];
},
},
encode: {
//将维度1和维度2的数据映射到x轴
x: [1, 2],
//将维度0的数据映射到y轴
y: 0,
},
data: data,
},
],
});
}
function renderChart() {
myChart.setOption({
series: [
{
type: "custom",
//使用自定义的图形元素
renderItem: renderItem,
itemStyle: {
//透明度
opacity: 0.8,
color(item) {
console.log(item.value);
const colorMap = {
0: "green",
1: "red",
2: "yellow",
3: "blue",
};
return colorMap[item.value[4]];
},
},
encode: {
//将维度1和维度2的数据映射到x轴
x: [1, 2],
//将维度0的数据映射到y轴
y: 0,
},
data: data,
},
],
});
}
function renderItem(params, api) {
//params为data中的数据项的信息对象 api中是一些开发者可调用的方法集合，可以对data中的数据项进行操作
var categoryIndex = api.value(0); //取出data中数据项的第一个维度的值
//开始时间(在屏幕上的像素值)
var start = api.coord([api.value(1), categoryIndex]); //将数据项中的数值对应的坐标系上的点，转换为屏幕上的像素值
//坐标系上的点：是数据项映射到坐标系的x轴和y轴后，对应的位置
//屏幕上的像素值：是坐标系上的点，在屏幕上的位置
//结束时间(在屏幕上的像素值)
var end = api.coord([api.value(2), categoryIndex]);
console.log(api.value(1), api.value(2))
//设置图形的高度
var height = api.size([0, 1])[1] * 0.6; //获得Y轴上数值范围为1的一段所对应的像素长度；这是官方文档的注释，对于api.size()方法，目前我还不是很理解；先做个标记??? 以后再说
//使用graphic图形元素组件，绘制矩形
//clipRectByRect方法，在绘制矩形时，如果矩形大小超出了当前坐标系的包围盒，则裁剪这个矩形
var rectShape = 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,
}
);
//设置绘制的矩形的元素定义
return (
rectShape && {
//类型为矩形
type: "rect",
//具体形状
shape: rectShape,
//样式 api.style()会获取option中itemStyle的配置
style: api.style(),
}
);
}
</script>
</body>
</html>