151 lines
6.5 KiB
HTML
Generated
151 lines
6.5 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="data/pie-texture.js"></script>
|
|
<script src="lib/facePrint.js"></script>
|
|
<script src="lib/testHelper.js"></script>
|
|
<link rel="stylesheet" href="lib/reset.css" />
|
|
</head>
|
|
<body>
|
|
<style>
|
|
.test-title {
|
|
background: #146402;
|
|
color: #fff;
|
|
}
|
|
.test-chart {
|
|
border: 1px solid red;
|
|
}
|
|
</style>
|
|
<div id="main"></div>
|
|
|
|
<script>
|
|
|
|
require([
|
|
'echarts'
|
|
], function (echarts) {
|
|
var dom = document.getElementById('main');
|
|
|
|
var aligns = [
|
|
'none',
|
|
'labelLine',
|
|
'edge'
|
|
];
|
|
for (var b = 0; b < 2; ++b) {
|
|
for (var w = 0; w < 2; ++w) {
|
|
for (var r = 0; r < 2; ++r) {
|
|
for (var a = 0; a < aligns.length; a++) {
|
|
var id = 'main-' + b + '-' + w + '-' + r + '-' + a;
|
|
var container = document.createElement('div');
|
|
container.setAttribute('id', id);
|
|
dom.appendChild(container);
|
|
|
|
var align = aligns[a];
|
|
var data = [
|
|
{
|
|
name: 'Apples huida dhuasi hduias huid as hidusah huidas cjibjdf8k',
|
|
value: 78
|
|
},
|
|
{
|
|
name: '{a|Dorro quisam dsjahui fdhjs hudsa huds}',
|
|
value: 60
|
|
},
|
|
{
|
|
name: '{a|Neque dasdaferw dasdas pordsao estdsas qdasdasui dolom}',
|
|
value: 48
|
|
},
|
|
{
|
|
name: 'Oranges',
|
|
value: 40
|
|
},
|
|
{
|
|
name: 'Pears',
|
|
value: 32
|
|
},
|
|
{
|
|
name: 'quia dolorsit amet consectetur adipisci',
|
|
value: 27
|
|
}
|
|
];
|
|
var option = {
|
|
series: [
|
|
{
|
|
type: 'pie',
|
|
radius: '80%',
|
|
center: ['50%', '50%'],
|
|
data: data,
|
|
label: {
|
|
width: w ? 300 : undefined,
|
|
position: 'outer',
|
|
alignTo: align,
|
|
edgeDistance: 20,
|
|
fontSize: 30,
|
|
padding: [10, 20],
|
|
backgroundColor: b && 'rgba(0, 0, 255, 0.2)',
|
|
rich: r && {
|
|
a: {
|
|
fontSize: 36,
|
|
borderColor: 'rgba(0, 0, 255, 0.8)',
|
|
borderWidth: 1,
|
|
borderRadius: 10
|
|
}
|
|
},
|
|
overflow: 'break'
|
|
},
|
|
labelLine: {
|
|
length2: 50
|
|
},
|
|
left: 0,
|
|
right: 0,
|
|
top: 0,
|
|
bottom: 0,
|
|
animationDuration: 0
|
|
}
|
|
]
|
|
};
|
|
|
|
var rich = r ? 'richText' : 'plainText';
|
|
var chart = testHelper.create(echarts, id, {
|
|
width: 1250,
|
|
title: [
|
|
'Labels should not be outside of the canvas',
|
|
'alignTo: **' + align + ', ' + rich + '**',
|
|
'width: **' + (w ? '300' : 'undefined') + '**',
|
|
'background: **' + (b ? 'true' : 'false') + '**'
|
|
],
|
|
option: option
|
|
});
|
|
}
|
|
}
|
|
}
|
|
}
|
|
});
|
|
|
|
</script>
|
|
</body>
|
|
</html>
|