1037 lines
38 KiB
HTML
Generated
1037 lines
38 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>
|
|
table {
|
|
padding: 20px;
|
|
}
|
|
tr {
|
|
padding: 5px;
|
|
}
|
|
</style>
|
|
|
|
|
|
|
|
<div id="main0"></div>
|
|
<div id="main1"></div>
|
|
<div id="main2"></div>
|
|
|
|
<table>
|
|
<tr>
|
|
<td>
|
|
<button onclick="randAll()">Random All</button>
|
|
</td>
|
|
</tr>
|
|
<tr>
|
|
<td>
|
|
symbolSize
|
|
</td>
|
|
<td>
|
|
<input type="range" min="0" max="1" value="1" step="0.01" id="symbolSize-range">
|
|
<label id="symbolSize-label">1</label>
|
|
</td>
|
|
<td>
|
|
<button onclick="rand('symbolSize', 0, 1)">Random</button>
|
|
</td>
|
|
</tr>
|
|
<tr>
|
|
<td>
|
|
dashArrayX
|
|
</td>
|
|
<td>
|
|
<input type="range" min="0" max="50" value="10" id="dashArrayX-0-range">
|
|
<input type="range" min="0" max="50" value="10" id="dashArrayX-1-range">
|
|
<label id="dashArrayX-label">[10, 10]</label>
|
|
</td>
|
|
<td>
|
|
<button onclick="rand('dashArrayX-0', 0, 100)">Random</button>
|
|
</td>
|
|
</tr>
|
|
<tr>
|
|
<td>
|
|
dashArrayY
|
|
</td>
|
|
<td>
|
|
<input type="range" min="0" max="50" value="10" id="dashArrayY-0-range">
|
|
<input type="range" min="0" max="50" value="10" id="dashArrayY-1-range">
|
|
<label id="dashArrayY-label">[10, 10]</label>
|
|
</td>
|
|
<td>
|
|
<button onclick="rand('dashArrayY-0', 0, 100)">Random</button>
|
|
</td>
|
|
</tr>
|
|
<tr>
|
|
<td>
|
|
rotation
|
|
</td>
|
|
<td>
|
|
<input type="range" min="0" max="3.14" value="0" step="0.01" id="rotation-range">
|
|
<label id="rotation-label">0</label>
|
|
</td>
|
|
<td>
|
|
<button onclick="rand('rotation', 0, 3.14)">Random</button>
|
|
</td>
|
|
</tr>
|
|
</table>
|
|
|
|
|
|
<div id="main-sankey"></div>
|
|
<div id="main-sunburst"></div>
|
|
<div id="main-treemap"></div>
|
|
<div id="main-custom-series"></div>
|
|
|
|
<div id="main-fruit"></div>
|
|
<div id="main-newspaper"></div>
|
|
|
|
|
|
|
|
<script>
|
|
require(['echarts'/*, 'map/js/china' */], function (echarts) {
|
|
var option;
|
|
var series = [];
|
|
var pieData = [];
|
|
var legendNames = [];
|
|
var itemStyle = {
|
|
decal: {
|
|
color: 'blue'
|
|
}
|
|
};
|
|
for (var i = 0; i < 12; ++i) {
|
|
var s = {
|
|
name: 'bar' + i,
|
|
data: [i * 10 + 100],
|
|
type: 'bar'
|
|
};
|
|
if (i === 0) {
|
|
s.itemStyle = itemStyle;
|
|
}
|
|
else if (i === 1) {
|
|
s.itemStyle = {
|
|
decal: {
|
|
symbol: 'none'
|
|
}
|
|
};
|
|
}
|
|
else if (i === 2) {
|
|
s.data = [{
|
|
value: s.data[0],
|
|
itemStyle: {
|
|
decal: {
|
|
symbol: 'none'
|
|
}
|
|
}
|
|
}];
|
|
}
|
|
series.push(s);
|
|
|
|
var p = {
|
|
name: 'pie' + i,
|
|
value: i * 5 + 10
|
|
};
|
|
pieData.push(p);
|
|
|
|
legendNames.push('bar' + i, 'pie' + i);
|
|
}
|
|
series.push({
|
|
type: 'pie',
|
|
center: ['75%', '50%'],
|
|
data: pieData,
|
|
radius: '50%'
|
|
});
|
|
|
|
option = {
|
|
legend: {
|
|
data: legendNames
|
|
},
|
|
xAxis: {
|
|
type: 'category',
|
|
data: ['x']
|
|
},
|
|
yAxis: {
|
|
type: 'value'
|
|
},
|
|
series: series,
|
|
grid: {
|
|
left: 50,
|
|
right: '40%'
|
|
},
|
|
aria: {
|
|
decal: {
|
|
show: true
|
|
}
|
|
}
|
|
};
|
|
|
|
var chart = testHelper.create(echarts, 'main0', {
|
|
title: [
|
|
'It should use decal when aria.show is true',
|
|
'(1) Each bar and pie piece should have different decal',
|
|
'(2) The first bar and pie piece decal should be **blue**',
|
|
'(3) The second and third bar should not have decal'
|
|
],
|
|
option: option
|
|
// height: 300,
|
|
// buttons: [{text: 'btn-txt', onclick: function () {}}],
|
|
// recordCanvas: true,
|
|
});
|
|
});
|
|
</script>
|
|
|
|
|
|
|
|
<script>
|
|
require(['echarts'/*, 'map/js/china' */], function (echarts) {
|
|
var option;
|
|
var series = [];
|
|
var pieData = [];
|
|
var itemStyle = {
|
|
decal: {
|
|
color: 'blue',
|
|
symbol: [['rect', 'circle', 'triangle'], ['circle', 'none']]
|
|
}
|
|
};
|
|
for (var i = 0; i < 6; ++i) {
|
|
var s = {
|
|
name: 'bar' + i,
|
|
data: [i * 10 + 100],
|
|
type: 'bar'
|
|
};
|
|
if (i === 0) {
|
|
s.itemStyle = itemStyle;
|
|
s.emphasis = {
|
|
itemStyle: {
|
|
decal: {
|
|
color: 'red'
|
|
}
|
|
}
|
|
}
|
|
}
|
|
series.push(s);
|
|
|
|
var p = {
|
|
name: 'pie' + i,
|
|
value: i * 5 + 10
|
|
};
|
|
if (i === 0) {
|
|
p.itemStyle = itemStyle;
|
|
p.emphasis = {
|
|
itemStyle: {
|
|
decal: {
|
|
color: 'red'
|
|
}
|
|
}
|
|
}
|
|
}
|
|
pieData.push(p);
|
|
}
|
|
series.push({
|
|
type: 'pie',
|
|
center: ['75%', '50%'],
|
|
data: pieData,
|
|
radius: '50%'
|
|
});
|
|
|
|
option = {
|
|
xAxis: {
|
|
type: 'category',
|
|
data: ['x']
|
|
},
|
|
yAxis: {
|
|
type: 'value'
|
|
},
|
|
series: series,
|
|
grid: {
|
|
left: 50,
|
|
right: '40%'
|
|
},
|
|
aria: {
|
|
// no decal
|
|
}
|
|
};
|
|
|
|
var chart = testHelper.create(echarts, 'main1', {
|
|
title: [
|
|
'If aria is not enabled, decal can also be enabled',
|
|
'(1) Only the first bar and pie piece should use decal (be **blue**)',
|
|
'(2) `aria.label` should be in the HTML'
|
|
],
|
|
option: option
|
|
});
|
|
});
|
|
</script>
|
|
|
|
|
|
|
|
|
|
|
|
<script>
|
|
var option;
|
|
var decal = {
|
|
symbolSize: 1,
|
|
dashArrayX: [10, 10],
|
|
dashArrayY: [10, 10],
|
|
rotation: 0,
|
|
maxTileWidth: 256,
|
|
maxTileHeight: 256
|
|
};
|
|
|
|
option = {
|
|
xAxis: {
|
|
type: 'category',
|
|
data: ['a', 'b'],
|
|
show: false
|
|
},
|
|
yAxis: {
|
|
type: 'value',
|
|
show: false
|
|
},
|
|
series: [{
|
|
type: 'bar',
|
|
data: [70, 40],
|
|
itemStyle: {
|
|
decal: decal,
|
|
borderWidth: 20,
|
|
borderColor: '#ff0'
|
|
}
|
|
}, {
|
|
type: 'line',
|
|
data: [100, 80],
|
|
itemStyle: {
|
|
decal: decal,
|
|
borderWidth: 20,
|
|
borderColor: '#ff0'
|
|
},
|
|
lineStyle: {
|
|
width: 20
|
|
},
|
|
symbol: 'circle',
|
|
symbolSize: 200
|
|
}],
|
|
grid: {
|
|
left: 50,
|
|
right: 20
|
|
},
|
|
aria: {
|
|
enabled: true
|
|
},
|
|
animation: false
|
|
};
|
|
var chart;
|
|
require(['echarts'/*, 'map/js/china' */], function (echarts) {
|
|
|
|
chart = testHelper.create(echarts, 'main2', {
|
|
title: [
|
|
'Change parameters and check if it goes into endless loop'
|
|
],
|
|
option: option
|
|
});
|
|
|
|
['symbolSize', 'dashArrayX-0', 'dashArrayX-1', 'dashArrayY-0', 'dashArrayY-1', 'rotation'].forEach(function (name) {
|
|
var input = document.getElementById(name + '-range');
|
|
var nameSplit = name.split('-');
|
|
var attrName = nameSplit[0];
|
|
var idName = nameSplit[1];
|
|
var label = document.getElementById(attrName + '-label');
|
|
input.addEventListener('change', function (event) {
|
|
var value = event.target.value;
|
|
var labelText = +value;
|
|
var rangeValue = +value;
|
|
if (idName) {
|
|
var otherId = idName === '0' ? '1' : '0';
|
|
var otherValue = document.getElementById(attrName + '-' + otherId + '-range').value;
|
|
labelText = idName === '0'
|
|
? '[' + value + ', ' + otherValue + ']'
|
|
: '[' + otherValue + ', ' + value + ']';
|
|
rangeValue = idName === '0'
|
|
? [+value, +otherValue]
|
|
: [+otherValue, +value];
|
|
}
|
|
label.innerText = labelText;
|
|
|
|
decal[attrName] = rangeValue;
|
|
chart.setOption(option);
|
|
});
|
|
});
|
|
});
|
|
|
|
function rand(name, min, max) {
|
|
var n = Math.random() * (max - min) + min;
|
|
var value = max < 10 ? Math.floor(n * 100) / 100 : Math.floor(n);
|
|
|
|
var nameSplit = name.split('-');
|
|
var attrName = nameSplit[0];
|
|
var idName = nameSplit[1];
|
|
var labelText = value;
|
|
var rangeValue = value;
|
|
var label = document.getElementById(attrName + '-label');
|
|
if (idName) {
|
|
var otherN = Math.random() * (max - min) + min;
|
|
var otherValue = max < 10 ? Math.floor(otherN * 100) / 100 : Math.floor(otherN);
|
|
document.getElementById(attrName + '-1-range').value = otherValue;
|
|
|
|
labelText = idName === '0'
|
|
? '[' + value + ', ' + otherValue + ']'
|
|
: '[' + otherValue + ', ' + value + ']';
|
|
rangeValue = idName === '0'
|
|
? [+value, +otherValue]
|
|
: [+otherValue, +value];
|
|
}
|
|
label.innerText = labelText;
|
|
|
|
var input = document.getElementById(name + '-range');
|
|
input.value = value;
|
|
|
|
decal[attrName] = rangeValue;
|
|
chart.setOption(option);
|
|
}
|
|
|
|
function randAll() {
|
|
rand('symbolSize', 0, 1);
|
|
rand('dashArrayX-0', 0, 50);
|
|
rand('dashArrayY-0', 0, 50);
|
|
rand('rotation', 0, 3.14);
|
|
}
|
|
</script>
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
<script>
|
|
require(['echarts'/*, 'map/js/china' */], function (echarts) {
|
|
|
|
|
|
var testData = {
|
|
nodes: [
|
|
{
|
|
name: 'a',
|
|
itemStyle: {
|
|
decal: {
|
|
color: 'yellow'
|
|
}
|
|
}
|
|
},
|
|
{
|
|
name: 'b',
|
|
depth: 2
|
|
},
|
|
{
|
|
name: 'a1',
|
|
depth: 4
|
|
},
|
|
{
|
|
name: 'b1'
|
|
},
|
|
{
|
|
name: 'c',
|
|
depth: 3
|
|
},
|
|
{
|
|
name: 'e',
|
|
depth: 1
|
|
}
|
|
],
|
|
links: [
|
|
{
|
|
source: 'a',
|
|
target: 'a1',
|
|
value: 5
|
|
},
|
|
{
|
|
source: 'e',
|
|
target: 'b',
|
|
value: 3
|
|
},
|
|
{
|
|
source: 'a',
|
|
target: 'b1',
|
|
value: 0
|
|
},
|
|
{
|
|
source: 'b1',
|
|
target: 'a1',
|
|
value: 1
|
|
},
|
|
{
|
|
source: 'b1',
|
|
target: 'c',
|
|
value: 3
|
|
},
|
|
{
|
|
source: 'b',
|
|
target: 'c',
|
|
value: 3
|
|
}
|
|
]
|
|
};
|
|
|
|
var option = {
|
|
aria: {
|
|
decal: { show: true }
|
|
},
|
|
tooltip: {
|
|
trigger: 'item',
|
|
triggerOn: 'mousemove'
|
|
},
|
|
animation: false,
|
|
series: [
|
|
{
|
|
type: 'sankey',
|
|
bottom: '10%',
|
|
focusNodeAdjacency: true,
|
|
itemStyle: {
|
|
decal: {
|
|
color: 'blue'
|
|
}
|
|
},
|
|
data: testData.nodes,
|
|
links: testData.links
|
|
}
|
|
]
|
|
};
|
|
|
|
var chart = testHelper.create(echarts, 'main-sankey', {
|
|
title: [
|
|
'All sankey nodes should have decal (they are from palette)',
|
|
'decal color of all except "a" is **blue** (they are from series.itemStyle)',
|
|
'decal color of "a" is **yellow** (it is from dataItem.itemStyle)'
|
|
],
|
|
option: option
|
|
});
|
|
});
|
|
</script>
|
|
|
|
|
|
|
|
<script>
|
|
require(['echarts'/*, 'map/js/china' */], function (echarts) {
|
|
var data = [{
|
|
children: [{
|
|
value: 5,
|
|
children: [{
|
|
value: 1
|
|
}, {
|
|
value: 2,
|
|
children: [{
|
|
value: 1
|
|
}]
|
|
}, {
|
|
children: [{
|
|
value: 1
|
|
}]
|
|
}]
|
|
}, {
|
|
value: 10,
|
|
children: [{
|
|
value: 6,
|
|
children: [{
|
|
value: 1
|
|
}, {
|
|
value: 1
|
|
}, {
|
|
value: 1
|
|
}, {
|
|
value: 1
|
|
}]
|
|
}, {
|
|
value: 2,
|
|
children: [{
|
|
value: 1
|
|
}]
|
|
}, {
|
|
children: [{
|
|
value: 1
|
|
}]
|
|
}]
|
|
}]
|
|
}, {
|
|
value: 9,
|
|
children: [{
|
|
value: 4,
|
|
children: [{
|
|
value: 2
|
|
}, {
|
|
children: [{
|
|
value: 1
|
|
}]
|
|
}]
|
|
}, {
|
|
children: [{
|
|
value: 3,
|
|
children: [{
|
|
value: 1
|
|
}, {
|
|
value: 1
|
|
}]
|
|
}]
|
|
}]
|
|
}, {
|
|
value: 7,
|
|
children: [{
|
|
children: [{
|
|
value: 1
|
|
}, {
|
|
value: 3,
|
|
children: [{
|
|
value: 1
|
|
}, {
|
|
value: 1
|
|
}]
|
|
}, {
|
|
value: 2,
|
|
children: [{
|
|
value: 1
|
|
}, {
|
|
value: 1
|
|
}]
|
|
}]
|
|
}]
|
|
}, {
|
|
children: [{
|
|
value: 6,
|
|
children: [{
|
|
value: 1
|
|
}, {
|
|
value: 2,
|
|
children: [{
|
|
value: 2
|
|
}]
|
|
}, {
|
|
value: 1
|
|
}]
|
|
}, {
|
|
value: 3,
|
|
children: [{
|
|
value: 1,
|
|
}, {
|
|
children: [{
|
|
value: 1
|
|
}]
|
|
}, {
|
|
value: 1
|
|
}]
|
|
}]
|
|
}];
|
|
|
|
var option = {
|
|
aria: {
|
|
decal: { show: true }
|
|
},
|
|
series: {
|
|
type: 'sunburst',
|
|
data: data
|
|
}
|
|
};
|
|
|
|
var chart = testHelper.create(echarts, 'main-sunburst', {
|
|
title: [
|
|
'All sunburst nodes should have decal (by 1st level) (they are from palette)'
|
|
],
|
|
option: option
|
|
});
|
|
});
|
|
</script>
|
|
|
|
|
|
|
|
<script>
|
|
require(['echarts'/*, 'map/js/china' */], function (echarts) {
|
|
var option = {
|
|
aria: {
|
|
decal: { show: true }
|
|
},
|
|
series: [{
|
|
name: 'tm',
|
|
type: 'treemap',
|
|
roam: false,
|
|
label: {
|
|
position: 'insideRight',
|
|
emphasis: {
|
|
show: true
|
|
}
|
|
},
|
|
leafDepth: 1,
|
|
levels: [{
|
|
itemStyle: {
|
|
borderColor: '#333',
|
|
borderWidth: 4,
|
|
gapWidth: 2
|
|
}
|
|
}, {
|
|
itemStyle: {
|
|
borderColor: '#aaa',
|
|
gapWidth: 2,
|
|
borderWidth: 2
|
|
},
|
|
colorSaturation: [0.2, 0.7]
|
|
}],
|
|
data: [{
|
|
name: 'a',
|
|
value: 10,
|
|
children: [{
|
|
name: 'a1',
|
|
value: 11,
|
|
children: [{
|
|
name: 'a11',
|
|
value: 111,
|
|
}, {
|
|
name: 'a111',
|
|
value: 1111
|
|
}, {
|
|
name: 'a112',
|
|
value: 1111
|
|
}, {
|
|
name: 'a113',
|
|
value: 111
|
|
}, {
|
|
name: 'a114',
|
|
value: 111
|
|
}, {
|
|
name: 'a115',
|
|
value: 1100
|
|
}]
|
|
}]
|
|
}, {
|
|
name: 'b',
|
|
value: 6,
|
|
children: [{
|
|
name: 'b1',
|
|
value: 15,
|
|
children: [{
|
|
name: 'b11',
|
|
value: 120
|
|
}]
|
|
}]
|
|
}]
|
|
}]
|
|
};
|
|
|
|
var chart = testHelper.create(echarts, 'main-treemap', {
|
|
title: [
|
|
'All treemap nodes should have decal (by 1st level) (they are from palette)'
|
|
],
|
|
option: option
|
|
});
|
|
});
|
|
</script>
|
|
|
|
|
|
|
|
|
|
<script>
|
|
require(['echarts'/*, 'map/js/china' */], function (echarts) {
|
|
|
|
function renderItem(params, api) {
|
|
var pos = api.coord([api.value(0), api.value(1)]);
|
|
var paletteColor = api.visual('color');
|
|
var paletteDecal = api.visual('decal');
|
|
if (params.dataIndex === 0) {
|
|
return {
|
|
type: 'group',
|
|
x: pos[0],
|
|
y: pos[1],
|
|
children: [{
|
|
type: 'circle',
|
|
shape: { cx: 0, cy: 0, r: 30 },
|
|
style: {
|
|
fill: 'orange',
|
|
decal: {
|
|
color: 'blue',
|
|
dashArrayX: [1, 0],
|
|
dashArrayY: [4, 3],
|
|
dashLineOffset: 0,
|
|
rotation: -Math.PI / 4
|
|
}
|
|
}
|
|
}, {
|
|
type: 'circle',
|
|
shape: { cx: 60, cy: 0, r: 30 },
|
|
style: { fill: 'orange' }
|
|
}]
|
|
}
|
|
}
|
|
else {
|
|
return {
|
|
type: 'group',
|
|
x: pos[0],
|
|
y: pos[1],
|
|
children: [{
|
|
type: 'rect',
|
|
shape: { x: -20, y: -20, width: 40, height: 40 },
|
|
style: { fill: paletteColor, decal: paletteDecal },
|
|
}, {
|
|
type: 'rect',
|
|
shape: { x: 60 - 20, y: -20, width: 40, height: 40 },
|
|
style: { fill: paletteColor, decal: paletteDecal },
|
|
}]
|
|
}
|
|
}
|
|
}
|
|
|
|
var option = {
|
|
xAxis: {
|
|
},
|
|
yAxis: {
|
|
},
|
|
series: [{
|
|
type: 'custom',
|
|
renderItem: renderItem,
|
|
data: [ [11, 22], [55, 22] ]
|
|
}, {
|
|
type: 'custom',
|
|
renderItem: renderItem,
|
|
data: [ [11, 55], [55, 55] ]
|
|
}, {
|
|
type: 'custom',
|
|
renderItem: renderItem,
|
|
data: [ [11, 88], [55, 88] ]
|
|
}],
|
|
aria: {
|
|
decal: {
|
|
show: true
|
|
}
|
|
}
|
|
};
|
|
|
|
var chart = testHelper.create(echarts, 'main-custom-series', {
|
|
title: [
|
|
'All circle/rect should show decals.',
|
|
'Circel should be in specified decal (in **blue**) and specified color (in **orange**).',
|
|
'Rect should be in palette decal and palette color'
|
|
],
|
|
option: option
|
|
// height: 300,
|
|
// buttons: [{text: 'btn-txt', onclick: function () {}}],
|
|
// recordCanvas: true,
|
|
});
|
|
});
|
|
</script>
|
|
|
|
|
|
|
|
|
|
<script>
|
|
require(['echarts'/*, 'map/js/china' */], function (echarts) {
|
|
|
|
var d = 30;
|
|
var path = [
|
|
'M12.815,443.027 C28.577,427.267 54.221,427.267 69.981,443.027 C85.736,458.781 85.735,484.423 69.983,500.182 C54.221,515.938 28.574,515.938 12.817,500.187 C-2.939,484.424 -2.94,458.782 12.815,443.027 Z M98.66,335.96 C114.421,351.721 114.421,377.366 98.659,393.127 C82.905,408.881 57.263,408.88 41.505,393.129 C25.75,377.366 25.75,351.719 41.501,335.962 C57.264,320.206 82.905,320.205 98.66,335.96 Z M119.871,414.332 C135.633,398.575 161.275,398.575 177.029,414.33 C192.79,430.091 192.789,455.736 177.029,471.497 C161.275,487.251 135.633,487.25 119.875,471.499 C104.12,455.736 104.12,430.089 119.871,414.332 Z M226.928,385.633 C242.69,369.877 268.332,369.876 284.087,385.631 C299.848,401.392 299.847,427.037 284.087,442.798 C268.333,458.552 242.691,458.551 226.933,442.8 C211.177,427.037 211.177,401.39 226.928,385.633 Z M205.718,307.272 C221.479,323.032 221.479,348.677 205.718,364.439 C189.964,380.193 164.322,380.192 148.564,364.441 C132.808,348.678 132.808,323.031 148.559,307.274 C164.322,291.518 189.963,291.517 205.718,307.272 Z M127.35,286.061 C111.596,301.815 85.954,301.814 70.196,286.063 C54.44,270.3 54.44,244.653 70.191,228.896 C85.954,213.14 111.595,213.139 127.35,228.894 C143.111,244.655 143.11,270.3 127.35,286.061 Z M156.038,179.002 C140.284,194.757 114.642,194.756 98.884,179.004 C83.128,163.241 83.128,137.594 98.879,121.837 C114.642,106.081 140.283,106.08 156.038,121.835 C171.799,137.596 171.798,163.241 156.038,179.002 Z M312.776,278.583 C328.537,294.344 328.537,319.989 312.776,335.75 C297.022,351.504 271.38,351.503 255.622,335.752 C239.866,319.989 239.866,294.342 255.617,278.585 C271.38,262.829 297.021,262.828 312.776,278.583 Z M333.998,356.957 C349.76,341.201 375.402,341.2 391.158,356.955 C406.919,372.716 406.918,398.361 391.158,414.122 C375.403,429.876 349.761,429.875 334.003,414.124 C318.247,398.361 318.247,372.714 333.998,356.957 Z M498,96.401 C506.284,96.401 513,103.118 513,111.402 C513,119.686 506.284,126.402 498,126.402 L407.813,126.402 L372.14,162.075 C369.464,157.907 366.319,153.955 362.677,150.313 C359.069,146.705 355.127,143.554 350.936,140.853 L366.275,125.513 C332.601,120.212 306.265,91.06 306.265,55.167 L306.265,15 C306.265,6.716 312.981,0 321.265,0 L345.365,0 C384.769,0 416.599,31.882 416.599,71.233 L416.599,96.401 L498,96.401 Z M284.31,228.694 C268.554,212.932 268.554,187.284 284.305,171.527 C300.068,155.771 325.709,155.77 341.464,171.525 C357.225,187.286 357.224,212.931 341.464,228.692 C325.71,244.446 300.068,244.445 284.31,228.694 Z M263.092,150.319 C247.337,166.074 221.696,166.073 205.937,150.321 C190.182,134.558 190.182,108.911 205.933,93.154 C221.696,77.398 247.337,77.397 263.092,93.152 C278.853,108.913 278.852,134.558 263.092,150.319 Z M177.25,257.381 C161.489,241.62 161.489,215.975 177.248,200.216 C193.011,184.46 218.652,184.46 234.407,200.214 C250.168,215.975 250.168,241.62 234.407,257.381 C218.652,273.135 193.011,273.135 177.25,257.381 Z M362.678,249.905 C378.438,234.144 404.083,234.145 419.844,249.905 C435.602,265.663 435.602,291.304 419.844,307.062 C404.083,322.823 378.439,322.823 362.678,307.063 C346.92,291.304 346.92,265.663 362.678,249.905 Z',
|
|
'M251.78,126.4 C248.1,100.164 235.969,75.729 217.101,56.862 L210.997,50.758 C230.887,20.228 265.323,-1.42108547e-14 304.4,-1.42108547e-14 L384.733,-1.42108547e-14 C393.017,-1.42108547e-14 399.733,6.716 399.733,15 C399.733,76.426 349.76,126.4 288.333,126.4 L251.78,126.4 Z M174.675,99.289 L149.194,73.806 C143.336,67.948 143.336,58.451 149.194,52.593 C155.052,46.736 164.55,46.736 170.407,52.593 L195.888,78.075 C211.81,93.997 221.19,114.703 222.744,136.95 C217.759,138.31 212.836,139.885 208,141.671 C202.962,139.81 197.83,138.182 192.632,136.784 C191.123,122.622 184.886,109.499 174.675,99.289 Z M269.343,160.667 C350.1,160.667 415.8,226.367 415.8,307.124 C415.8,385.71 338.539,512 269.343,512 C252.999,512 235.815,505.259 218.269,491.966 C212.239,487.429 203.762,487.432 197.695,492 C180.178,505.263 162.995,512 146.657,512 C77.075,512 0.2,385.291 0.2,307.124 C0.2,226.367 65.9,160.667 146.657,160.667 C167.837,160.667 188.883,165.299 208,174.12 C227.117,165.299 248.163,160.667 269.343,160.667 Z',
|
|
'M267.157,227.326 C210.111,269.798 144.193,291.333 71.233,291.334 C49.528,291.334 31.362,306.781 27.153,327.26 C11.883,313.249 -1.13686838e-13,292.601 -1.13686838e-13,264.05 L-1.13686838e-13,256 C-1.13686838e-13,247.716 6.716,241 15,241 L97.486,241 C169.209,241 245.378,223.348 315.718,183.492 C302.506,197.829 286.38,213.014 267.157,227.326 Z M143.533,371.667 C118.72,371.667 98.533,391.854 98.532,416.667 C98.532,417.525 98.548,418.379 98.565,419.232 C73.198,403.981 56.233,376.202 56.233,344.383 L56.233,336.333 C56.233,328.049 62.949,321.333 71.233,321.333 C214.679,321.333 306.098,244.189 354.102,184.97 C348.535,232.069 327.511,275.624 293.501,309.619 C253.47,349.631 200.21,371.667 143.533,371.667 Z M368.225,112.327 L338.983,53.846 C335.278,46.437 338.282,37.426 345.691,33.722 L409.958,1.588 C417.384,-2.125 426.388,0.907 430.083,8.296 C440.992,30.114 445.601,54.489 443.41,78.784 C442.741,86.198 441.441,93.504 439.551,100.635 C432.128,99.26 424.481,98.534 416.666,98.534 L400.6,98.534 C387.897,98.534 376.415,103.833 368.225,112.327 Z M416.667,128.533 C469.233,128.533 512,171.3 512,223.866 C512,383.027 383.225,512 223.866,512 C171.426,512 128.533,469.651 128.533,416.667 C128.533,408.383 135.249,401.667 143.533,401.667 C277.247,401.667 385.6,293.476 385.6,159.6 L385.6,143.533 C385.6,135.249 392.316,128.533 400.6,128.533 L416.667,128.533 Z'
|
|
]
|
|
var option = {
|
|
series: [{
|
|
type: 'pie',
|
|
data: [{
|
|
value: 110,
|
|
name: 'Grapes'
|
|
}, {
|
|
value: 80,
|
|
name: 'Apples'
|
|
}, {
|
|
value: 40,
|
|
name: 'Bananas'
|
|
}],
|
|
label: {
|
|
fontSize: 16
|
|
},
|
|
labelLine: {
|
|
lineStyle: {
|
|
width: 2
|
|
}
|
|
}
|
|
}],
|
|
|
|
aria: {
|
|
decal: {
|
|
show: true,
|
|
decals: [{
|
|
dashArrayX: [[d, d], [0, d, d, 0]],
|
|
dashArrayY: [d, 0],
|
|
symbol: 'path://' + path[0],
|
|
symbolKeepAspect: true,
|
|
symbolSize: 0.8
|
|
}, {
|
|
dashArrayX: [[d, d], [0, d, d, 0]],
|
|
dashArrayY: [d, 0],
|
|
symbol: 'path://' + path[1],
|
|
symbolKeepAspect: true,
|
|
symbolSize: 0.8
|
|
}, {
|
|
dashArrayX: [[d, d], [0, d, d, 0]],
|
|
dashArrayY: [d, 0],
|
|
symbol: 'path://' + path[2],
|
|
symbolKeepAspect: true,
|
|
symbolSize: 0.8
|
|
}]
|
|
}
|
|
},
|
|
|
|
color: ['#7862A5', '#DD5353', '#FDD344'],
|
|
|
|
};
|
|
|
|
var chart = testHelper.create(echarts, 'main-fruit', {
|
|
title: [
|
|
'Symbols should keep aspect ratio'
|
|
],
|
|
option: option
|
|
// height: 300,
|
|
// buttons: [{text: 'btn-txt', onclick: function () {}}],
|
|
// recordCanvas: true,
|
|
});
|
|
});
|
|
</script>
|
|
|
|
|
|
<script>
|
|
require(['echarts'/*, 'map/js/china' */], function (echarts) {
|
|
var option = {
|
|
series: [{
|
|
type: 'bar',
|
|
name: 'Apples',
|
|
data: [108, 26, 39, 24],
|
|
itemStyle: {
|
|
borderColor: 'black',
|
|
borderWidth: 2
|
|
}
|
|
}, {
|
|
type: 'bar',
|
|
name: 'Oranges',
|
|
data: [23, 40, 60, 70],
|
|
itemStyle: {
|
|
borderColor: 'black',
|
|
borderWidth: 2
|
|
}
|
|
}, {
|
|
type: 'bar',
|
|
name: 'Bananas',
|
|
data: [129, 40, 40, 50],
|
|
itemStyle: {
|
|
borderColor: 'black',
|
|
borderWidth: 2
|
|
}
|
|
}, {
|
|
type: 'bar',
|
|
name: 'Pears',
|
|
data: [40, 60, 50, 89],
|
|
itemStyle: {
|
|
borderColor: 'black',
|
|
borderWidth: 2
|
|
}
|
|
}],
|
|
|
|
xAxis: {
|
|
data: ['Q1', 'Q2', 'Q3', 'Q4'],
|
|
axisLine: {
|
|
color: 'black'
|
|
},
|
|
axisTick: {
|
|
color: 'black'
|
|
},
|
|
axisLabel: {
|
|
color: 'black'
|
|
}
|
|
},
|
|
yAxis: {
|
|
axisLine: {
|
|
color: 'black'
|
|
},
|
|
axisTick: {
|
|
color: 'black'
|
|
},
|
|
axisLabel: {
|
|
color: 'black'
|
|
},
|
|
splitLine: {
|
|
lineStyle: {
|
|
color: 'black',
|
|
type: 'dashed'
|
|
}
|
|
}
|
|
},
|
|
|
|
aria: {
|
|
decal: {
|
|
show: true,
|
|
decals: [{
|
|
dashArrayX: 0,
|
|
dashArrayY: 0,
|
|
color: 'black'
|
|
}, {
|
|
dashArrayX: 0,
|
|
dashArrayY: 0,
|
|
color: 'black'
|
|
}, {
|
|
dashArrayX: [1, 0],
|
|
dashArrayY: [2, 5],
|
|
symbolSize: 1,
|
|
rotation: Math.PI / 6,
|
|
color: 'black'
|
|
}, {
|
|
symbol: 'circle',
|
|
dashArrayX: [[8, 8], [0, 8, 8, 0]],
|
|
dashArrayY: [6, 0],
|
|
symbolSize: 0.8,
|
|
color: 'black'
|
|
}]
|
|
}
|
|
},
|
|
|
|
color: ['white', 'black', 'white', 'white']
|
|
};
|
|
|
|
var chart = testHelper.create(echarts, 'main-newspaper', {
|
|
title: [
|
|
'Two-color decals'
|
|
],
|
|
option: option
|
|
// height: 300,
|
|
// buttons: [{text: 'btn-txt', onclick: function () {}}],
|
|
// recordCanvas: true,
|
|
});
|
|
});
|
|
</script>
|
|
|
|
|
|
|
|
</body>
|
|
</html>
|
|
|