575 lines
24 KiB
HTML
Generated
575 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>
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
<script>
|
|
require(['echarts'/*, 'map/js/china' */], function (echarts) {
|
|
var option = {
|
|
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'
|
|
},
|
|
progress: {
|
|
show: true, // 坐标轴线
|
|
overlap: true,
|
|
roundCap: true
|
|
},
|
|
axisLine: {
|
|
roundCap: true
|
|
},
|
|
data: [
|
|
{
|
|
value: 20,
|
|
name: '完成率',
|
|
title: {
|
|
offsetCenter: ['-40%', '20%']
|
|
},
|
|
detail: {
|
|
offsetCenter: ['-40%', '35%']
|
|
}
|
|
},
|
|
{
|
|
value: 40,
|
|
name: '达标率',
|
|
title: {
|
|
offsetCenter: ['0%', '20%']
|
|
},
|
|
detail: {
|
|
offsetCenter: ['0%', '35%']
|
|
}
|
|
},
|
|
{
|
|
value: 60,
|
|
name: '优秀率',
|
|
title: {
|
|
offsetCenter: ['40%', '20%']
|
|
},
|
|
detail: {
|
|
offsetCenter: ['40%', '35%']
|
|
}
|
|
}
|
|
],
|
|
title: {
|
|
fontSize: 14
|
|
},
|
|
detail: {
|
|
width: 30,
|
|
height: 12,
|
|
fontSize: 12,
|
|
color: 'inherit',
|
|
borderColor: 'inherit',
|
|
borderWidth: 1,
|
|
borderRadius: 3,
|
|
formatter: '{value}%',
|
|
},
|
|
}
|
|
]
|
|
};
|
|
var chart = testHelper.create(echarts, 'main0', {
|
|
title: [
|
|
'detail with border'
|
|
],
|
|
option: option
|
|
});
|
|
setInterval(function () {
|
|
option.series[0].data[0].value = (Math.random() * 100).toFixed(2) - 0;
|
|
option.series[0].data[1].value = (Math.random() * 100).toFixed(2) - 0;
|
|
option.series[0].data[2].value = (Math.random() * 100).toFixed(2) - 0;
|
|
chart.setOption(option, true);
|
|
}, 2000);
|
|
|
|
var option1 = {
|
|
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'
|
|
},
|
|
progress: {
|
|
show: true, // 坐标轴线
|
|
overlap: true,
|
|
roundCap: true
|
|
},
|
|
axisLine: {
|
|
roundCap: true
|
|
},
|
|
data: [
|
|
{
|
|
value: 20,
|
|
name: '完成率',
|
|
title: {
|
|
offsetCenter: ['-40%', '20%']
|
|
},
|
|
detail: {
|
|
offsetCenter: ['-40%', '35%']
|
|
}
|
|
},
|
|
{
|
|
value: 40,
|
|
name: '达标率',
|
|
title: {
|
|
offsetCenter: ['0%', '20%']
|
|
},
|
|
detail: {
|
|
offsetCenter: ['0%', '35%']
|
|
}
|
|
},
|
|
{
|
|
value: 60,
|
|
name: '优秀率',
|
|
title: {
|
|
offsetCenter: ['40%', '20%']
|
|
},
|
|
detail: {
|
|
offsetCenter: ['40%', '35%']
|
|
}
|
|
}
|
|
],
|
|
title: {
|
|
fontSize: 14
|
|
},
|
|
detail: {
|
|
width: 30,
|
|
height: 12,
|
|
fontSize: 12,
|
|
color: 'inherit',
|
|
formatter: '{value}%'
|
|
}
|
|
}
|
|
]
|
|
};
|
|
var chart1 = testHelper.create(echarts, 'main1', {
|
|
title: [
|
|
'detail without border'
|
|
],
|
|
option: option1
|
|
});
|
|
setInterval(function () {
|
|
option1.series[0].data[0].value = (Math.random() * 100).toFixed(2) - 0;
|
|
option1.series[0].data[1].value = (Math.random() * 100).toFixed(2) - 0;
|
|
option1.series[0].data[2].value = (Math.random() * 100).toFixed(2) - 0;
|
|
chart1.setOption(option1, true);
|
|
}, 2000);
|
|
|
|
var option2 = {
|
|
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'
|
|
},
|
|
progress: {
|
|
show: true, // 坐标轴线
|
|
overlap: true,
|
|
roundCap: true
|
|
},
|
|
axisLine: {
|
|
roundCap: true
|
|
},
|
|
data: [
|
|
{
|
|
value: 20,
|
|
name: '完成率',
|
|
title: {
|
|
offsetCenter: ['-40%', '20%']
|
|
},
|
|
detail: {
|
|
offsetCenter: ['-40%', '35%']
|
|
}
|
|
},
|
|
{
|
|
value: 40,
|
|
name: '达标率',
|
|
title: {
|
|
offsetCenter: ['0%', '20%']
|
|
},
|
|
detail: {
|
|
offsetCenter: ['0%', '35%']
|
|
}
|
|
},
|
|
{
|
|
value: 60,
|
|
name: '优秀率',
|
|
title: {
|
|
offsetCenter: ['40%', '20%']
|
|
},
|
|
detail: {
|
|
offsetCenter: ['40%', '35%']
|
|
}
|
|
}
|
|
],
|
|
title: {
|
|
fontSize: 14
|
|
},
|
|
detail: {
|
|
width: 30,
|
|
height: 12,
|
|
fontSize: 12,
|
|
color: '#fff',
|
|
backgroundColor: 'inherit',
|
|
borderRadius: 3,
|
|
formatter: '{value}%'
|
|
}
|
|
}
|
|
]
|
|
};
|
|
var chart2 = testHelper.create(echarts, 'main2', {
|
|
title: [
|
|
'detail with backgroundColor (not recommended)'
|
|
],
|
|
option: option2
|
|
});
|
|
setInterval(function () {
|
|
option2.series[0].data[0].value = (Math.random() * 100).toFixed(2) - 0;
|
|
option2.series[0].data[1].value = (Math.random() * 100).toFixed(2) - 0;
|
|
option2.series[0].data[2].value = (Math.random() * 100).toFixed(2) - 0;
|
|
chart2.setOption(option2, true);
|
|
}, 2000);
|
|
|
|
var option3 = {
|
|
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'
|
|
},
|
|
progress: {
|
|
show: true, // 坐标轴线
|
|
overlap: true,
|
|
roundCap: true
|
|
},
|
|
axisLine: {
|
|
roundCap: true
|
|
},
|
|
data: [
|
|
{
|
|
value: 20,
|
|
name: '完成率',
|
|
title: {
|
|
offsetCenter: ['0%', '20%']
|
|
},
|
|
detail: {
|
|
offsetCenter: ['0%', '35%']
|
|
}
|
|
},
|
|
{
|
|
value: 40,
|
|
name: '达标率',
|
|
title: {
|
|
offsetCenter: ['0%', '55%']
|
|
},
|
|
detail: {
|
|
offsetCenter: ['0%', '70%']
|
|
}
|
|
},
|
|
{
|
|
value: 60,
|
|
name: '优秀率',
|
|
title: {
|
|
offsetCenter: ['0%', '90%']
|
|
},
|
|
detail: {
|
|
offsetCenter: ['0%', '105%']
|
|
}
|
|
}
|
|
],
|
|
title: {
|
|
fontSize: 14
|
|
},
|
|
detail: {
|
|
width: 30,
|
|
height: 12,
|
|
fontSize: 12,
|
|
color: 'inherit',
|
|
borderColor: 'inherit',
|
|
borderRadius: 3,
|
|
borderWidth: 1,
|
|
formatter: '{value}%'
|
|
},
|
|
}
|
|
]
|
|
};
|
|
var chart3 = testHelper.create(echarts, 'main3', {
|
|
title: [
|
|
'the orient is vertical'
|
|
],
|
|
option: option3
|
|
});
|
|
setInterval(function () {
|
|
option3.series[0].data[0].value = (Math.random() * 100).toFixed(2) - 0;
|
|
option3.series[0].data[1].value = (Math.random() * 100).toFixed(2) - 0;
|
|
option3.series[0].data[2].value = (Math.random() * 100).toFixed(2) - 0;
|
|
chart3.setOption(option3, true);
|
|
}, 2000);
|
|
|
|
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'
|
|
},
|
|
progress: {
|
|
show: true, // 坐标轴线
|
|
overlap: true,
|
|
roundCap: true
|
|
},
|
|
axisLine: {
|
|
roundCap: true
|
|
},
|
|
data: [
|
|
{
|
|
value: 20,
|
|
name: '完成率',
|
|
title: {
|
|
offsetCenter: ['-40%', '80%']
|
|
},
|
|
detail: {
|
|
offsetCenter: ['-40%', '95%']
|
|
}
|
|
},
|
|
{
|
|
value: 40,
|
|
name: '达标率',
|
|
title: {
|
|
offsetCenter: ['0%', '80%']
|
|
},
|
|
detail: {
|
|
offsetCenter: ['0%', '95%']
|
|
}
|
|
},
|
|
{
|
|
value: 60,
|
|
name: '优秀率',
|
|
title: {
|
|
offsetCenter: ['40%', '80%']
|
|
},
|
|
detail: {
|
|
offsetCenter: ['40%', '95%']
|
|
}
|
|
}
|
|
],
|
|
title: {
|
|
fontSize: 14
|
|
},
|
|
detail: {
|
|
width: 30,
|
|
height: 12,
|
|
fontSize: 12,
|
|
color: 'inherit',
|
|
borderRadius: 3,
|
|
borderColor: 'inherit',
|
|
borderWidth: 1,
|
|
// backgroundColor: 'inherit',
|
|
formatter: '{value}%'
|
|
},
|
|
}
|
|
]
|
|
};
|
|
var chart4 = testHelper.create(echarts, 'main4', {
|
|
title: [
|
|
'out of gauge'
|
|
],
|
|
option: option4
|
|
});
|
|
setInterval(function () {
|
|
option4.series[0].data[0].value = (Math.random() * 100).toFixed(2) - 0;
|
|
option4.series[0].data[1].value = (Math.random() * 100).toFixed(2) - 0;
|
|
option4.series[0].data[2].value = (Math.random() * 100).toFixed(2) - 0;
|
|
chart4.setOption(option4, true);
|
|
}, 2000);
|
|
|
|
var option5 = {
|
|
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'
|
|
},
|
|
progress: {
|
|
show: true, // 坐标轴线
|
|
overlap: true,
|
|
roundCap: true
|
|
},
|
|
axisLine: {
|
|
roundCap: true
|
|
},
|
|
data: [
|
|
{
|
|
value: 20,
|
|
name: '完成率',
|
|
title: {
|
|
offsetCenter: ['-40%', '80%']
|
|
},
|
|
detail: {
|
|
offsetCenter: ['-40%', '95%']
|
|
}
|
|
},
|
|
{
|
|
value: 40,
|
|
name: '达标率',
|
|
title: {
|
|
offsetCenter: ['0%', '80%']
|
|
},
|
|
detail: {
|
|
offsetCenter: ['0%', '95%']
|
|
}
|
|
},
|
|
{
|
|
value: 60,
|
|
name: '优秀率',
|
|
title: {
|
|
offsetCenter: ['40%', '80%']
|
|
},
|
|
detail: {
|
|
offsetCenter: ['40%', '95%']
|
|
}
|
|
}
|
|
],
|
|
title: {
|
|
fontSize: 14
|
|
},
|
|
detail: {
|
|
width: 30,
|
|
height: 12,
|
|
fontSize: 12,
|
|
color: '#fff',
|
|
backgroundColor: 'inherit',
|
|
borderRadius: 3,
|
|
formatter: '{value}%'
|
|
},
|
|
}
|
|
]
|
|
};
|
|
var chart5 = testHelper.create(echarts, 'main5', {
|
|
title: [
|
|
'out of gauge, detail with backgroundColor'
|
|
],
|
|
option: option5
|
|
});
|
|
setInterval(function () {
|
|
option5.series[0].data[0].value = (Math.random() * 100).toFixed(2) - 0;
|
|
option5.series[0].data[1].value = (Math.random() * 100).toFixed(2) - 0;
|
|
option5.series[0].data[2].value = (Math.random() * 100).toFixed(2) - 0;
|
|
chart5.setOption(option5, true);
|
|
}, 2000);
|
|
});
|
|
</script>
|
|
|
|
|
|
</body>
|
|
</html>
|
|
|