原始需求
做成最终的结果
当前效果图片贴上
<!--
Licensed to the Apache Software Foundation (ASF) under one
or more contributor license agreements. See the NOTICE file
distributed with this work for additional information
regarding copyright ownership. The ASF licenses this file
to you under the Apache License, Version 2.0 (the
"License"); you may not use this file except in compliance
with the License. You may obtain a copy of the License at
http://www.apache.org/licenses/LICENSE-2.0
Unless required by applicable law or agreed to in writing,
software distributed under the License is distributed on an
"AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY
KIND, either express or implied. See the License for the
specific language governing permissions and limitations
under the License.
-->
<html>
<head>
<meta charset="utf-8">
<script src="lib/esl.js"></script>
<script src="lib/config.js"></script>
<script src="lib/testHelper.js"></script>
<meta name="viewport" content="width=device-width, initial-scale=1" />
<link rel="stylesheet" href="lib/reset.css" />
</head>
<body>
<style>
h1 {
line-height: 60px;
height: 60px;
background: #ddd;
text-align: center;
font-weight: bold;
font-size: 14px;
}
.chart {
height: 500px;
}
mylineStyle
</style>
<div style="text-align:center;padding:50px 150px 50px 50px;">
<div style="float:right; ">
范围
<input id="btn6Hour" type="button" value="6小时" onclick="SixHour()" />
<input id="btn12Hour" type="button" value="12小时" onclick="twelveHour()" />
<input id="btn1Day" type="button" value="1天" onclick="twityHour()" />
</div>
</div>
<div class="chart" id="profile"></div>
<!--<div class="ProfileChartData" id="profile"></div>-->
<script>
function SixHour() {
}
function twelveHour() {
}
function twityHour() {
}
require([
'echarts'
// 'echarts/chart/custom',
// 'echarts/chart/bar',
// 'echarts/component/legend',
// 'echarts/component/tooltip',
// 'echarts/component/visualMap',
// 'echarts/component/dataZoom',
// 'zrender/vml/vml'
], function (echarts) {
var beginDt = new Date('2019-07-01');
var dataMin = new Date('2019-07-01 00:00:00');
var dataMax = new Date('2019-07-30 23:59:59');
//['设备名称', '设备状态', '开始日期', '结束日期'],
//"name":"状态"，"value":[设备序号，开始日期，结束日期，开始日期-结束日期的时间差] 状态颜色
//var data = [
// { "name": "正常", "value": [0, '2019-07-01 00:00:00', '2019-07-03 59:59:59', 0], "itemStyle": { "normal": { "color": "blue" } } },
// { "name": "异常", "value": [0, '2019-07-04', '2019-07-05', 0], "itemStyle": { "normal": { "color": "red" } } },
// { "name": "巡检", "value": [0, '2019-07-06', '2019-07-07', 0], "itemStyle": { "normal": { "color": "green" } } },
// { "name": "正常", "value": [0, '2019-07-01', '2019-07-03', 3], "itemStyle": { "normal": { "color": "blue" } } },
// { "name": "异常", "value": [0, '2019-07-04', '2019-07-05', 3], "itemStyle": { "normal": { "color": "red" } } },
// { "name": "巡检", "value": [0, '2019-07-06', '2019-07-07', 2], "itemStyle": { "normal": { "color": "green" } } },
// { "name": "正常", "value": [0, '2019-07-01', '2019-07-03', 3], "itemStyle": { "normal": { "color": "blue" } } },
// { "name": "异常", "value": [0, '2019-07-04', '2019-07-05', 3], "itemStyle": { "normal": { "color": "red" } } },
// { "name": "巡检", "value": [0, '2019-07-06', '2019-07-07', 2], "itemStyle": { "normal": { "color": "green" } } },
// { "name": "正常", "value": [0, '2019-07-01', '2019-07-03', 3], "itemStyle": { "normal": { "color": "blue" } } },
// { "name": "异常", "value": [0, '2019-07-04', '2019-07-05', 3], "itemStyle": { "normal": { "color": "red" } } },
// { "name": "巡检", "value": [0, '2019-07-06', '2019-07-07', 2], "itemStyle": { "normal": { "color": "green" } } },
// { "name": "巡检", "value": [1, '2019-07-01 00:00:00', '2019-07-03 59:59:59', 0], "itemStyle": { "normal": { "color": "blue" } } },
// { "name": "巡检", "value": [1, '2019-07-04', '2019-07-05', 0], "itemStyle": { "normal": { "color": "red" } } },
// { "name": "巡检", "value": [1, '2019-07-06', '2019-07-07', 0], "itemStyle": { "normal": { "color": "green" } } },
// { "name": "巡检", "value": [1, '2019-07-01', '2019-07-03', 3], "itemStyle": { "normal": { "color": "blue" } } },
// { "name": "巡检", "value": [1, '2019-07-04', '2019-07-05', 3], "itemStyle": { "normal": { "color": "red" } } },
// { "name": "巡检", "value": [1, '2019-07-06', '2019-07-07', 2], "itemStyle": { "normal": { "color": "green" } } },
// { "name": "巡检", "value": [1, '2019-07-01', '2019-07-03', 3], "itemStyle": { "normal": { "color": "blue" } } },
// { "name": "巡检", "value": [1, '2019-07-04', '2019-07-05', 3], "itemStyle": { "normal": { "color": "red" } } },
// { "name": "巡检", "value": [1, '2019-07-06', '2019-07-07', 2], "itemStyle": { "normal": { "color": "green" } } },
// { "name": "巡检", "value": [1, '2019-07-01', '2019-07-03', 3], "itemStyle": { "normal": { "color": "blue" } } },
// { "name": "巡检", "value": [1, '2019-07-04', '2019-07-05', 3], "itemStyle": { "normal": { "color": "red" } } },
// { "name": "巡检", "value": [1, '2019-07-06', '2019-07-07', 2], "itemStyle": { "normal": { "color": "green" } } },
// { "name": "巡检", "value": [1, '2019-07-01 00:00:00', '2019-07-03 59:59:59', 0], "itemStyle": { "normal": { "color": "blue" } } },
// { "name": "巡检", "value": [1, '2019-07-04', '2019-07-05', 0], "itemStyle": { "normal": { "color": "red" } } },
// { "name": "巡检", "value": [1, '2019-07-06', '2019-07-07', 0], "itemStyle": { "normal": { "color": "green" } } },
// { "name": "巡检", "value": [1, '2019-07-01', '2019-07-03', 3], "itemStyle": { "normal": { "color": "blue" } } },
// { "name": "巡检", "value": [1, '2019-07-04', '2019-07-05', 3], "itemStyle": { "normal": { "color": "red" } } },
// { "name": "巡检", "value": [1, '2019-07-06', '2019-07-07', 2], "itemStyle": { "normal": { "color": "green" } } },
// { "name": "巡检", "value": [1, '2019-07-01', '2019-07-03', 3], "itemStyle": { "normal": { "color": "blue" } } },
// { "name": "巡检", "value": [1, '2019-07-04', '2019-07-05', 3], "itemStyle": { "normal": { "color": "red" } } },
// { "name": "巡检", "value": [1, '2019-07-06', '2019-07-07', 2], "itemStyle": { "normal": { "color": "green" } } },
// { "name": "巡检", "value": [1, '2019-07-01', '2019-07-03', 3], "itemStyle": { "normal": { "color": "blue" } } },
// { "name": "巡检", "value": [1, '2019-07-04', '2019-07-05', 3], "itemStyle": { "normal": { "color": "red" } } },
// { "name": "巡检", "value": [1, '2019-07-06', '2019-07-07', 2], "itemStyle": { "normal": { "color": "green" } } },
// { "name": "正常", "value": [2, '2019-07-01 00:00:00', '2019-07-03 59:59:59', 6], "itemStyle": { "normal": { "color": "blue" } } },
// { "name": "正常", "value": [2, '2019-07-03 00:00:00', '2019-07-04 59:59:59', 7], "itemStyle": { "normal": { "color": "blue" } } },
// { "name": "正常", "value": [2, '2019-07-05 00:00:00', '2019-07-06 59:59:59', 8], "itemStyle": { "normal": { "color": "blue" } } },
// { "name": "正常", "value": [2, '2019-07-07 00:00:00', '2019-07-08 59:59:59', 8], "itemStyle": { "normal": { "color": "blue" } } },
// { "name": "正常", "value": [2, '2019-07-09 00:00:00', '2019-07-10 59:59:59', 9], "itemStyle": { "normal": { "color": "blue" } } },
// { "name": "正常", "value": [2, '2019-07-11 00:00:00', '2019-07-12 59:59:59', 10], "itemStyle": { "normal": { "color": "blue" } } },
// { "name": "巡检", "value": [2, '2019-07-12 00:00:00', '2019-07-13 59:59:59', 1], "itemStyle": { "normal": { "color": "blue" } } },
var dataCount = 10;
var startTime = +new Date();
var categories = ['设备1', '设备2', '设备3', '设备4', '设备5', '设备6', '设备7', '设备8', '设备9', '设备10'];
var colorData = ['green', 'blue', 'red'];
var types = [
{ name: '巡检', color: colorData[0] },
{ name: '正常', color: colorData[1] },
{ name: '异常', color: colorData[2] }
];
var dataGreen = [];//巡检
var dataBlue = [];//正常
var dataRed = [];//异常
for (var j = 0; j < types.length; j++) {
var datatemp = [];
if (j == 0) {
datatemp = dataGreen;
}
if (j == 1) {
datatemp = dataBlue;
}
if (j == 2) {
datatemp = dataRed;
}
echarts.util.each(categories, function (category, index) {
var baseTime = startTime;
for (var i = 0; i < dataCount; i++) {
var typeItem = types[j];
var duration = Math.round(Math.random() * 10000);
var endTime = null;
if (typeItem.name == types[0].name) {
endTime = null;
duration = null;
}
else
endTime = startTime + duration;
var data = {
name: typeItem.name,
value: [
index,
baseTime,
endTime,
duration
],
itemStyle: {
normal: {
color: typeItem.color
}
}
};
datatemp.push(data);
baseTime += Math.round(Math.random() * 2000);
}
//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({
// startTime: startTime,
// data: data
//}));
//alert(JSON.stringify(data));
function renderItem(params, api) {
//alert(JSON.stringify(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.1;//控制矩形的高度
//这里需要改，从0开始
if (params.seriesName == types[0].name)
return {
type: 'circle',
shape: {
cx: start[0],
cy: start[1],
r: 5
},
style: {
fill: 'green'
}
};
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,
style: api.style()
};
}
option = {
tooltip: {
formatter: function (params) {
//alert(JSON.stringify(params))
return params.marker + "<a href='#' onclick='Test()'>aaa<a/>" + categories[params.value[0]] + params.name + params.value[3] + ' 天';
}
},
//巡检
//dimensions: ['设备名称', '设备状态', '开始日期'],
// 表示给 维度0，维度1，维度2，维度3
dimensions: ['设备名称', '设备状态', '开始日期', '结束日期'],
title: {
text: '设备运行状态',
left: 'center'
},
tooltip: { //==============显示鼠标移入的显示
triggerOn: 'click', //点击 mousemove
enterable: true,
hideDelay: 50,
padding: 0,
confine: true,
formatter: function (params, ticket, callback) {
//if (params.dataType === 'node') {
var html = '';
html += '<div class="dialogShowR" v-scrollBar>'
html += '<div>服务名称：<a href="custom2.html" target="_blank">租赁保证金</a></div>'
html += '<div>协议类型：http</div>'
html += '<div>监听端口号：<span onclick="TestA()" style="color:blue;">8089</span></div>'
html += '<div>服务审批状态：发布-待审核</div>'
html += '<div>服务版本号：1.1</div>'
html += '<div>服务接口数：43</div>'
html += '<div>最后编辑时间：2018-10-11 12:00:00</div>'
html += '<div class="desc">简要描述：<p>针对境外的存款人</p></div>'
html += '<div class="desc">服务描述：<p>针对</p></div>'
html += '<div>开始时间：' + new Date(params.value[1]) + '---结束时间：' + new Date(params.value[2]) + '</div>'
html += '<div>类型：' + params.name + '</div>'
html += '</div>'
return html;
//} else if (params.dataType === 'edge') {
// var html1 = '';
// html1 += '<div class="dialogShow"><h5>服务源代码为：' + params.data.source + '</h5></div>';
// return html1;
//}
}
},
color: colorData,
legend: {
padding: 80, // [5, 10, 15, 20]
orient: 'vertical',
left: 'right',
// name强制设置图形为圆。icon，textStyle设置文本为红色
data: [{ name: '巡检', icon: 'circle', textStyle: { color: 'black' } },
{ name: '正常', icon: 'rectangle', textStyle: { color: 'black' } },
{ name: '异常', icon: 'rectangle', textStyle: { color: 'black' } }
]
},
dataZoom: [{
type: 'slider',
disabled: false,
filterMode: 'empty',
showDataShadow: true,
//dataBackground: { //数据阴影的样式。
// lineStyle: [
// {
// type: 'linear',
// x: 0,
// y: 0,
// x2: 0,
// y2: 1,
// colorStops: [{
// offset: 0, color: 'red' // 0% 处的颜色
// }, {
// offset: 1, color: 'blue' // 100% 处的颜色
// }],
// global: false // 缺省为 false
// }
// ], //阴影的线条样式
// areaStyle: myareaStyle, //阴影的填充样式
//},
showDetail: true,
top: 400,
height: 8,
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: 15,
handleStyle: {
shadowBlur: 6,
shadowOffsetX: 1,
shadowOffsetY: 2,
shadowColor: 'white'
},
//labelFormatter: function (val) {
// return val;
// //return (val - startTime).toFixed(0) + ' ms';
//}
},
{
type: 'inside',
filterMode: 'weakFilter'
}],
//visualMap: {
// top: 60,
// right: 60,
// pieces: [
// {
// value: 3, label: '巡检',
// color: 'green'
// },
// {
// value: 1, label: '正常',
// color: 'blue'
// },
// {
// value: 2, label: '异常',
// color: 'red'
// }
// ],
// outOfRange: {
// color: '#999'
// }
//},
grid: {
height: 300
},
xAxis: {
type: 'time'
//maxInterval: 3600 * 24 * 1000,
//min: dataMin.getTime(),
//max: dataMax.getTime()
//,
//interval: (dataMax.getTime() - dataMin.getTime()) / 12,
//axisLabel: {
// show: true
//},
//axisLine: { show: false },
//splitNumber: 12,
//splitLine: {
// show: true,
//},
//realtime: true,
min: startTime,
scale: true,
//axisLabel: {
// //formatter: function (val) {
// // return (val - startTime) + ' ms';
// //},
// formatter: function (value, index) {
// // 格式化成月/日，只在第一个刻度显示年份
// var date = new Date(value);
// var texts = [(date.getMonth() + 1), date.getDate()];
// if (index === 0) {
// texts.unshift(date.getYear());
// }
// return texts.join('/');
// },
// showMinLabel: true,
// showMaxLabel: true
//}
},
yAxis: {
data: categories
},
series: [
{
type: 'custom',
name: "巡检",
renderItem: renderItem,
itemStyle: { normal: { opacity: 0.8 } },
encode: { x: [1, 2], y: 0 }, data: dataGreen
},
{
type: 'custom',
name: "正常",
renderItem: renderItem,
itemStyle: { normal: { opacity: 0.8 } },
encode: { x: [1, 2], y: 0 },
data: dataBlue
},
{
type: 'custom',
name: "异常",
renderItem: renderItem,
itemStyle: { normal: { opacity: 0.8 } },
encode: { x: [1, 2], y: 0 },
data: dataRed
}
]
};
testHelper.createChart(echarts, 'profile', option);
});
function TestA() {
alert("TestA 弹出层");
}
</script>
</body>
</html>
所引用的JS贴上
<script src="lib/esl.js"></script>
<script src="lib/config.js"></script>
<script src="lib/testHelper.js"></script>
<meta name="viewport" content="width=device-width, initial-scale=1" />
<link rel="stylesheet" href="lib/reset.css" />
var define,require,esl;!function(n){function e(n,e){function r(n){0===n.indexOf(".")&&i.push(n)}var i=[];if("string"==typeof n?r(n):$(n,function(n){r(n)}),i.length>0)throw new Error("[REQUIRE_FATAL]Relative ID is not allowed in global require: "+i.join(", "));var o=C.waitSeconds;return o&&n instanceof Array&&(D&&clearTimeout(D),D=setTimeout(t,1e3*o)),_(n,e)}function t(){function n(a,u){if(!o[a]&&!l(a,N)){o[a]=1,l(a,L)||r[a]||(r[a]=1,e.push(a));var f=T[a];f?u&&(r[a]||(r[a]=1,e.push(a)),$(f.depMs,function(e){n(e.absId,e.hard)})):i[a]||(i[a]=1,t.push(a))}}var e=[],t=[],r={},i={},o={};for(var a in F)n(a,1);if(e.length||t.length)throw new Error("[MODULE_TIMEOUT]Hang( "+(e.join(", ")||"none")+" ) Miss( "+(t.join(", ")||"none")+" )")}function r(n){$(H,function(e){a(n,e.deps,e.factory)}),H.length=0,u(n)}function i(n,e,t){if(null==t&&(null==e?(t=n,n=null):(t=e,e=null,n instanceof Array&&(e=n,n=null))),null!=t){var r=window.opera;if(!n&&document.attachEvent&&(!r||"[object Opera]"!==r.toString())){var i=S();n=i&&i.getAttribute("data-require-id")}n?a(n,e,t):H[0]={deps:e,factory:t}}}function o(){var n=C.config[this.id];return n&&"object"==typeof n?n:{}}function a(n,e,t){T[n]||(T[n]={id:n,depsDec:e,deps:e||["require","exports","module"],factoryDeps:[],factory:t,exports:{},config:o,state:z,require:w(n),depMs:[],depMkv:{},depRs:[],depPMs:[]})}function u(n){var e=T[n];if(e&&!l(n,B)){var t=e.deps,r=e.factory,i=0;"function"==typeof r&&(i=Math.min(r.length,t.length),!e.depsDec&&r.toString().replace(/(\/\*([\s\S]*?)\*\/|([^:]|^)\/\/(.*)$)/gm,"").replace(/require\(\s*(['"'])([^'"]+)\1\s*\)/g,function(n,e,r){t.push(r)}));var o=[];$(t,function(t,r){var a,u,f=I(t),c=q(f.mod,n);c&&!P[c]?(f.res&&(u={id:t,mod:c,res:f.res},F[c]=1,e.depPMs.push(c),e.depRs.push(u)),a=e.depMkv[c],a||(a={id:f.mod,absId:c,hard:i>r},e.depMs.push(a),e.depMkv[c]=a,o.push(c))):a={absId:c},i>r&&e.factoryDeps.push(u||a)}),e.state=B,s(n),m(o)}}function f(){for(var n in F)c(n),d(n)}function c(n){function e(n){if(!l(n,B))return!1;if(l(n,L)||t[n])return!0;t[n]=1;var r=T[n],i=!0;return $(r.depMs,function(n){return i=e(n.absId)}),i&&$(r.depRs,function(n){return i=!(!n.absId||!l(n.absId,N))}),i&&(r.state=L),i}var t={};e(n)}function s(e){function t(){if(!r&&i.state===L){r=1;var t=1,o=[];if($(i.factoryDeps,function(n){var e=n.absId;return P[e]||(d(e),l(e,N))?void o.push(e):(t=0,!1)}),t){try{var a=p(o,{require:i.require,exports:i.exports,module:i}),u=i.factory,f="function"==typeof u?u.apply(n,a):u;null!=f&&(i.exports=f),i.invokeFactory=null,delete F[e]}catch(c){if(r=0,/^\[MODULE_MISS\]"([^"]+)/.test(c.message)){var s=i.depMkv[RegExp.$1];return void(s&&(s.hard=1))}throw c}g(e)}}}var r,i=T[e];i.invokeFactory=t,$(i.depPMs,function(n){v(n,function(){$(i.depRs,function(t){t.absId||t.mod!==n||(t.absId=q(t.id,e),m([t.absId],f))})})})}function l(n,e){return T[n]&&T[n].state>=e}function d(n){var e=T[n];e&&e.invokeFactory&&e.invokeFactory()}function p(n,e){var t=[];return $(n,function(n,r){t[r]=e[n]||h(n)}),t}function v(n,e){if(l(n,N))return void e();var t=Q[n];t||(t=Q[n]=[]),t.push(e)}function g(n){var e=Q[n]||[],t=T[n];t.state=N;for(var r=e.length;r--;)e[r]();e.length=0,delete Q[n]}function h(n){return l(n,N)?T[n].exports:null}function m(e,t,r,i){function o(){if(!a){var r=1;$(e,function(n){return P[n]?void 0:r=!!l(n,N)}),r&&(a=1,"function"==typeof t&&t.apply(n,p(e,P)))}}if("string"==typeof e){if(d(e),!l(e,N))throw new Error('[MODULE_MISS]"'+e+'" is not exists!');return h(e)}i=i||{};var a=0;e instanceof Array&&(o(),a||($(e,function(n){P[n]||l(n,N)||(v(n,o),i[n]||(n.indexOf("!")>0?b:y)(n,r),u(n))}),f()))}function y(n){function e(){var e=t.readyState;if("undefined"==typeof e||/^(loaded|complete)$/.test(e)){t.onload=t.onreadystatechange=null,t=null,r(n);for(var i in F)u(i);f()}}if(!G[n]&&!T[n]){G[n]=1;var t=document.createElement("script");t.setAttribute("data-require-id",n),t.src=E(n+".js"),t.async=!0,t.readyState?t.onreadystatechange=e:t.onload=e,U(t)}}function b(n,e){function t(e){u.exports=e||!0,g(n)}function i(r){var i=e?T[e].require:_;r.load(a.res,i,t,o.call({id:n}))}if(!T[n]){var a=I(n),u={id:n,state:B};T[n]=u,t.fromText=function(n,e){F[n]=1,new Function(e)(),r(n)},i(h(a.mod))}}function M(n,e){var t=R(n,1,e);return t.sort(j),t}function k(){C.baseUrl=C.baseUrl.replace(/\/$/,"")+"/",J=M(C.paths),V=M(C.map,1),$(V,function(n){n.v=M(n.v)}),K=[],$(C.packages,function(n){var e=n;"string"==typeof n&&(e={name:n.split("/")[0],location:n,main:"main"}),e.location=e.location||e.name,e.main=(e.main||"main").replace(/\.js$/i,""),e.reg=O(e.name),K.push(e)}),K.sort(j),W=M(C.urlArgs,1),X=M(C.noRequests),$(X,function(n){var e=n.v,t={};n.v=t,e instanceof Array||(e=[e]),$(e,function(n){t[n]=1})})}function x(n,e,t){$(e,function(e){return e.reg.test(n)?(t(e.v,e.k,e),!1):void 0})}function E(n){var e=/(\.[a-z0-9]+)$/i,t=/(\?[^#]*)$/,r="",i=n,o="";t.test(n)&&(o=RegExp.$1,n=n.replace(t,"")),e.test(n)&&(r=RegExp.$1,i=n.replace(e,""));var a,u=i;return x(i,J,function(n,e){u=u.replace(e,n),a=1}),a||x(i,K,function(n,e,t){u=u.replace(t.name,t.location)}),/^([a-z]{2,10}:\/)?\//i.test(u)||(u=C.baseUrl+u),u+=r+o,x(i,W,function(n){u+=(u.indexOf("?")>0?"&":"?")+n}),u}function w(n){function e(e,r){if("string"==typeof e)return t[e]||(t[e]=m(q(e,n))),t[e];if(e instanceof Array){var i=[],o=[],a=[];$(e,function(e,t){var r=I(e),u=q(r.mod,n);o.push(u),F[u]=1,r.res?(i.push(u),a[t]=null):a[t]=u});var u={};$(o,function(n){var e;x(n,X,function(n){e=n}),e&&(e["*"]?u[n]=1:$(o,function(t){return e[t]?(u[n]=1,!1):void 0}))}),m(o,function(){$(a,function(t,r){null==t&&(a[r]=q(e[r],n))}),m(a,r,n)},n,u)}}var t={};return e.toUrl=function(e){return E(q(e,n))},e}function q(n,e){if(!n)return"";e=e||"";var t=I(n);if(!t)return n;var r=t.res,i=A(t.mod,e);if($(K,function(n){var e=n.name;return e===i?(i=e+"/"+n.main,!1):void 0}),x(e,V,function(n){x(i,n,function(n,e){i=i.replace(e,n)})}),r){var o=h(i);r=o.normalize?o.normalize(r,function(n){return q(n,e)}):q(r,e),i+="!"+r}return i}function A(n,e){if(0===n.indexOf(".")){var t=e.split("/"),r=n.split("/"),i=t.length-1,o=r.length,a=0,u=0;n:for(var f=0;o>f;f++)switch(r[f]){case"..":if(!(i>a))break n;a++,u++;break;case".":u++;break;default:break n}return t.length=i-a,r=r.slice(u),t.concat(r).join("/")}return n}function I(n){var e=n.split("!");return e[0]?{mod:e[0],res:e[1]}:null}function R(n,e,t){var r=[];for(var i in n)if(n.hasOwnProperty(i)){var o={k:i,v:n[i]};r.push(o),e&&(o.reg="*"===i&&t?/^/:O(i))}return r}function S(){if(Y)return Y;if(Z&&"interactive"===Z.readyState)return Z;for(var n=document.getElementsByTagName("script"),e=n.length;e--;){var t=n[e];if("interactive"===t.readyState)return Z=t,t}}function U(n){Y=n,ee?ne.insertBefore(n,ee):ne.appendChild(n),Y=null}function O(n){return new RegExp("^"+n+"(/|$)")}function $(n,e){if(n instanceof Array)for(var t=0,r=n.length;r>t&&e(n[t],t)!==!1;t++);}function j(n,e){var t=n.k||n.name,r=e.k||e.name;return"*"===r?-1:"*"===t?1:r.length-t.length}var D,T={},F={},z=1,B=2,L=3,N=4,P={require:e,exports:1,module:1},_=w(),C={baseUrl:"./",paths:{},config:{},map:{},packages:[],waitSeconds:0,noRequests:{},urlArgs:{}};e.version="1.8.8",e.loader="esl",e.toUrl=_.toUrl;var H=[];i.amd={};var Q={},G={};e.config=function(n){if(n){for(var e in C){var t=n[e],r=C[e];if(t)if("urlArgs"===e&&"string"==typeof t)C.urlArgs["*"]=t;else if(r instanceof Array)r.push.apply(r,t);else if("object"==typeof r)for(var i in t)r[i]=t[i];else C[e]=t}k()}},k();var J,K,V,W,X,Y,Z,ne=document.getElementsByTagName("head")[0],ee=document.getElementsByTagName("base")[0];ee&&(ne=ee.parentNode),define||(define=i,require||(require=e),esl=e)}(this);
/*
* Licensed to the Apache Software Foundation (ASF) under one
* or more contributor license agreements. See the NOTICE file
* distributed with this work for additional information
* regarding copyright ownership. The ASF licenses this file
* to you under the Apache License, Version 2.0 (the
* "License"); you may not use this file except in compliance
* with the License. You may obtain a copy of the License at
*
* http://www.apache.org/licenses/LICENSE-2.0
*
* Unless required by applicable law or agreed to in writing,
* software distributed under the License is distributed on an
* "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY
* KIND, either express or implied. See the License for the
* specific language governing permissions and limitations
* under the License.
*/
(function (context) {
var DEFAULT_DATA_TABLE_LIMIT = 8;
var objToString = Object.prototype.toString;
var TYPED_ARRAY = {
'[object Int8Array]': 1,
'[object Uint8Array]': 1,
'[object Uint8ClampedArray]': 1,
'[object Int16Array]': 1,
'[object Uint16Array]': 1,
'[object Int32Array]': 1,
'[object Uint32Array]': 1,
'[object Float32Array]': 1,
'[object Float64Array]': 1
};
var testHelper = {};
/**
* @param {Object} opt
* @param {string|Array.<string>} [opt.title] If array, each item is on a single line.
* Can use '**abc**', means <strong>abc</strong>.
* @param {Option} opt.option
* @param {Object} [opt.info] info object to display.
* @param {string} [opt.infoKey='option']
* @param {Object|Array} [opt.dataTable]
* @param {Array.<Object|Array>} [opt.dataTables] Multiple dataTables.
* @param {number} [opt.dataTableLimit=DEFAULT_DATA_TABLE_LIMIT]
* @param {number} [opt.width]
* @param {number} [opt.height]
* @param {boolean} [opt.draggable]
* @param {boolean} [opt.lazyUpdate]
* @param {boolean} [opt.notMerge]
* @param {Array.<Object>|Object} [opt.button] {text: ..., onClick: ...}, or an array of them.
* @param {Array.<Object>|Object} [opt.buttons] {text: ..., onClick: ...}, or an array of them.
* @param {boolean} [opt.recordCanvas] 'ut/lib/canteen.js' is required.
*/
testHelper.create = function (echarts, domOrId, opt) {
var dom = getDom(domOrId);
if (!dom) {
return;
}
var title = document.createElement('div');
var left = document.createElement('div');
var chartContainer = document.createElement('div');
var buttonsContainer = document.createElement('div');
var dataTableContainer = document.createElement('div');
var infoContainer = document.createElement('div');
var recordCanvasContainer = document.createElement('div');
title.setAttribute('title', dom.getAttribute('id'));
title.className = 'test-title';
dom.className = 'test-chart-block';
left.className = 'test-chart-block-left';
chartContainer.className = 'test-chart';
buttonsContainer.className = 'test-buttons';
dataTableContainer.className = 'test-data-table';
infoContainer.className = 'test-info';
recordCanvasContainer.className = 'record-canvas';
if (opt.info) {
dom.className += ' test-chart-block-has-right';
infoContainer.className += ' test-chart-block-right';
}
left.appendChild(recordCanvasContainer);
left.appendChild(buttonsContainer);
left.appendChild(dataTableContainer);
left.appendChild(chartContainer);
dom.appendChild(infoContainer);
dom.appendChild(left);
dom.parentNode.insertBefore(title, dom);
var chart;
var optTitle = opt.title;
if (optTitle) {
if (optTitle instanceof Array) {
optTitle = optTitle.join('\n');
}
title.innerHTML = '<div class="test-title-inner">'
+ testHelper.encodeHTML(optTitle)
.replace(/\*\*([^*]+?)\*\*/g, '<strong>$1</strong>')
.replace(/\n/g, '<br>')
+ '</div>';
}
if (opt.option) {
chart = testHelper.createChart(echarts, chartContainer, opt.option, opt, opt.setOptionOpts);
}
var dataTables = opt.dataTables;
if (!dataTables && opt.dataTable) {
dataTables = [opt.dataTable];
}
if (dataTables) {
var tableHTML = [];
for (var i = 0; i < dataTables.length; i++) {
tableHTML.push(createDataTableHTML(dataTables[i], opt));
}
dataTableContainer.innerHTML = tableHTML.join('');
}
var buttons = opt.buttons || opt.button;
if (!(buttons instanceof Array)) {
buttons = buttons ? [buttons] : [];
}
if (buttons.length) {
for (var i = 0; i < buttons.length; i++) {
var btnDefine = buttons[i];
if (btnDefine) {
var btn = document.createElement('button');
btn.innerHTML = testHelper.encodeHTML(btnDefine.name || btnDefine.text || 'button');
btn.addEventListener('click', btnDefine.onClick || btnDefine.onclick);
buttonsContainer.appendChild(btn);
}
}
}
if (opt.info) {
infoContainer.innerHTML = createObjectHTML(opt.info, opt.infoKey || 'option');
}
if (opt.recordCanvas) {
recordCanvasContainer.innerHTML = ''
+ '<button>Show Canvas Record</button>'
+ '<button>Clear Canvas Record</button>'
+ '<div class="content-area"><textarea></textarea><br><button>Close</button></div>';
var buttons = recordCanvasContainer.getElementsByTagName('button');
var canvasRecordButton = buttons[0];
var clearButton = buttons[1];
var closeButton = buttons[2];
var recordArea = recordCanvasContainer.getElementsByTagName('textarea')[0];
var contentAraa = recordArea.parentNode;
canvasRecordButton.addEventListener('click', function () {
var content = [];
eachCtx(function (zlevel, ctx) {
content.push('Layer zlevel: ' + zlevel, '\n\n');
if (typeof ctx.stack !== 'function') {
alert('Missing: <script src="ut/lib/canteen.js"></script>');
return;
}
var stack = ctx.stack();
for (var i = 0; i < stack.length; i++) {
var line = stack[i];
content.push(JSON.stringify(line), '\n');
}
});
contentAraa.style.display = 'block';
recordArea.value = content.join('');
});
clearButton.addEventListener('click', function () {
eachCtx(function (zlevel, ctx) {
ctx.clear();
});
recordArea.value = 'Cleared.';
});
closeButton.addEventListener('click', function () {
contentAraa.style.display = 'none';
});
}
function eachCtx(cb) {
var layers = chart.getZr().painter.getLayers();
for (var zlevel in layers) {
if (layers.hasOwnProperty(zlevel)) {
var layer = layers[zlevel];
var canvas = layer.dom;
var ctx = canvas.getContext('2d');
cb(zlevel, ctx);
}
}
}
return chart;
};
/**
* @param {ECharts} echarts
* @param {HTMLElement|string} domOrId
* @param {Object} option
* @param {boolean|number} opt If number, means height
* @param {boolean} opt.lazyUpdate
* @param {boolean} opt.notMerge
* @param {number} opt.width
* @param {number} opt.height
* @param {boolean} opt.draggable
*/
testHelper.createChart = function (echarts, domOrId, option, opt) {
if (typeof opt === 'number') {
opt = {height: opt};
}
else {
opt = opt || {};
}
var dom = getDom(domOrId);
if (dom) {
if (opt.width != null) {
dom.style.width = opt.width + 'px';
}
if (opt.height != null) {
dom.style.height = opt.height + 'px';
}
var chart = echarts.init(dom);
if (opt.draggable) {
window.draggable.init(dom, chart, {throttle: 70, addPlaceholder: true});
}
option && chart.setOption(option, {
lazyUpdate: opt.lazyUpdate,
notMerge: opt.notMerge
});
testHelper.resizable(chart);
return chart;
}
};
testHelper.resizable = function (chart) {
if (window.attachEvent) {
window.attachEvent('onresize', chart.resize);
} else if (window.addEventListener) {
window.addEventListener('resize', chart.resize, false);
}
};
// Clean params specified by `cleanList` and seed a param specifid by `newVal` in URL.
testHelper.setURLParam = function (cleanList, newVal) {
var params = getParamListFromURL();
for (var i = params.length - 1; i >= 0; i--) {
for (var j = 0; j < cleanList.length; j++) {
if (params[i] === cleanList[j]) {
params.splice(i, 1);
}
}
}
newVal && params.push(newVal);
params.sort();
location.search = params.join('&');
};
// Whether has param `val` in URL.
testHelper.hasURLParam = function (val) {
var params = getParamListFromURL();
for (var i = params.length - 1; i >= 0; i--) {
if (params[i] === val) {
return true;
}
}
return false;
};
// Nodejs `path.resolve`.
testHelper.resolve = function () {
var resolvedPath = '';
var resolvedAbsolute;
for (var i = arguments.length - 1; i >= 0 && !resolvedAbsolute; i--) {
var path = arguments[i];
if (path) {
resolvedPath = path + '/' + resolvedPath;
resolvedAbsolute = path[0] === '/';
}
}
if (!resolvedAbsolute) {
throw new Error('At least one absolute path should be input.');
}
// Normalize the path
resolvedPath = normalizePathArray(resolvedPath.split('/'), false).join('/');
return '/' + resolvedPath;
};
testHelper.encodeHTML = function (source) {
return String(source)
.replace(/&/g, '&')
.replace(/</g, '<')
.replace(/>/g, '>')
.replace(/"/g, '"')
.replace(/'/g, ''');
};
/**
* @public
* @return {string} Current url dir.
*/
testHelper.dir = function () {
return location.origin + testHelper.resolve(location.pathname, '..');
};
/**
* Not accurate.
* @param {*} type
* @return {string} 'function', 'array', 'typedArray', 'regexp',
* 'date', 'object', 'boolean', 'number', 'string'
*/
var getType = testHelper.getType = function (value) {
var type = typeof value;
var typeStr = objToString.call(value);
return !!TYPED_ARRAY[objToString.call(value)]
? 'typedArray'
: typeof type === 'function'
? 'function'
: typeStr === '[object Array]'
? 'array'
: typeStr === '[object Number]'
? 'number'
: typeStr === '[object Boolean]'
? 'boolean'
: typeStr === '[object String]'
? 'string'
: typeStr === '[object RegExp]'
? 'regexp'
: typeStr === '[object Date]'
? 'date'
: !!value && type === 'object'
? 'object'
: null;
};
/**
* JSON.stringify(obj, null, 2) will vertically layout array, which takes too much space.
* Can print like:
* [
* {name: 'xxx', value: 123},
* {name: 'xxx', value: 123},
* {name: 'xxx', value: 123}
* ]
* {
* arr: [33, 44, 55],
* str: 'xxx'
* }
*
* @param {*} object
* @param {opt|string} [opt] If string, means key.
* @param {string} [opt.key=''] Top level key, if given, print like: 'someKey: [asdf]'
* @param {string} [opt.objectLineBreak=true]
* @param {string} [opt.arrayLineBreak=false]
* @param {string} [opt.indent=4]
* @param {string} [opt.lineBreak='\n']
* @param {string} [opt.quotationMark='\'']
*/
var printObject = testHelper.printObject = function (obj, opt) {
opt = typeof opt === 'string'
? {key: opt}
: (opt || {});
var indent = opt.indent != null ? opt.indent : 4;
var lineBreak = opt.lineBreak != null ? opt.lineBreak : '\n';
var quotationMark = opt.quotationMark != null ? opt.quotationMark : '\'';
return doPrint(obj, opt.key, 0).str;
function doPrint(obj, key, depth) {
var codeIndent = (new Array(depth * indent + 1)).join(' ');
var subCodeIndent = (new Array((depth + 1) * indent + 1)).join(' ');
var hasLineBreak = false;
var preStr = key != null ? (key + ': ' ) : '';
var str;
var objType = getType(obj);
switch (objType) {
case 'function':
hasLineBreak = true;
str = preStr + quotationMark + obj + quotationMark;
break;
case 'regexp':
case 'date':
str = preStr + quotationMark + obj + quotationMark;
break;
case 'array':
case 'typedArray':
hasLineBreak = opt.arrayLineBreak != null ? opt.arrayLineBreak : false;
// If no break line in array, print in single line, like [12, 23, 34].
// else, each item takes a line.
var childBuilder = [];
for (var i = 0, len = obj.length; i < len; i++) {
var subResult = doPrint(obj[i], null, depth + 1);
childBuilder.push(subResult.str);
if (subResult.hasLineBreak) {
hasLineBreak = true;
}
}
var tail = hasLineBreak ? lineBreak : '';
var delimiter = ',' + (hasLineBreak ? (lineBreak + subCodeIndent) : ' ');
var subPre = hasLineBreak ? subCodeIndent : '';
var endPre = hasLineBreak ? codeIndent : '';
str = ''
+ preStr + '[' + tail
+ subPre + childBuilder.join(delimiter) + tail
+ endPre + ']';
break;
case 'object':
hasLineBreak = opt.objectLineBreak != null ? opt.objectLineBreak : true;
var childBuilder = [];
for (var i in obj) {
if (obj.hasOwnProperty(i)) {
var subResult = doPrint(obj[i], i, depth + 1);
childBuilder.push(subResult.str);
if (subResult.hasLineBreak) {
hasLineBreak = true;
}
}
}
str = ''
+ preStr + '{' + (hasLineBreak ? lineBreak : '')
+ (childBuilder.length
? (hasLineBreak ? subCodeIndent : '') + childBuilder.join(',' + (hasLineBreak ? lineBreak + subCodeIndent: ' ')) + (hasLineBreak ? lineBreak: '')
: ''
)
+ (hasLineBreak ? codeIndent : '') + '}';
break;
case 'boolean':
case 'number':
str = preStr + obj + '';
break;
case 'string':
str = preStr + quotationMark + obj + quotationMark;
break;
default:
str = preStr + obj + '';
}
return {
str: str,
hasLineBreak: hasLineBreak
};
}
};
function createDataTableHTML(data, opt) {
var sourceFormat = detectSourceFormat(data);
var dataTableLimit = opt.dataTableLimit || DEFAULT_DATA_TABLE_LIMIT;
if (!sourceFormat) {
return '';
}
var html = ['<table><tbody>'];
if (sourceFormat === 'arrayRows') {
for (var i = 0; i < data.length && i <= dataTableLimit; i++) {
var line = data[i];
var htmlLine = ['<tr>'];
for (var j = 0; j < line.length; j++) {
var val = i === dataTableLimit ? '...' : line[j];
htmlLine.push('<td>' + testHelper.encodeHTML(val) + '</td>');
}
htmlLine.push('</tr>');
html.push(htmlLine.join(''));
}
}
else if (sourceFormat === 'objectRows') {
for (var i = 0; i < data.length && i <= dataTableLimit; i++) {
var line = data[i];
var htmlLine = ['<tr>'];
for (var key in line) {
if (line.hasOwnProperty(key)) {
var keyText = i === dataTableLimit ? '...' : key;
htmlLine.push('<td class="test-data-table-key">' + testHelper.encodeHTML(keyText) + '</td>');
var val = i === dataTableLimit ? '...' : line[key];
htmlLine.push('<td>' + testHelper.encodeHTML(val) + '</td>');
}
}
htmlLine.push('</tr>');
html.push(htmlLine.join(''));
}
}
else if (sourceFormat === 'keyedColumns') {
for (var key in data) {
var htmlLine = ['<tr>'];
htmlLine.push('<td class="test-data-table-key">' + testHelper.encodeHTML(key) + '</td>');
if (data.hasOwnProperty(key)) {
var col = data[key] || [];
for (var i = 0; i < col.length && i <= dataTableLimit; i++) {
var val = i === dataTableLimit ? '...' : col[i];
htmlLine.push('<td>' + testHelper.encodeHTML(val) + '</td>');
}
}
htmlLine.push('</tr>');
html.push(htmlLine.join(''));
}
}
html.push('</tbody></table>');
return html.join('');
}
function detectSourceFormat(data) {
if (data.length) {
for (var i = 0, len = data.length; i < len; i++) {
var item = data[i];
if (item == null) {
continue;
}
else if (item.length) {
return 'arrayRows';
}
else if (typeof data === 'object') {
return 'objectRows';
}
}
}
else if (typeof data === 'object') {
return 'keyedColumns';
}
}
function createObjectHTML(obj, key) {
return [
'<pre class="test-print-object">',
testHelper.encodeHTML(printObject(obj, key)),
'</pre>'
].join('');
}
var getDom = testHelper.getDom = function (domOrId) {
return getType(domOrId) === 'string' ? document.getElementById(domOrId) : domOrId;
}
// resolves . and .. elements in a path array with directory names there
// must be no slashes or device names (c:\) in the array
// (so also no leading and trailing slashes - it does not distinguish
// relative and absolute paths)
function normalizePathArray(parts, allowAboveRoot) {
var res = [];
for (var i = 0; i < parts.length; i++) {
var p = parts[i];
// ignore empty parts
if (!p || p === '.') {
continue;
}
if (p === '..') {
if (res.length && res[res.length - 1] !== '..') {
res.pop();
} else if (allowAboveRoot) {
res.push('..');
}
} else {
res.push(p);
}
}
return res;
}
function getParamListFromURL() {
var params = location.search.replace('?', '');
return params ? params.split('&') : [];
}
context.testHelper = testHelper;
})(window);
/*
* Licensed to the Apache Software Foundation (ASF) under one
* or more contributor license agreements. See the NOTICE file
* distributed with this work for additional information
* regarding copyright ownership. The ASF licenses this file
* to you under the Apache License, Version 2.0 (the
* "License"); you may not use this file except in compliance
* with the License. You may obtain a copy of the License at
*
* http://www.apache.org/licenses/LICENSE-2.0
*
* Unless required by applicable law or agreed to in writing,
* software distributed under the License is distributed on an
* "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY
* KIND, either express or implied. See the License for the
* specific language governing permissions and limitations
* under the License.
*/
html,
body,
#main,
body > .main {
width: 100%;
height: 100%;
margin: 0;
padding: 0;
font-family: arial;
}
.test-title {
padding: 20px;
background: #242424;
color: #ddd;
font-weight: normal;
text-align: center;
font-size: 16px;
}
.test-title-inner {
display: inline-block;
*display: inline;
zoom: 1;
text-align: left;
}
.test-title strong {
color: yellow;
font-weight: 700;
text-shadow: -1px 0 #000, 0 1px #000, 1px 0 #000, 0 -1px #000;
padding-left: 2px;
padding-right: 2px;
}
.test-buttons button {
margin: 10px 5px;
}
.test-chart-block {
position: relative;
}
.test-chart-block-has-right {
overflow: hidden;
}
.test-chart-block-has-right .test-chart-block-right {
position: absolute;
right: 10px;
background: #fff;
z-index: 99;
width: 300px;
max-height: 99%;
border-left: 1px solid #ddd;
border-bottom: 1px solid #ddd;
}
.test-chart-block-has-right .test-chart-block-left {
margin-right: 320px;
}
.test-info {
padding-left: 10px;
overflow: auto;
}
pre.test-print-object {
font-size: 12px;
font-family: Menlo, Monaco, 'Courier New', monospace;
}
.test-chart {
height: 400px;
}
.test-data-table {
position: relative;
text-align: center;
}
.test-data-table table {
display: inline-block;
vertical-align: top;
border: 1px solid #ccc;
border-spacing: 0;
margin: 30px 15px;
}
.test-data-table td {
border: 1px solid #ccc;
color: #777;
padding: 3px 5px;
font-size: 13px;
}
td.test-data-table-key {
font-size: 12px;
color: rgb(69, 162, 238)
}
.record-canvas .content-area {
display: none;
position: absolute;
background: #fff;
left: 10px;
top: 20px;
border: 2px solid #000;
padding: 10px;
z-index: 9999;
box-shadow: 0 0 3px #000;
}
.record-canvas textarea {
width: 300px;
height: 500px;
}
1977
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
