469 lines
14 KiB
HTML
Generated
469 lines
14 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="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>
|
|
|
|
|
|
<script>
|
|
require(['echarts'], function (echarts) {
|
|
var option = {
|
|
angleAxis: {
|
|
max: 3,
|
|
startAngle: 30,
|
|
splitLine: {
|
|
show: false
|
|
}
|
|
},
|
|
radiusAxis: {
|
|
type: 'category',
|
|
data: ['v', 'w', 'x', 'y', 'z'],
|
|
show: false
|
|
},
|
|
polar: {
|
|
radius: [10, '80%']
|
|
},
|
|
series: [{
|
|
type: 'bar',
|
|
data: [4, 3, 2, 1, 0],
|
|
coordinateSystem: 'polar',
|
|
name: 'Without Round Cap',
|
|
color: 'rgba(200, 0, 0, 0.5)',
|
|
itemStyle: {
|
|
borderColor: 'red',
|
|
borderWidth: 1
|
|
}
|
|
}, {
|
|
type: 'bar',
|
|
data: [4, 3, 2, 1, 0],
|
|
coordinateSystem: 'polar',
|
|
name: 'With Round Cap',
|
|
roundCap: true,
|
|
color: 'rgba(0, 200, 0, 0.5)',
|
|
itemStyle: {
|
|
borderColor: 'green',
|
|
borderWidth: 1
|
|
}
|
|
}],
|
|
legend: {
|
|
show: true,
|
|
data: ['Without Round Cap', 'With Round Cap']
|
|
}
|
|
};
|
|
|
|
var chart = testHelper.create(echarts, 'main1', {
|
|
title: [
|
|
'Polar bar with and without round cap on rotated axis',
|
|
'Check the split position without round cap, which should always point to 0 when data larger than 100%'
|
|
],
|
|
option: option
|
|
});
|
|
});
|
|
</script>
|
|
|
|
|
|
<script>
|
|
require(['echarts'], function (echarts) {
|
|
var data1 = [];
|
|
var data2 = [];
|
|
for (var i = 1; i <= 6; ++i) {
|
|
data1.push(i);
|
|
data2.push(6 - i);
|
|
}
|
|
|
|
var option = {
|
|
angleAxis: {
|
|
max: 5,
|
|
show: false
|
|
},
|
|
radiusAxis: {
|
|
type: 'category',
|
|
data: data1,
|
|
z: 10,
|
|
show: false
|
|
},
|
|
polar: {
|
|
show: false,
|
|
radius: '80%'
|
|
},
|
|
series: [{
|
|
type: 'bar',
|
|
data: data1,
|
|
coordinateSystem: 'polar',
|
|
name: 'A',
|
|
roundCap: true,
|
|
color: 'rgba(200, 0, 0, 0.5)',
|
|
itemStyle: {
|
|
borderColor: 'red',
|
|
borderWidth: 1
|
|
}
|
|
}, {
|
|
type: 'bar',
|
|
data: data2,
|
|
coordinateSystem: 'polar',
|
|
name: 'B',
|
|
roundCap: true,
|
|
color: 'rgba(0, 200, 0, 0.5)',
|
|
itemStyle: {
|
|
borderColor: 'green',
|
|
borderWidth: 1
|
|
}
|
|
}],
|
|
legend: {
|
|
show: true,
|
|
data: ['A', 'B']
|
|
},
|
|
tooltip: {
|
|
show: true
|
|
}
|
|
};
|
|
|
|
var chart = testHelper.create(echarts, 'main2', {
|
|
title: [
|
|
'Polar bar with round cap'
|
|
],
|
|
option: option
|
|
});
|
|
});
|
|
</script>
|
|
|
|
|
|
<script>
|
|
require(['echarts'], function (echarts) {
|
|
var option = {
|
|
angleAxis: {
|
|
max: 5
|
|
},
|
|
radiusAxis: {
|
|
type: 'category',
|
|
data: ['a'],
|
|
z: 10
|
|
},
|
|
polar: {
|
|
radius: ['25%', '60%']
|
|
},
|
|
series: [{
|
|
type: 'bar',
|
|
data: [0],
|
|
coordinateSystem: 'polar',
|
|
name: 'A',
|
|
roundCap: true,
|
|
color: 'rgba(200, 0, 0, 0.5)',
|
|
itemStyle: {
|
|
borderColor: 'red',
|
|
borderWidth: 1
|
|
},emphasis:{
|
|
itemStyle:{
|
|
color:'red',
|
|
borderColor:'blue'
|
|
}
|
|
}
|
|
}],
|
|
legend: {
|
|
show: true,
|
|
data: ['A']
|
|
},
|
|
tooltip: {
|
|
show: true
|
|
}
|
|
};
|
|
|
|
var chart = testHelper.create(echarts, 'main3', {
|
|
title: [
|
|
'Polar radius and animation test',
|
|
'Click button to check animation',
|
|
'Data add 3 by each click; data change to 1 when bigger than 10'
|
|
],
|
|
option: option,
|
|
buttons: [{
|
|
text: 'Change data',
|
|
onclick: function () {
|
|
if (option.series[0].data[0] > 10) {
|
|
option.series[0].data[0] = 1;
|
|
}
|
|
else {
|
|
option.series[0].data[0] += 3;
|
|
}
|
|
chart.setOption(option);
|
|
}
|
|
}]
|
|
});
|
|
});
|
|
</script>
|
|
|
|
|
|
<script>
|
|
require(['echarts'], function (echarts) {
|
|
var option = {
|
|
angleAxis: [{
|
|
type: 'value'
|
|
}, {
|
|
type: 'value',
|
|
polarIndex: 1
|
|
}],
|
|
radiusAxis: [{
|
|
type: 'category',
|
|
data: ['a', 'b', 'c'],
|
|
z: 10
|
|
}, {
|
|
type: 'category',
|
|
data: ['a', 'b', 'c'],
|
|
z: 10,
|
|
polarIndex: 1,
|
|
inverse: true
|
|
}],
|
|
polar: [{
|
|
radius: ['10%', '50%'],
|
|
center: ['25%', '50%']
|
|
}, {
|
|
radius: ['10%', '50%'],
|
|
center: ['75%', '50%']
|
|
}],
|
|
series: [{
|
|
type: 'bar',
|
|
data: [1, 3, 2],
|
|
coordinateSystem: 'polar',
|
|
name: 'A',
|
|
roundCap: true,
|
|
polarIndex: 0
|
|
}, {
|
|
type: 'bar',
|
|
data: [1, 3, 2],
|
|
coordinateSystem: 'polar',
|
|
name: 'A',
|
|
roundCap: true,
|
|
polarIndex: 1
|
|
}]
|
|
};
|
|
|
|
var chart = testHelper.create(echarts, 'main4', {
|
|
title: [
|
|
'Polar radius axis inverse tests'
|
|
],
|
|
option: option
|
|
});
|
|
});
|
|
</script>
|
|
|
|
|
|
<script>
|
|
require(['echarts'], function (echarts) {
|
|
let hoverColors = [
|
|
'255,0,0',
|
|
'0,128,0',
|
|
'0,0,255',
|
|
];
|
|
let hoverIndex = 0;
|
|
|
|
let getOptions = function(hoverIndex){
|
|
return {
|
|
angleAxis: {
|
|
max: 5
|
|
},
|
|
radiusAxis: {
|
|
type: 'category',
|
|
data: ['a'],
|
|
z: 10
|
|
},
|
|
polar: {
|
|
radius: ['20%', '60%']
|
|
},
|
|
series: [{
|
|
type: 'bar',
|
|
data: [4],
|
|
coordinateSystem: 'polar',
|
|
name: 'A',
|
|
roundCap: true,
|
|
animationDuration:500,
|
|
color: `rgba(${hoverColors[hoverIndex]},0.5)`,
|
|
itemStyle: {
|
|
borderColor: `rgb(${hoverColors[hoverIndex]})`,
|
|
borderWidth: 0
|
|
},
|
|
emphasis: {
|
|
itemStyle: {
|
|
color: `rgb(${hoverColors[hoverIndex]})`,
|
|
borderColor: `rgb(${hoverColors[hoverIndex]})`
|
|
}
|
|
}
|
|
}],
|
|
legend: {
|
|
show: true,
|
|
data: ['A']
|
|
},
|
|
tooltip: {
|
|
show: true
|
|
}
|
|
};
|
|
}
|
|
|
|
var chart = testHelper.create(echarts, 'main5', {
|
|
title: [
|
|
'Polar radius and value [0,\'-\',\'rational num\'] test',
|
|
'Click button to change hoverStyle and data value',
|
|
],
|
|
option: getOptions(hoverIndex),
|
|
buttons: [{
|
|
text: 'Change data',
|
|
onclick: function () {
|
|
++hoverIndex > 2 && (hoverIndex=0)
|
|
let option = chart.getOption();
|
|
|
|
if (option.series[0].data[0] == 0) {
|
|
option.series[0].data[0] = 4;
|
|
} else if (option.series[0].data[0] == 4) {
|
|
option.series[0].data[0] = '-';
|
|
} else if (option.series[0].data[0] = '-') {
|
|
option.series[0].data[0] = 0;
|
|
}
|
|
|
|
option.series[0].color = `rgba(${hoverColors[hoverIndex]},0.5)`;
|
|
option.series[0].emphasis.itemStyle = {
|
|
color:`rgb(${hoverColors[hoverIndex]})`,
|
|
borderColor:`rgb(${hoverColors[hoverIndex]})`
|
|
};
|
|
chart.setOption(option);
|
|
}
|
|
}]
|
|
});
|
|
});
|
|
</script>
|
|
|
|
|
|
<script>
|
|
require(['echarts'], function (echarts) {
|
|
var option = {
|
|
angleAxis: {
|
|
max: 5
|
|
},
|
|
radiusAxis: {
|
|
type: 'category',
|
|
data: ['a'],
|
|
z: 10
|
|
},
|
|
polar: {
|
|
radius: ['25%', '60%']
|
|
},
|
|
series: [{
|
|
type: 'bar',
|
|
data: [4],
|
|
coordinateSystem: 'polar',
|
|
name: 'A',
|
|
itemStyle: {
|
|
borderWidth: 1
|
|
},
|
|
animationDuration: 0,
|
|
animationDurationUpdate: 0
|
|
}]
|
|
};
|
|
|
|
setTimeout(() => {
|
|
option.series[0].roundCap = true;
|
|
option.series[0].data = [3];
|
|
chart.setOption(option);
|
|
}, 0);
|
|
|
|
var chart = testHelper.create(echarts, 'main6', {
|
|
title: [
|
|
'Expected roundCap',
|
|
'If there was not roundCap before and set roundCap to true, the bar roundCap should be updated'
|
|
],
|
|
option: option
|
|
});
|
|
});
|
|
</script>
|
|
|
|
|
|
<script>
|
|
require(['echarts'], function (echarts) {
|
|
var option = {
|
|
angleAxis: {
|
|
max: 5
|
|
},
|
|
radiusAxis: {
|
|
type: 'category',
|
|
data: ['a'],
|
|
z: 10
|
|
},
|
|
polar: {
|
|
radius: ['25%', '60%']
|
|
},
|
|
series: [{
|
|
type: 'bar',
|
|
data: [4],
|
|
roundCap: true,
|
|
coordinateSystem: 'polar',
|
|
name: 'A',
|
|
itemStyle: {
|
|
borderWidth: 1
|
|
},
|
|
animationDuration: 0,
|
|
animationDurationUpdate: 0
|
|
}]
|
|
};
|
|
|
|
setTimeout(() => {
|
|
option.series[0].roundCap = false;
|
|
option.series[0].data = [3];
|
|
chart.setOption(option);
|
|
}, 0);
|
|
|
|
var chart = testHelper.create(echarts, 'main7', {
|
|
title: [
|
|
'Expected no roundCap',
|
|
'If there was roundCap before and set roundCap to false, the bar roundCap should be updated'
|
|
],
|
|
option: option
|
|
});
|
|
});
|
|
</script>
|
|
|
|
</body>
|
|
</html>
|