480 lines
17 KiB
HTML
Generated
480 lines
17 KiB
HTML
Generated
|
|
<!--
|
|
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/facePrint.js"></script>
|
|
</head>
|
|
<body>
|
|
<style>
|
|
html, body {
|
|
width: 100%;
|
|
}
|
|
#main0, #main1 {
|
|
width: 100%;
|
|
height: 1000px;
|
|
margin-bottom: 30px;
|
|
}
|
|
#main2, #main3, #main4 {
|
|
width: 100%;
|
|
height: 300px;
|
|
margin-bottom: 30px;
|
|
}
|
|
#formatterSwitchButtons {
|
|
margin: 10px;
|
|
padding: 10px;
|
|
}
|
|
#currentFormatter {
|
|
margin: 10px;
|
|
padding: 10px;
|
|
border: 1px solid #aaa;
|
|
}
|
|
</style>
|
|
|
|
<div id="formatterSwitchButtons">
|
|
</div>
|
|
<div>
|
|
Current formatter:
|
|
<pre id="currentFormatter"></pre>
|
|
</div>
|
|
|
|
<script>
|
|
var _endLabelFormatter;
|
|
|
|
// Init formatter switch buttons.
|
|
(function () {
|
|
|
|
var formatterConfigs = [
|
|
{
|
|
text: 'formatter string {c}',
|
|
formatter: '$ {c}'
|
|
},
|
|
{
|
|
text: 'formatter string {@[dimIndex]}',
|
|
formatter: '$ {@[1]}'
|
|
},
|
|
{
|
|
text: 'formatter callback',
|
|
formatter: function (param) {
|
|
return '$ ' + param.value;
|
|
}
|
|
}
|
|
];
|
|
var END_LABEL_FORMATTER = '__EC_TEST_line-endLabel.html_FOMRATTER___';
|
|
|
|
function setLocalStorage(formatterKey) {
|
|
window.localStorage.setItem(END_LABEL_FORMATTER, formatterKey);
|
|
}
|
|
function getLocalStorage() {
|
|
return window.localStorage.getItem(END_LABEL_FORMATTER);
|
|
}
|
|
|
|
var currFormatterKey = getLocalStorage();
|
|
var fmtBtnBox = document.getElementById('formatterSwitchButtons');
|
|
for (var i = 0; i < formatterConfigs.length; i++) {
|
|
var config = formatterConfigs[i];
|
|
|
|
if (_endLabelFormatter == null
|
|
&& (
|
|
currFormatterKey == null
|
|
|| currFormatterKey === config.text
|
|
)
|
|
) {
|
|
_endLabelFormatter = config.formatter;
|
|
}
|
|
|
|
var btn = document.createElement('button');
|
|
btn.innerHTML = config.text;
|
|
btn.onclick = (function (cfg) {
|
|
return function () {
|
|
setLocalStorage(cfg.text);
|
|
typeof __VRT_RELOAD__ !== 'undefined' ? __VRT_RELOAD__() : location.reload();
|
|
};
|
|
})(config);
|
|
fmtBtnBox.appendChild(btn);
|
|
}
|
|
|
|
if (!_endLabelFormatter) {
|
|
throw new Error();
|
|
}
|
|
var formatterDisplayBox = document.getElementById('currentFormatter');
|
|
formatterDisplayBox.innerHTML = _endLabelFormatter.toString();
|
|
})();
|
|
|
|
</script>
|
|
|
|
|
|
<div id="main0"></div>
|
|
<div id="main1"></div>
|
|
<div id="main2"></div>
|
|
<div id="main3"></div>
|
|
<div id="main4"></div>
|
|
|
|
<script>
|
|
|
|
require([
|
|
'echarts'
|
|
], function (echarts) {
|
|
|
|
var xData = [];
|
|
var data = [];
|
|
var value = 200;
|
|
var positive = 1;
|
|
for (var i = 0; i < 12; ++i) {
|
|
xData.push(i + '');
|
|
var plus = i === 6 || i === 7
|
|
? 0
|
|
: positive * Math.round(Math.random() * 1000);
|
|
value = plus + value;
|
|
data.push(i === 3 ? '-' : value);
|
|
|
|
if (Math.random() > 0.7) {
|
|
positive = -1 * positive;
|
|
}
|
|
}
|
|
|
|
for (var cid = 0; cid < 2; ++cid) {
|
|
(function (cid) {
|
|
var chart = echarts.init(document.getElementById('main' + cid));
|
|
var option = {
|
|
title: [{
|
|
text: 'Line End Label Animation (connectNulls: '
|
|
+ (cid === 0 ? 'false' : 'true') + ')',
|
|
subtext: 'Symbol and text should sync with line clipPath\n\naxis not inversed',
|
|
textAlign: 'center',
|
|
left: '50%',
|
|
top: 0
|
|
}, {
|
|
subtext: 'X axis inversed',
|
|
textAlign: 'center',
|
|
left: '50%',
|
|
top: '28%'
|
|
}, {
|
|
subtext: 'Y axis inversed',
|
|
textAlign: 'center',
|
|
left: '50%',
|
|
top: '48%'
|
|
}, {
|
|
subtext: 'X and Y axes inversed',
|
|
textAlign: 'center',
|
|
left: '50%',
|
|
top: '74%'
|
|
}],
|
|
xAxis: [{
|
|
data: xData
|
|
}, {
|
|
gridIndex: 1
|
|
}, {
|
|
data: xData,
|
|
inverse: true,
|
|
gridIndex: 2
|
|
}, {
|
|
gridIndex: 3,
|
|
inverse: true
|
|
}, {
|
|
data: xData,
|
|
gridIndex: 4
|
|
}, {
|
|
gridIndex: 5
|
|
}, {
|
|
data: xData,
|
|
inverse: true,
|
|
gridIndex: 6
|
|
}, {
|
|
gridIndex: 7,
|
|
inverse: true
|
|
}],
|
|
yAxis: [{
|
|
}, {
|
|
data: xData,
|
|
gridIndex: 1
|
|
}, {
|
|
inverse: false,
|
|
gridIndex: 2
|
|
}, {
|
|
data: xData,
|
|
gridIndex: 3,
|
|
inverse: false
|
|
}, {
|
|
gridIndex: 4,
|
|
inverse: true
|
|
}, {
|
|
data: xData,
|
|
gridIndex: 5,
|
|
inverse: true
|
|
}, {
|
|
inverse: true,
|
|
gridIndex: 6
|
|
}, {
|
|
data: xData,
|
|
gridIndex: 7,
|
|
inverse: true
|
|
}],
|
|
grid: [{
|
|
left: 80,
|
|
top: 90,
|
|
right: '52%',
|
|
bottom: '74%'
|
|
}, {
|
|
left: '52%',
|
|
top: 90,
|
|
right: 50,
|
|
bottom: '74%'
|
|
}, {
|
|
left: 80,
|
|
right: '52%',
|
|
top: '32%',
|
|
bottom: '55%'
|
|
}, {
|
|
left: '52%',
|
|
right: 50,
|
|
top: '32%',
|
|
bottom: '55%'
|
|
}, {
|
|
left: 80,
|
|
top: '52%',
|
|
right: '52%',
|
|
bottom: '30%'
|
|
}, {
|
|
left: '52%',
|
|
top: '52%',
|
|
right: 50,
|
|
bottom: '30%'
|
|
}, {
|
|
left: 80,
|
|
right: '52%',
|
|
top: '78%',
|
|
bottom: 30
|
|
}, {
|
|
left: '52%',
|
|
right: 50,
|
|
top: '78%',
|
|
bottom: 30
|
|
}],
|
|
series: (function () {
|
|
var series = [];
|
|
for (var i = 0; i < 8; ++i) {
|
|
series.push({
|
|
type: 'line',
|
|
data: data,
|
|
connectNulls: cid === 1,
|
|
label: {
|
|
show: false
|
|
},
|
|
endLabel: {
|
|
show: true,
|
|
formatter: _endLabelFormatter,
|
|
fontSize: 20,
|
|
distance: 10,
|
|
color: 'inherit'
|
|
},
|
|
emphasis: {
|
|
endLabel: {
|
|
color: 'red'
|
|
}
|
|
},
|
|
xAxisIndex: i,
|
|
yAxisIndex: i
|
|
});
|
|
}
|
|
return series;
|
|
})(),
|
|
animationDuration: 10000,
|
|
animationDurationUpdate: 500
|
|
};
|
|
chart.setOption(option);
|
|
|
|
// setTimeout(function () {
|
|
// data.push(1000);
|
|
// data.push('-');
|
|
// data.push('-');
|
|
|
|
// xData.push('12');
|
|
// xData.push('13');
|
|
// xData.push('14');
|
|
|
|
// chart.setOption(option);
|
|
// }, 12000);
|
|
})(cid);
|
|
|
|
}
|
|
|
|
})
|
|
|
|
</script>
|
|
|
|
|
|
<script>
|
|
|
|
require([
|
|
'echarts'
|
|
], function (echarts) {
|
|
|
|
var xData = [];
|
|
var data = [];
|
|
var value = 200;
|
|
var positive = 1;
|
|
for (var i = 0; i < 12; ++i) {
|
|
xData.push(i + '');
|
|
var plus = i === 6 || i === 7
|
|
? 0
|
|
: positive * Math.round(Math.random() * 1000);
|
|
value = plus + value;
|
|
data.push(i === 3 ? '-' : value);
|
|
|
|
if (Math.random() > 0.7) {
|
|
positive = -1 * positive;
|
|
}
|
|
}
|
|
|
|
var chart = echarts.init(document.getElementById('main2'));
|
|
var option = {
|
|
title: [{
|
|
text: 'distance 50, offset [0, 20], rotate 5\nonhover: offset [0, -20], rotate -5',
|
|
textAlign: 'center',
|
|
left: '50%',
|
|
top: 0
|
|
}],
|
|
xAxis: [{
|
|
data: xData
|
|
}],
|
|
yAxis: [{
|
|
}],
|
|
series: [{
|
|
type: 'line',
|
|
data: data,
|
|
label: {
|
|
show: true
|
|
},
|
|
endLabel: {
|
|
show: true,
|
|
formatter: _endLabelFormatter,
|
|
fontSize: 14,
|
|
distance: 50,
|
|
offset: [0, 20],
|
|
rotate: 5,
|
|
color: 'auto'
|
|
},
|
|
emphasis: {
|
|
endLabel: {
|
|
color: 'red',
|
|
offset: [0, -20],
|
|
rotate: -5
|
|
}
|
|
}
|
|
}],
|
|
animationDuration: 10000,
|
|
animationDurationUpdate: 500
|
|
};
|
|
chart.setOption(option);
|
|
|
|
})
|
|
|
|
</script>
|
|
|
|
<script>
|
|
|
|
|
|
require([
|
|
'echarts'
|
|
], function (echarts) {
|
|
|
|
var chart = echarts.init(document.getElementById('main3'));
|
|
var option = {
|
|
title: [{
|
|
text: 'Emphasis on the data at "b" and endLabel should be displayed',
|
|
textAlign: 'center',
|
|
left: '50%',
|
|
top: 0
|
|
}],
|
|
xAxis: [{
|
|
data: ['a', 'b']
|
|
}],
|
|
yAxis: [{
|
|
}],
|
|
series: [{
|
|
type: 'line',
|
|
data: [1, 2],
|
|
endLabel: {
|
|
// show: true,
|
|
formatter: '{a}: {c}'
|
|
},
|
|
emphasis: {
|
|
endLabel: {
|
|
show: true,
|
|
color: 'red'
|
|
}
|
|
}
|
|
}],
|
|
animationDuration: 0
|
|
};
|
|
chart.setOption(option);
|
|
|
|
})
|
|
|
|
</script>
|
|
|
|
<script>
|
|
|
|
|
|
require([
|
|
'echarts'
|
|
], function (echarts) {
|
|
|
|
var chart = echarts.init(document.getElementById('main4'));
|
|
var option = {
|
|
title: [{
|
|
text: 'endLabel should not fail with null data',
|
|
textAlign: 'center',
|
|
left: '50%',
|
|
top: 0
|
|
}],
|
|
xAxis: [{
|
|
data: ['a', 'b']
|
|
}],
|
|
yAxis: [{
|
|
}],
|
|
series: [{
|
|
type: 'line',
|
|
data: [1, 2],
|
|
endLabel: {
|
|
show: true
|
|
}
|
|
}, {
|
|
type: 'line',
|
|
data: [null, '-'],
|
|
endLabel: {
|
|
show: true
|
|
}
|
|
}],
|
|
animationDuration: 5000
|
|
};
|
|
chart.setOption(option);
|
|
|
|
})
|
|
|
|
</script>
|
|
</body>
|
|
</html>
|