639 lines
24 KiB
HTML
Generated
639 lines
24 KiB
HTML
Generated
<!DOCTYPE html>
|
|
<!--
|
|
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">
|
|
<meta name="viewport" content="width=device-width, initial-scale=1" />
|
|
<script src="lib/simpleRequire.js"></script>
|
|
<script src="lib/config.js"></script>
|
|
<script src="lib/jquery.min.js"></script>
|
|
<script src="lib/facePrint.js"></script>
|
|
<script src="lib/testHelper.js"></script>
|
|
<!-- <script src="ut/lib/canteen.js"></script> -->
|
|
<link rel="stylesheet" href="lib/reset.css" />
|
|
</head>
|
|
<body>
|
|
<style>
|
|
</style>
|
|
|
|
|
|
|
|
<div id="main0"></div>
|
|
<div id="main1"></div>
|
|
<div id="main2"></div>
|
|
<div id="main3"></div>
|
|
<div id="main4"></div>
|
|
<div id="main5"></div>
|
|
<div id="main6"></div>
|
|
<div id="main7"></div>
|
|
<div id="main8"></div>
|
|
<div id="main9"></div>
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
<script>
|
|
require(['echarts'/*, 'map/js/china' */], function (echarts) {
|
|
var option = {
|
|
tooltip: {
|
|
formatter: '{a} <br/>{b} : {c}%'
|
|
},
|
|
toolbox: {
|
|
feature: {
|
|
restore: {},
|
|
saveAsImage: {}
|
|
}
|
|
},
|
|
series: [
|
|
{
|
|
name: '业务指标',
|
|
type: 'gauge',
|
|
anchor: {
|
|
show: true,
|
|
showAbove: true
|
|
},
|
|
detail: {formatter: '{value}%'},
|
|
data: [{value: 58.46, name: '完成率'}]
|
|
}
|
|
]
|
|
};
|
|
|
|
var chart = testHelper.create(echarts, 'main0', {
|
|
title: [
|
|
'pointer.icon: "default"',
|
|
'anchor.show: true'
|
|
],
|
|
option: option
|
|
// height: 1200,
|
|
// buttons: [{text: 'btn-txt', onclick: function () {}}],
|
|
// recordCanvas: true,
|
|
});
|
|
|
|
|
|
var option1 = {
|
|
tooltip: {
|
|
formatter: '{a} <br/>{b} : {c}%'
|
|
},
|
|
toolbox: {
|
|
feature: {
|
|
restore: {},
|
|
saveAsImage: {}
|
|
}
|
|
},
|
|
series: [
|
|
{
|
|
name: '业务指标',
|
|
type: 'gauge',
|
|
pointer: {
|
|
icon: 'path://M12.8,0.7l12,40.1H0.7L12.8,0.7z'
|
|
},
|
|
anchor: {
|
|
// show: true
|
|
},
|
|
detail: {formatter: '{value}%'},
|
|
data: [{value: 58.46, name: '完成率'}]
|
|
}
|
|
]
|
|
};
|
|
|
|
var chart1 = testHelper.create(echarts, 'main1', {
|
|
title: [
|
|
'pointer.icon: svg',
|
|
'anchor.show: false'
|
|
],
|
|
option: option1
|
|
// height: 1200,
|
|
// buttons: [{text: 'btn-txt', onclick: function () {}}],
|
|
// recordCanvas: true,
|
|
});
|
|
|
|
var option2 = {
|
|
tooltip: {
|
|
formatter: '{a} <br/>{b} : {c}%'
|
|
},
|
|
toolbox: {
|
|
feature: {
|
|
restore: {},
|
|
saveAsImage: {}
|
|
}
|
|
},
|
|
series: [
|
|
{
|
|
name: '业务指标',
|
|
type: 'gauge',
|
|
pointer: {
|
|
icon: 'path://M2.9,0.7L2.9,0.7c1.4,0,2.6,1.2,2.6,2.6v115c0,1.4-1.2,2.6-2.6,2.6l0,0c-1.4,0-2.6-1.2-2.6-2.6V3.3C0.3,1.9,1.4,0.7,2.9,0.7z',
|
|
width: 3,
|
|
length: '50%'
|
|
},
|
|
anchor: {
|
|
show: true,
|
|
size: 8,
|
|
itemStyle: {
|
|
color: '#5470c6'
|
|
}
|
|
},
|
|
detail: {formatter: '{value}%'},
|
|
data: [{value: 58.46, name: '完成率'}]
|
|
}
|
|
]
|
|
};
|
|
|
|
var chart2 = testHelper.create(echarts, 'main2', {
|
|
title: [
|
|
'pointer.icon: svg',
|
|
'anchor.show: true'
|
|
],
|
|
option: option2
|
|
// height: 1200,
|
|
// buttons: [{text: 'btn-txt', onclick: function () {}}],
|
|
// recordCanvas: true,
|
|
});
|
|
|
|
var option3 = {
|
|
tooltip: {
|
|
formatter: '{a} <br/>{b} : {c}%'
|
|
},
|
|
toolbox: {
|
|
feature: {
|
|
restore: {},
|
|
saveAsImage: {}
|
|
}
|
|
},
|
|
series: [
|
|
{
|
|
name: '业务指标',
|
|
type: 'gauge',
|
|
pointer: {
|
|
icon: 'path://M2.9,0.7L2.9,0.7c1.4,0,2.6,1.2,2.6,2.6v115c0,1.4-1.2,2.6-2.6,2.6l0,0c-1.4,0-2.6-1.2-2.6-2.6V3.3C0.3,1.9,1.4,0.7,2.9,0.7z',
|
|
width: 3,
|
|
length: '50%',
|
|
offsetCenter: [0, '8%']
|
|
},
|
|
anchor: {
|
|
show: true,
|
|
size: 8,
|
|
itemStyle: {
|
|
color: '#5470c6'
|
|
}
|
|
},
|
|
detail: {formatter: '{value}%'},
|
|
data: [{value: 58.46, name: '完成率'}]
|
|
}
|
|
]
|
|
};
|
|
|
|
var chart3 = testHelper.create(echarts, 'main3', {
|
|
title: [
|
|
'pointer.icon: svg',
|
|
'anchor.show: true',
|
|
'pointer.offsetCenter: [0, "8%"]'
|
|
],
|
|
option: option3
|
|
// height: 1200,
|
|
// buttons: [{text: 'btn-txt', onclick: function () {}}],
|
|
// recordCanvas: true,
|
|
});
|
|
|
|
var option4 = {
|
|
tooltip: {
|
|
formatter: '{a} <br/>{b} : {c}%'
|
|
},
|
|
toolbox: {
|
|
feature: {
|
|
restore: {},
|
|
saveAsImage: {}
|
|
}
|
|
},
|
|
series: [
|
|
{
|
|
name: '业务指标',
|
|
type: 'gauge',
|
|
pointer: {
|
|
icon: 'path://M2090.36389,615.30999 L2090.36389,615.30999 C2091.48372,615.30999 2092.40383,616.194028 2092.44859,617.312956 L2096.90698,728.755929 C2097.05155,732.369577 2094.2393,735.416212 2090.62566,735.56078 C2090.53845,735.564269 2090.45117,735.566014 2090.36389,735.566014 L2090.36389,735.566014 C2086.74736,735.566014 2083.81557,732.63423 2083.81557,729.017692 C2083.81557,728.930412 2083.81732,728.84314 2083.82081,728.755929 L2088.2792,617.312956 C2088.32396,616.194028 2089.24407,615.30999 2090.36389,615.30999 Z',
|
|
// width: 3,
|
|
length: '50%',
|
|
offsetCenter: [0, '8%']
|
|
},
|
|
anchor: {
|
|
show: true,
|
|
size: 8,
|
|
showAbove: true,
|
|
itemStyle: {
|
|
// borderColor: '#5470c6'
|
|
borderWidth: 1
|
|
}
|
|
},
|
|
detail: {formatter: '{value}%'},
|
|
data: [{value: 58.46, name: '完成率'}]
|
|
}
|
|
]
|
|
};
|
|
|
|
var chart4 = testHelper.create(echarts, 'main4', {
|
|
title: [
|
|
'pointer.icon: svg',
|
|
'anchor.show: true',
|
|
'pointer.offsetCenter: [0, "8%"]'
|
|
],
|
|
option: option4
|
|
// height: 1200,
|
|
// buttons: [{text: 'btn-txt', onclick: function () {}}],
|
|
// recordCanvas: true,
|
|
});
|
|
|
|
var option5 = {
|
|
tooltip: {
|
|
formatter: '{a} <br/>{b} : {c}%'
|
|
},
|
|
toolbox: {
|
|
feature: {
|
|
restore: {},
|
|
saveAsImage: {}
|
|
}
|
|
},
|
|
series: [
|
|
{
|
|
name: '业务指标',
|
|
type: 'gauge',
|
|
pointer: {
|
|
icon: 'path://M12.8,0.7l12,40.1H0.7L12.8,0.7z',
|
|
length: '15%',
|
|
width: 12,
|
|
offsetCenter: [0, '-40%']
|
|
},
|
|
anchor: {
|
|
// show: true
|
|
},
|
|
detail: {formatter: '{value}%'},
|
|
data: [{value: 58.46, name: '完成率'}]
|
|
}
|
|
]
|
|
};
|
|
|
|
var chart5 = testHelper.create(echarts, 'main5', {
|
|
title: [
|
|
'pointer.icon: svg',
|
|
'anchor.show: false'
|
|
],
|
|
option: option5
|
|
// height: 1200,
|
|
// buttons: [{text: 'btn-txt', onclick: function () {}}],
|
|
// recordCanvas: true,
|
|
});
|
|
setInterval(function () {
|
|
option5.series[0].data[0].value = (Math.random() * 100).toFixed(2) - 0;
|
|
chart5.setOption(option5, true);
|
|
}, 2000);
|
|
|
|
|
|
var option7 = {
|
|
series: [
|
|
{
|
|
name: 'hour',
|
|
type: 'gauge',
|
|
startAngle: 90,
|
|
endAngle: -270,
|
|
min: 0,
|
|
max: 12,
|
|
splitNumber: 12,
|
|
axisLine: {
|
|
lineStyle: {
|
|
width: 15,
|
|
color: [[1, 'rgba(0,0,0,0.7)']],
|
|
shadowColor: 'rgba(0, 0, 0, 0.5)',
|
|
shadowBlur: 15
|
|
}
|
|
},
|
|
splitLine: {
|
|
lineStyle: {
|
|
shadowColor: 'rgba(0, 0, 0, 0.3)',
|
|
shadowBlur: 3,
|
|
shadowOffsetX: 1,
|
|
shadowOffsetY: 2
|
|
}
|
|
},
|
|
axisLabel: {
|
|
fontSize: 50,
|
|
distance: 25,
|
|
formatter: function(value) {
|
|
if (value === 0) {
|
|
return '';
|
|
}
|
|
return value;
|
|
}
|
|
},
|
|
anchor: {
|
|
show: true,
|
|
icon: 'path://M532.8,70.8C532.8,70.8,532.8,70.8,532.8,70.8L532.8,70.8C532.7,70.8,532.8,70.8,532.8,70.8z M456.1,49.6c-2.2-6.2-8.1-10.6-15-10.6h-37.5v10.6h37.5l0,0c2.9,0,5.3,2.4,5.3,5.3c0,2.9-2.4,5.3-5.3,5.3v0h-22.5c-1.5,0.1-3,0.4-4.3,0.9c-4.5,1.6-8.1,5.2-9.7,9.8c-0.6,1.7-0.9,3.4-0.9,5.3v16h10.6v-16l0,0l0,0c0-2.7,2.1-5,4.7-5.3h10.3l10.4,21.2h11.8l-10.4-21.2h0c6.9,0,12.8-4.4,15-10.6c0.6-1.7,0.9-3.5,0.9-5.3C457,53,456.7,51.2,456.1,49.6z M388.9,92.1h11.3L381,39h-3.6h-11.3L346.8,92v0h11.3l3.9-10.7h7.3h7.7l3.9-10.6h-7.7h-7.3l7.7-21.2v0L388.9,92.1z M301,38.9h-10.6v53.1H301V70.8h28.4l3.7-10.6H301V38.9zM333.2,38.9v10.6v10.7v31.9h10.6V38.9H333.2z M249.5,81.4L249.5,81.4L249.5,81.4c-2.9,0-5.3-2.4-5.3-5.3h0V54.9h0l0,0c0-2.9,2.4-5.3,5.3-5.3l0,0l0,0h33.6l3.9-10.6h-37.5c-1.9,0-3.6,0.3-5.3,0.9c-4.5,1.6-8.1,5.2-9.7,9.7c-0.6,1.7-0.9,3.5-0.9,5.3l0,0v21.3c0,1.9,0.3,3.6,0.9,5.3c1.6,4.5,5.2,8.1,9.7,9.7c1.7,0.6,3.5,0.9,5.3,0.9h33.6l3.9-10.6H249.5z M176.8,38.9v10.6h49.6l3.9-10.6H176.8z M192.7,81.4L192.7,81.4L192.7,81.4c-2.9,0-5.3-2.4-5.3-5.3l0,0v-5.3h38.9l3.9-10.6h-53.4v10.6v5.3l0,0c0,1.9,0.3,3.6,0.9,5.3c1.6,4.5,5.2,8.1,9.7,9.7c1.7,0.6,3.4,0.9,5.3,0.9h23.4h10.2l3.9-10.6l0,0H192.7z M460.1,38.9v10.6h21.4v42.5h10.6V49.6h17.5l3.8-10.6H460.1z M541.6,68.2c-0.2,0.1-0.4,0.3-0.7,0.4C541.1,68.4,541.4,68.3,541.6,68.2L541.6,68.2z M554.3,60.2h-21.6v0l0,0c-2.9,0-5.3-2.4-5.3-5.3c0-2.9,2.4-5.3,5.3-5.3l0,0l0,0h33.6l3.8-10.6h-37.5l0,0c-6.9,0-12.8,4.4-15,10.6c-0.6,1.7-0.9,3.5-0.9,5.3c0,1.9,0.3,3.7,0.9,5.3c2.2,6.2,8.1,10.6,15,10.6h21.6l0,0c2.9,0,5.3,2.4,5.3,5.3c0,2.9-2.4,5.3-5.3,5.3l0,0h-37.5v10.6h37.5c6.9,0,12.8-4.4,15-10.6c0.6-1.7,0.9-3.5,0.9-5.3c0-1.9-0.3-3.7-0.9-5.3C567.2,64.6,561.3,60.2,554.3,60.2z',
|
|
showAbove: false,
|
|
offsetCenter: [0, '-35%'],
|
|
size: 120,
|
|
keepAspect: true,
|
|
itemStyle: {
|
|
color: '#707177'
|
|
}
|
|
},
|
|
pointer: {
|
|
icon: 'path://M2.9,0.7L2.9,0.7c1.4,0,2.6,1.2,2.6,2.6v115c0,1.4-1.2,2.6-2.6,2.6l0,0c-1.4,0-2.6-1.2-2.6-2.6V3.3C0.3,1.9,1.4,0.7,2.9,0.7z',
|
|
width: 12,
|
|
length: '55%',
|
|
offsetCenter: [0, '8%'],
|
|
itemStyle: {
|
|
color: '#C0911F',
|
|
shadowColor: 'rgba(0, 0, 0, 0.3)',
|
|
shadowBlur: 8,
|
|
shadowOffsetX: 2,
|
|
shadowOffsetY: 4
|
|
}
|
|
},
|
|
detail: {
|
|
show: false
|
|
},
|
|
title: {
|
|
offsetCenter: [0, '30%']
|
|
},
|
|
data: [
|
|
{
|
|
value: 0,
|
|
name: ''
|
|
}
|
|
]
|
|
},
|
|
{
|
|
name: 'minute',
|
|
type: 'gauge',
|
|
startAngle: 90,
|
|
endAngle: -270,
|
|
min: 0,
|
|
max: 60,
|
|
axisLine: {
|
|
show: false
|
|
},
|
|
splitLine: {
|
|
show: false
|
|
},
|
|
axisTick: {
|
|
show: false
|
|
},
|
|
axisLabel: {
|
|
show: false
|
|
},
|
|
pointer: {
|
|
icon: 'path://M2.9,0.7L2.9,0.7c1.4,0,2.6,1.2,2.6,2.6v115c0,1.4-1.2,2.6-2.6,2.6l0,0c-1.4,0-2.6-1.2-2.6-2.6V3.3C0.3,1.9,1.4,0.7,2.9,0.7z',
|
|
width: 8,
|
|
length: '70%',
|
|
offsetCenter: [0, '8%'],
|
|
itemStyle: {
|
|
color: '#C0911F',
|
|
shadowColor: 'rgba(0, 0, 0, 0.3)',
|
|
shadowBlur: 8,
|
|
shadowOffsetX: 2,
|
|
shadowOffsetY: 4
|
|
}
|
|
},
|
|
anchor: {
|
|
show: true,
|
|
size: 20,
|
|
showAbove: false,
|
|
itemStyle: {
|
|
borderWidth: 15,
|
|
borderColor: '#C0911F',
|
|
shadowColor: 'rgba(0, 0, 0, 0.3)',
|
|
shadowBlur: 8,
|
|
shadowOffsetX: 2,
|
|
shadowOffsetY: 4
|
|
}
|
|
},
|
|
detail: {
|
|
show: false
|
|
},
|
|
title: {
|
|
offsetCenter: ['0%', '-40%']
|
|
},
|
|
data: [
|
|
{
|
|
value: 0,
|
|
name: ''
|
|
}
|
|
]
|
|
},
|
|
{
|
|
name: 'second',
|
|
type: 'gauge',
|
|
startAngle: 90,
|
|
endAngle: -270,
|
|
min: 0,
|
|
max: 60,
|
|
animationEasingUpdate: 'bounceOut',
|
|
axisLine: {
|
|
show: false
|
|
},
|
|
splitLine: {
|
|
show: false
|
|
},
|
|
axisTick: {
|
|
show: false
|
|
},
|
|
axisLabel: {
|
|
show: false
|
|
},
|
|
pointer: {
|
|
icon: 'path://M2.9,0.7L2.9,0.7c1.4,0,2.6,1.2,2.6,2.6v115c0,1.4-1.2,2.6-2.6,2.6l0,0c-1.4,0-2.6-1.2-2.6-2.6V3.3C0.3,1.9,1.4,0.7,2.9,0.7z',
|
|
width: 4,
|
|
length: '85%',
|
|
offsetCenter: [0, '8%'],
|
|
itemStyle: {
|
|
color: '#C0911F',
|
|
shadowColor: 'rgba(0, 0, 0, 0.3)',
|
|
shadowBlur: 8,
|
|
shadowOffsetX: 2,
|
|
shadowOffsetY: 4
|
|
}
|
|
},
|
|
anchor: {
|
|
show: true,
|
|
size: 15,
|
|
showAbove: true,
|
|
itemStyle: {
|
|
color: '#C0911F',
|
|
shadowColor: 'rgba(0, 0, 0, 0.3)',
|
|
shadowBlur: 8,
|
|
shadowOffsetX: 2,
|
|
shadowOffsetY: 4
|
|
}
|
|
},
|
|
detail: {
|
|
show: false
|
|
},
|
|
title: {
|
|
offsetCenter: ['0%', '-40%']
|
|
},
|
|
data: [
|
|
{
|
|
value: 0,
|
|
name: ''
|
|
}
|
|
]
|
|
}
|
|
]
|
|
};
|
|
|
|
var chart7 = testHelper.create(echarts, 'main7', {
|
|
title: [
|
|
'clock'
|
|
],
|
|
option: option7,
|
|
height: 600
|
|
});
|
|
|
|
const timeUpdatedStatus = {
|
|
second: false,
|
|
minute: false,
|
|
hour: false
|
|
}
|
|
|
|
function updateSeries(time, series, type) {
|
|
let isCritical = (Math.floor(time) === 0) || (type === 'second' && time === 1);
|
|
if (isCritical && timeUpdatedStatus[type] === true) {
|
|
timeUpdatedStatus[type] = false;
|
|
series.data[0].value = 0
|
|
series.clockwise = true;
|
|
option7.animationDurationUpdate = 0;
|
|
chart7.setOption(option7, true);
|
|
}
|
|
series.data[0].value = time;
|
|
series.clockwise = true;
|
|
if (time === 0) {
|
|
timeUpdatedStatus[type] = true;
|
|
series.clockwise = false;
|
|
}
|
|
}
|
|
|
|
setInterval(function () {
|
|
let date = new Date();
|
|
let second = date.getSeconds();
|
|
let minute = date.getMinutes() + second / 60;
|
|
let hour = date.getHours() % 12 + minute / 60;
|
|
|
|
updateSeries(second, option7.series[2], 'second');
|
|
updateSeries(minute, option7.series[1], 'minute');
|
|
updateSeries(hour, option7.series[0], 'hour');
|
|
|
|
option7.animationDurationUpdate = 300;
|
|
chart7.setOption(option7, true);
|
|
date = null;
|
|
}, 1000);
|
|
|
|
|
|
var option8 = {
|
|
tooltip: {
|
|
formatter: '{a} <br/>{b} : {c}%'
|
|
},
|
|
toolbox: {
|
|
feature: {
|
|
restore: {},
|
|
saveAsImage: {}
|
|
}
|
|
},
|
|
series: [
|
|
{
|
|
name: '业务指标',
|
|
type: 'gauge',
|
|
anchor: {
|
|
show: true,
|
|
icon: "image://asset/echarts-logo.png",
|
|
size: 50,
|
|
showAbove: true
|
|
},
|
|
pointer: {
|
|
icon: "image://asset/echarts-logo.png",
|
|
length: "70%"
|
|
},
|
|
detail: {formatter: '{value}%'},
|
|
data: [{value: 58.46, name: '完成率'}]
|
|
}
|
|
]
|
|
};
|
|
|
|
var chart8 = testHelper.create(echarts, 'main8', {
|
|
title: [
|
|
'pointer.icon: "image://url"',
|
|
'anchor.icon: "image://url"'
|
|
],
|
|
option: option8
|
|
// height: 1200,
|
|
// buttons: [{text: 'btn-txt', onclick: function () {}}],
|
|
// recordCanvas: true,
|
|
});
|
|
|
|
var option9 = {
|
|
tooltip: {
|
|
formatter: '{a} <br/>{b} : {c}%'
|
|
},
|
|
toolbox: {
|
|
feature: {
|
|
restore: {},
|
|
saveAsImage: {}
|
|
}
|
|
},
|
|
series: [
|
|
{
|
|
name: '业务指标',
|
|
type: 'gauge',
|
|
pointer: {
|
|
icon: 'emptyCircle',
|
|
itemStyle: {
|
|
borderWidth: 10,
|
|
borderColor: '#f00'
|
|
},
|
|
},
|
|
anchor: {
|
|
// show: true
|
|
},
|
|
detail: {formatter: '{value}%'},
|
|
data: [{value: 58.46, name: '完成率'}]
|
|
}
|
|
]
|
|
};
|
|
|
|
var chart9 = testHelper.create(echarts, 'main9', {
|
|
title: [
|
|
'pointer.icon: emptyCircle',
|
|
'anchor.show: false'
|
|
],
|
|
option: option9
|
|
});
|
|
|
|
});
|
|
</script>
|
|
|
|
|
|
</body>
|
|
</html>
|
|
|