375 lines
15 KiB
HTML
Generated
375 lines
15 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="lib/canteen.js"></script> -->
|
|
<link rel="stylesheet" href="lib/reset.css" />
|
|
<style>
|
|
.test-title-inner {
|
|
text-align: center;
|
|
}
|
|
</style>
|
|
</head>
|
|
<body>
|
|
|
|
<div id="main0"></div>
|
|
|
|
<script>
|
|
require([
|
|
'echarts'
|
|
], function (echarts) {
|
|
var option;
|
|
|
|
var colorList = ['#dc67ce', '#7ddc67', '#8067dc', '#dc6967', '#dcd267', '#67b7dc'];
|
|
// cornerRadius can be an array [innerCornerRadius, outerCornerRadius]
|
|
var outerCornerRadius = 5;
|
|
var innerCornerRadius = 5;
|
|
var usePercent = false;
|
|
var isCircular = false;
|
|
var isRounderOnEmphasis = false;
|
|
var roseType = 'area';
|
|
var randomTimer;
|
|
var data = [
|
|
{
|
|
name: "America",
|
|
value: 260
|
|
},
|
|
{
|
|
name: "Zambia",
|
|
value: 230
|
|
},
|
|
{
|
|
name: "Ireland",
|
|
value: 200
|
|
},
|
|
{
|
|
name: "Germany",
|
|
value: 165
|
|
},
|
|
{
|
|
name: "Australia",
|
|
value: 139
|
|
},
|
|
{
|
|
name: "Japan",
|
|
value: 128
|
|
}
|
|
];
|
|
|
|
option = {
|
|
color: colorList,
|
|
title: {
|
|
text: getTitle()
|
|
},
|
|
tooltip: {},
|
|
legend: {
|
|
bottom: 0
|
|
},
|
|
series: {
|
|
type: 'pie',
|
|
roseType: roseType,
|
|
selectedMode: 'single',
|
|
selectedOffset: 30,
|
|
label: {
|
|
formatter: '{b} {c}({d}%)'
|
|
},
|
|
itemStyle: {
|
|
borderRadius: getCornerRadius(),
|
|
},
|
|
// itemStyle: {
|
|
// borderColor: '#fff',
|
|
// borderWidth: 5
|
|
// },
|
|
data: echarts.util.clone(data)
|
|
}
|
|
};
|
|
|
|
function getTitle() {
|
|
return 'cornerRadius ['
|
|
+ innerCornerRadius + (usePercent ? '%' : '')
|
|
+ ', '
|
|
+ outerCornerRadius + (usePercent ? '%' : '')
|
|
+ ']';
|
|
}
|
|
|
|
function getCornerRadius() {
|
|
return [
|
|
innerCornerRadius + (usePercent ? '%' : ''),
|
|
outerCornerRadius + (usePercent ? '%' : '')
|
|
];
|
|
}
|
|
|
|
function getEmphasisCornerRadius() {
|
|
const cornerRadius = getCornerRadius();
|
|
if (!isRounderOnEmphasis) {
|
|
return cornerRadius;
|
|
}
|
|
const emphasisCornerRadius = [
|
|
parseInt(cornerRadius[0], 10) * 2,
|
|
parseInt(cornerRadius[1], 10) * 2
|
|
];
|
|
if (usePercent) {
|
|
emphasisCornerRadius[0] = emphasisCornerRadius[0] + '%';
|
|
emphasisCornerRadius[1] = emphasisCornerRadius[1] + '%';
|
|
}
|
|
return emphasisCornerRadius;
|
|
}
|
|
|
|
var chart = testHelper.create(echarts, 'main0', {
|
|
title: [
|
|
'Test Pie with **cornerRadius**',
|
|
'**cornerRadius** can be a number | string | number array | string array'
|
|
],
|
|
option: option,
|
|
buttons: [
|
|
{
|
|
text: 'increase innerCornerRadius',
|
|
onclick: function () {
|
|
innerCornerRadius += 5;
|
|
chart.setOption({
|
|
title: {
|
|
text: getTitle()
|
|
},
|
|
series: [{
|
|
itemStyle: { borderRadius: getCornerRadius() },
|
|
emphasis: {
|
|
itemStyle: { borderRadius: getEmphasisCornerRadius() }
|
|
}
|
|
}]
|
|
});
|
|
}
|
|
},
|
|
{
|
|
text: 'decrease innerCornerRadius',
|
|
onclick: function () {
|
|
innerCornerRadius -= 5;
|
|
if (innerCornerRadius < 0) {
|
|
innerCornerRadius = 0;
|
|
}
|
|
chart.setOption({
|
|
title: {
|
|
text: getTitle()
|
|
},
|
|
series: [{
|
|
itemStyle: { borderRadius: getCornerRadius() },
|
|
emphasis: {
|
|
itemStyle: { borderRadius: getEmphasisCornerRadius() }
|
|
}
|
|
}]
|
|
});
|
|
}
|
|
},
|
|
{
|
|
text: 'increase outerCornerRadius',
|
|
onclick: function () {
|
|
outerCornerRadius += 5;
|
|
chart.setOption({
|
|
title: {
|
|
text: getTitle()
|
|
},
|
|
series: [{
|
|
itemStyle: { borderRadius: getCornerRadius() },
|
|
emphasis: {
|
|
itemStyle: { borderRadius: getEmphasisCornerRadius() }
|
|
}
|
|
}]
|
|
});
|
|
}
|
|
},
|
|
{
|
|
text: 'decrease outerCornerRadius',
|
|
onclick: function () {
|
|
outerCornerRadius -= 5;
|
|
if (outerCornerRadius < 0) {
|
|
outerCornerRadius = 0;
|
|
}
|
|
chart.setOption({
|
|
title: {
|
|
text: getTitle()
|
|
},
|
|
series: [{
|
|
itemStyle: { borderRadius: getCornerRadius() },
|
|
emphasis: {
|
|
itemStyle: { borderRadius: getEmphasisCornerRadius() }
|
|
}
|
|
}]
|
|
});
|
|
}
|
|
},
|
|
{
|
|
text: 'use percent',
|
|
onclick: function () {
|
|
usePercent = !usePercent;
|
|
chart.setOption({
|
|
title: {
|
|
text: getTitle()
|
|
},
|
|
series: [{
|
|
itemStyle: { borderRadius: getCornerRadius() },
|
|
emphasis: {
|
|
itemStyle: { borderRadius: getEmphasisCornerRadius() }
|
|
}
|
|
}]
|
|
});
|
|
}
|
|
},
|
|
{
|
|
text: 'random cornerRadius',
|
|
onclick: function () {
|
|
// clearInterval(randomTimer);
|
|
// if (randomTimer) {
|
|
// randomTimer = null;
|
|
// }
|
|
// else {
|
|
// randomTimer = setInterval(function () {
|
|
outerCornerRadius = ~~(Math.random() * 50);
|
|
innerCornerRadius = ~~(Math.random() * 50);
|
|
chart.setOption({
|
|
title: {
|
|
text: getTitle()
|
|
},
|
|
series: [{
|
|
itemStyle: { borderRadius: getCornerRadius() },
|
|
emphasis: {
|
|
itemStyle: { borderRadius: getEmphasisCornerRadius() }
|
|
}
|
|
}]
|
|
});
|
|
// }, 2e3);
|
|
// }
|
|
}
|
|
},
|
|
{
|
|
text: 'roseType',
|
|
onclick: function () {
|
|
roseType = roseType ? false : 'area';
|
|
chart.setOption({
|
|
series: [{
|
|
roseType: roseType
|
|
}]
|
|
});
|
|
}
|
|
},
|
|
{
|
|
text: 'circular',
|
|
onclick: function () {
|
|
var innerRadius;
|
|
if (!isCircular) {
|
|
innerRadius = ~~(Math.random() * 70);
|
|
}
|
|
chart.setOption({
|
|
series: [{
|
|
radius: isCircular ? [0, '75%'] : [innerRadius + '%', '75%']
|
|
}]
|
|
});
|
|
this.innerText = 'circular' + (innerRadius ? ' ' + innerRadius + '%' : '');
|
|
isCircular = !isCircular;
|
|
}
|
|
},
|
|
{
|
|
text: 'random data',
|
|
onclick: function () {
|
|
var randomData = echarts.util.clone(data);
|
|
echarts.util.each(randomData, function (e) {
|
|
e.value = ~~(Math.random() * 1e3);
|
|
});
|
|
chart.setOption({
|
|
series: [{
|
|
data: randomData
|
|
}]
|
|
});
|
|
}
|
|
},
|
|
{
|
|
text: 'rounder on emphasis',
|
|
onclick: function () {
|
|
isRounderOnEmphasis = !isRounderOnEmphasis;
|
|
chart.setOption({
|
|
series: [{
|
|
itemStyle: { borderRadius: getCornerRadius() },
|
|
emphasis: {
|
|
itemStyle: { borderRadius: getEmphasisCornerRadius() }
|
|
}
|
|
}]
|
|
});
|
|
}
|
|
},
|
|
{
|
|
text: 'set radius for all corners',
|
|
onclick: function () {
|
|
isCircular = true;
|
|
var val = [5, 15, 0, 20];
|
|
chart.setOption({
|
|
title: {
|
|
text: 'cornerRadius [' + val + ']'
|
|
},
|
|
series: [{
|
|
radius: ['40%', '75%'],
|
|
itemStyle: { borderRadius: val },
|
|
emphasis: {
|
|
itemStyle: { borderRadius: [20, 5, 10, 30] }
|
|
}
|
|
}]
|
|
});
|
|
}
|
|
},
|
|
{
|
|
text: 'reset',
|
|
onclick: function () {
|
|
outerCornerRadius = 5;
|
|
innerCornerRadius = 5;
|
|
usePercent = false;
|
|
isCircular = false;
|
|
roseType = 'area';
|
|
isRounderOnEmphasis = false;
|
|
chart.setOption({
|
|
title: {
|
|
text: getTitle()
|
|
},
|
|
series: [{
|
|
itemStyle: { borderRadius: getCornerRadius() },
|
|
emphasis: {
|
|
itemStyle: { borderRadius: getEmphasisCornerRadius() }
|
|
},
|
|
roseType: roseType,
|
|
radius: [0, '75%'],
|
|
data: data
|
|
}]
|
|
});
|
|
}
|
|
}
|
|
]
|
|
});
|
|
});
|
|
</script>
|
|
|
|
</body>
|
|
</html>
|
|
|