1357 lines
43 KiB
HTML
Generated
1357 lines
43 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">
|
|
<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/draggable.js"></script>
|
|
<meta name="viewport" content="width=device-width, initial-scale=1" />
|
|
<link rel="stylesheet" href="lib/reset.css">
|
|
</head>
|
|
<body>
|
|
<style>
|
|
h1 {
|
|
line-height: 60px;
|
|
height: 60px;
|
|
background: #a60;
|
|
text-align: center;
|
|
font-weight: bold;
|
|
color: #eee;
|
|
font-size: 14px;
|
|
}
|
|
.chart {
|
|
height: 500px;
|
|
}
|
|
</style>
|
|
|
|
<div class="chart" id="main0"></div>
|
|
<div class="chart" id="main1"></div>
|
|
<div class="chart" id="main2"></div>
|
|
<div class="chart" id="main3"></div>
|
|
<div class="chart" id="main4"></div>
|
|
<div class="chart" id="main5"></div>
|
|
<div class="chart" id="main6"></div>
|
|
<div class="chart" id="main6.5"></div>
|
|
<div class="chart" id="main7"></div>
|
|
<div class="chart" id="main8"></div>
|
|
<div class="chart" id="main9"></div>
|
|
<div class="chart" id="main10"></div>
|
|
|
|
|
|
<script>
|
|
|
|
require([
|
|
'echarts'
|
|
], function (echarts) {
|
|
|
|
var xAxisData = [];
|
|
var data1 = [];
|
|
var data2 = [];
|
|
var data3 = [];
|
|
|
|
var count = 100;
|
|
for (var i = 0; i < count; i++) {
|
|
|
|
if (i === 14 || i === 20) {
|
|
xAxisData.push({
|
|
value: '类目' + i,
|
|
textStyle: {
|
|
color: 'red'
|
|
}
|
|
});
|
|
} else {
|
|
xAxisData.push('类目' + i);
|
|
}
|
|
|
|
if (i < 5 && i > 1) {
|
|
data1.push(0);
|
|
}
|
|
else {
|
|
data1.push(+(Math.random() + 0.5).toFixed(3));
|
|
}
|
|
data2.push(+(Math.random() + 0.5).toFixed(3));
|
|
data3.push(+(Math.random() + 0.5).toFixed(3));
|
|
}
|
|
|
|
var itemStyle = {
|
|
normal: {
|
|
borderColor: 'white',
|
|
borderWidth: 3,
|
|
lineStyle: {
|
|
width: 1
|
|
}
|
|
}
|
|
};
|
|
|
|
// var rawData = [[0.877,1.384,0,0,0,1.422,1.363,0.867,0.782,1.025,0.819,0.638,1.192,0.56,1.17,1.056,0.804,0.657,1.157,0.906,1.462,0.856,1.384,0.978,0.766,0.683,1.383,0.65,1.343,1.303,1.298,0.812,0.665,1.182,0.528,0.613,1.101,0.959,0.997,1.381,1.172,1.01,1.23,0.596,1.256,1.406,1.172,0.85,1.194,1.313,1.142,0.985,1.059,1.07,1.205,1.359,0.93,0.514,1.197,1.259,1.225,1.371,0.825,0.967,0.569,1.432,0.892,1.36,0.644,1.096,1.006,0.613,0.549,1.263,1.203,0.556,1.044,1.338,0.8,1.137,1.164,1.44,0.995,0.989,1.098,0.563,0.768,0.584,0.794,1.33,0.687,0.89,1.317,1.466,1.01,0.886,0.964,1.244,1.421,0.922],[1.369,1.092,1.446,1.472,0.873,1.093,1.136,1.057,0.832,0.633,1.054,1.169,0.727,0.674,1.361,0.842,0.762,0.621,0.964,0.87,1.425,0.543,0.877,0.779,0.568,1.352,1.065,1.381,0.938,0.805,0.686,0.994,1.485,0.915,0.504,1.141,1.167,1.101,1.423,0.789,0.942,0.863,1.02,1.443,0.732,1.197,0.993,0.738,0.923,1.355,0.796,0.707,0.729,1.27,1.034,0.704,1.375,1.377,0.953,0.555,1.211,1.37,1.399,1.183,0.591,0.803,0.969,0.866,1.086,1.35,1.378,0.834,1.048,1.084,1.267,0.965,1.064,0.954,1.39,0.564,0.742,1.033,1.293,0.74,0.709,0.962,0.863,1.455,0.894,0.876,0.827,0.662,1.33,0.857,0.71,1.423,1.131,1.224,0.725,1.446],[0.895,1.487,0.63,1.245,1.184,0.738,0.905,1.299,1.16,0.904,0.902,1.231,0.919,1.067,1.319,0.939,1.424,1.348,0.537,0.519,0.542,1.091,1.351,1.337,0.674,1.112,1.218,1.317,0.62,0.686,0.683,1.273,1.096,1.324,1.448,1.157,0.8,0.878,0.83,1.069,1.261,0.968,1.043,0.55,0.73,0.886,0.8,0.943,0.597,0.93,0.794,1.43,0.941,1.376,0.647,0.848,1.273,0.853,0.585,0.899,0.649,1.217,1.097,1.273,1.165,0.648,0.622,1.111,0.626,0.75,1.477,1.13,0.6,0.855,1.463,1.414,1.487,0.992,0.948,1.333,0.791,0.654,0.511,1.471,0.626,1.286,0.547,1.082,1.195,1.29,0.794,1.294,1.136,0.807,0.647,1.415,0.674,0.869,1.437,0.711]];
|
|
// data1 = rawData[0];
|
|
// data2 = rawData[1];
|
|
// data3 = rawData[2];
|
|
|
|
var option = {
|
|
legend: {
|
|
data: ['line', 'line2', 'line3']
|
|
},
|
|
visualMap: null, // 用于测试 option 中含有null的情况。
|
|
tooltip: {
|
|
trigger: 'axis',
|
|
axisPointer: {
|
|
type: 'line'
|
|
}
|
|
},
|
|
xAxis: {
|
|
// data: ['类目1', '类目2', '类目3', '类目4', '类目5',]
|
|
data: xAxisData,
|
|
boundaryGap: false,
|
|
// inverse: true,
|
|
splitArea: {
|
|
show: false
|
|
},
|
|
splitLine: {
|
|
show: false
|
|
},
|
|
axisLabel: {
|
|
// showMaxLabel: true,
|
|
// showMinLabel: true
|
|
}
|
|
},
|
|
grid: {
|
|
left: '10%',
|
|
right: '10%'
|
|
},
|
|
yAxis: {
|
|
axisLabel: {
|
|
textStyle: {
|
|
color: 'red'
|
|
}
|
|
},
|
|
splitArea: {
|
|
show: true
|
|
}
|
|
},
|
|
dataZoom: [{
|
|
type: 'inside',
|
|
// start: 10,
|
|
// end: 12
|
|
startValue: 11,
|
|
endValue: 85
|
|
}, {
|
|
type: 'slider',
|
|
// start: 10,
|
|
// end: 12
|
|
startValue: 11,
|
|
endValue: 85
|
|
}],
|
|
// animationDurationUpdate: 2000,
|
|
// animation: false,
|
|
series: [
|
|
null, // 用于测试 option 中含有null的情况。
|
|
{
|
|
name: 'line',
|
|
type: 'line',
|
|
stack: 'all',
|
|
symbol: 'path://M164,210.677v33.47l154.656,66.356L468,243.681v-33.004H164L164,210.677z M164,282.255L164,282.255v134.76h304V282.061l-149.012,66.615L164,282.255L164,282.255z',
|
|
symbolKeepAspect: true,
|
|
symbolSize: 40,
|
|
data: data1,
|
|
itemStyle: itemStyle,
|
|
label: {
|
|
normal: {
|
|
show: true,
|
|
fontSize: 12
|
|
}
|
|
},
|
|
lineStyle: {
|
|
normal: {
|
|
shadowBlur: 4,
|
|
shadowOffsetX: 3,
|
|
shadowOffsetY: 3
|
|
}
|
|
},
|
|
step: 'end'
|
|
},
|
|
{
|
|
label: {
|
|
normal: {
|
|
show: true,
|
|
position: 'outside'
|
|
}
|
|
},
|
|
name: 'line2',
|
|
type: 'line',
|
|
stack: 'all',
|
|
symbol: 'circle',
|
|
symbolSize: 10,
|
|
data: data2,
|
|
itemStyle: itemStyle,
|
|
step: 'end'
|
|
},
|
|
{
|
|
name: 'line3',
|
|
type: 'line',
|
|
stack: 'all',
|
|
symbol: 'triangle',
|
|
symbolSize: 10,
|
|
data: data3,
|
|
itemStyle: itemStyle,
|
|
step: 'end'
|
|
}
|
|
]
|
|
};
|
|
|
|
chart = myChart = testHelper.create(echarts, 'main0', {
|
|
title: [
|
|
'(0) Move the slider zoom, check the tick and symbol animation stable (not change ticks selection)',
|
|
'(1) Adjust (zoom) the slider zoom to the extent of just change the tick interval.',
|
|
'(2) Move the slider zoom, CHECK whether the interval is stable (no jitter).'
|
|
],
|
|
option: option
|
|
});
|
|
});
|
|
|
|
</script>
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
<script>
|
|
|
|
require([
|
|
'echarts'
|
|
], function (echarts) {
|
|
|
|
var xAxisData = [];
|
|
var data1 = [];
|
|
var data2 = [];
|
|
var data3 = [];
|
|
|
|
for (var i = 0; i < 100; i++) {
|
|
xAxisData.push('类目' + i);
|
|
data1.push((Math.random() * 5).toFixed(2));
|
|
data2.push(-Math.random().toFixed(2));
|
|
data3.push((Math.random() + 0.5).toFixed(2));
|
|
}
|
|
|
|
var itemStyle = {
|
|
normal: {
|
|
barBorderRadius: 5,
|
|
label: {
|
|
show: true,
|
|
position: 'outside'
|
|
}
|
|
},
|
|
emphasis: {
|
|
label: {
|
|
position: 'outside'
|
|
},
|
|
barBorderColor: '#fff',
|
|
barBorderWidth: 1,
|
|
shadowBlur: 10,
|
|
shadowOffsetX: 0,
|
|
shadowOffsetY: 0,
|
|
shadowColor: 'rgba(0,0,0,0.5)'
|
|
}
|
|
};
|
|
|
|
var option = {
|
|
backgroundColor: '#eef',
|
|
legend: {
|
|
},
|
|
tooltip: {
|
|
trigger: 'axis',
|
|
axisPointer: {
|
|
type: 'shadow'
|
|
}
|
|
},
|
|
xAxis: {
|
|
data: xAxisData,
|
|
name: '横轴',
|
|
silent: false,
|
|
inverse: true,
|
|
axisTick: {
|
|
alignWithLabel: true
|
|
},
|
|
// axisLabel: {
|
|
// show: false
|
|
// },
|
|
// axisTick: {
|
|
// show: false
|
|
// },
|
|
axisLine: {
|
|
onZero: true,
|
|
// lineStyle: {
|
|
// width: 40
|
|
// }
|
|
},
|
|
splitLine: {
|
|
show: true,
|
|
lineStyle: {
|
|
color: 'green'
|
|
}
|
|
},
|
|
splitArea: {
|
|
show: true
|
|
}
|
|
},
|
|
yAxis: {
|
|
inverse: true,
|
|
// axisLabel: {
|
|
// show: false
|
|
// },
|
|
axisTick: {
|
|
show: false
|
|
},
|
|
// splitLine: {
|
|
// show: false
|
|
// },
|
|
splitArea: {
|
|
show: false
|
|
}
|
|
},
|
|
dataZoom: [{
|
|
type: 'inside'
|
|
}, {}],
|
|
series: [{
|
|
name: 'bar',
|
|
type: 'bar',
|
|
stack: 'one',
|
|
itemStyle: itemStyle,
|
|
cursor: 'move',
|
|
data: data1
|
|
}, {
|
|
name: 'bar2',
|
|
type: 'bar',
|
|
stack: 'one',
|
|
itemStyle: itemStyle,
|
|
cursor: 'default',
|
|
data: data2
|
|
}, {
|
|
name: 'bar3',
|
|
type: 'bar',
|
|
stack: 'two',
|
|
itemStyle: itemStyle,
|
|
data: data3
|
|
}]
|
|
};
|
|
|
|
chart = myChart = testHelper.create(echarts, 'main1', {
|
|
title: [
|
|
'(0) Zoom and check the splitLine(green) and splitArea when axis interval exists',
|
|
'(1) Check not split a single data item when odd category tick interval'
|
|
],
|
|
option: option
|
|
});
|
|
});
|
|
|
|
</script>
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
<script>
|
|
|
|
require([
|
|
'echarts'
|
|
], function (echarts) {
|
|
|
|
var xAxisData = [];
|
|
var data1 = [];
|
|
var data2 = [];
|
|
var data3 = [];
|
|
|
|
for (var i = 0; i < 100; i++) {
|
|
xAxisData.push('类目' + i);
|
|
data1.push((Math.random() * 5).toFixed(2));
|
|
data2.push(-Math.random().toFixed(2));
|
|
data3.push((Math.random() + 0.5).toFixed(2));
|
|
}
|
|
|
|
var itemStyle = {
|
|
normal: {
|
|
barBorderRadius: 5,
|
|
label: {
|
|
show: true,
|
|
position: 'outside'
|
|
}
|
|
},
|
|
emphasis: {
|
|
label: {
|
|
position: 'outside'
|
|
},
|
|
barBorderColor: '#fff',
|
|
barBorderWidth: 1,
|
|
shadowBlur: 10,
|
|
shadowOffsetX: 0,
|
|
shadowOffsetY: 0,
|
|
shadowColor: 'rgba(0,0,0,0.5)'
|
|
}
|
|
};
|
|
|
|
var option = {
|
|
backgroundColor: '#eef',
|
|
legend: {
|
|
},
|
|
tooltip: {
|
|
},
|
|
xAxis: {
|
|
data: xAxisData,
|
|
name: '横轴',
|
|
silent: false,
|
|
axisTick: {
|
|
alignWithLabel: true
|
|
},
|
|
// axisLabel: {
|
|
// show: false
|
|
// },
|
|
// axisTick: {
|
|
// show: false
|
|
// },
|
|
axisLine: {
|
|
onZero: true
|
|
},
|
|
splitLine: {
|
|
show: true,
|
|
lineStyle: {
|
|
color: 'green'
|
|
}
|
|
},
|
|
splitArea: {
|
|
show: true
|
|
}
|
|
},
|
|
yAxis: {
|
|
inverse: true,
|
|
// axisLabel: {
|
|
// show: false
|
|
// },
|
|
axisTick: {
|
|
show: false
|
|
},
|
|
// splitLine: {
|
|
// show: false
|
|
// },
|
|
splitArea: {
|
|
show: false
|
|
}
|
|
},
|
|
animationDurationUpdate: 800,
|
|
dataZoom: [{
|
|
type: 'inside',
|
|
startValue: 17,
|
|
endValue: 24,
|
|
zoomLock: true
|
|
}, {
|
|
startValue: 17,
|
|
endValue: 24,
|
|
zoomLock: true
|
|
}],
|
|
series: [{
|
|
name: 'bar',
|
|
type: 'bar',
|
|
stack: 'one',
|
|
itemStyle: itemStyle,
|
|
cursor: 'move',
|
|
data: data1
|
|
}, {
|
|
name: 'bar2',
|
|
type: 'bar',
|
|
stack: 'one',
|
|
itemStyle: itemStyle,
|
|
cursor: 'default',
|
|
data: data2
|
|
}, {
|
|
name: 'bar3',
|
|
type: 'bar',
|
|
stack: 'two',
|
|
itemStyle: itemStyle,
|
|
data: data3
|
|
}]
|
|
};
|
|
|
|
chart = myChart = testHelper.create(echarts, 'main2', {
|
|
title: [
|
|
'(0) Move and check splitArea and splitLine(green) animation (zoom locked)'
|
|
],
|
|
option: option
|
|
});
|
|
});
|
|
|
|
</script>
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
<script>
|
|
|
|
require([
|
|
'echarts'
|
|
], function (echarts) {
|
|
|
|
var xAxisData = [];
|
|
var data1 = [];
|
|
var data3 = [];
|
|
|
|
for (var i = 0; i < 100; i++) {
|
|
xAxisData.push('类目' + i);
|
|
data1.push((Math.random() * 5).toFixed(2));
|
|
data3.push((Math.random() + 0.5).toFixed(2));
|
|
}
|
|
|
|
var itemStyle = {
|
|
normal: {
|
|
barBorderRadius: 5,
|
|
label: {
|
|
show: true,
|
|
position: 'outside'
|
|
}
|
|
},
|
|
emphasis: {
|
|
label: {
|
|
position: 'outside'
|
|
},
|
|
barBorderColor: '#fff',
|
|
barBorderWidth: 1,
|
|
shadowBlur: 10,
|
|
shadowOffsetX: 0,
|
|
shadowOffsetY: 0,
|
|
shadowColor: 'rgba(0,0,0,0.5)'
|
|
}
|
|
};
|
|
|
|
var option = {
|
|
backgroundColor: '#eef',
|
|
legend: {
|
|
},
|
|
tooltip: {
|
|
trigger: 'axis',
|
|
axisPointer: {
|
|
type: 'shadow'
|
|
}
|
|
},
|
|
xAxis: {
|
|
data: xAxisData,
|
|
name: '横轴',
|
|
silent: false,
|
|
axisLine: {
|
|
onZero: true
|
|
},
|
|
splitArea: {
|
|
show: true
|
|
}
|
|
},
|
|
yAxis: {
|
|
axisTick: {
|
|
show: false
|
|
},
|
|
splitArea: {
|
|
show: false
|
|
}
|
|
},
|
|
dataZoom: [{
|
|
type: 'inside',
|
|
startValue: 17,
|
|
endValue: 24,
|
|
zoomLock: true
|
|
}, {
|
|
startValue: 17,
|
|
endValue: 24,
|
|
zoomLock: true
|
|
}],
|
|
series: [{
|
|
name: 'bar',
|
|
type: 'bar',
|
|
stack: 'one',
|
|
itemStyle: itemStyle,
|
|
cursor: 'move',
|
|
data: data1
|
|
}, {
|
|
name: 'bar3',
|
|
type: 'bar',
|
|
stack: 'two',
|
|
itemStyle: itemStyle,
|
|
data: data3
|
|
}]
|
|
};
|
|
|
|
chart = myChart = testHelper.create(echarts, 'main3', {
|
|
title: [
|
|
'alignWithTick: default (false), and boundaryGap: default (true)'
|
|
],
|
|
option: option
|
|
});
|
|
});
|
|
|
|
</script>
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
<script>
|
|
|
|
require([
|
|
'echarts'
|
|
], function (echarts) {
|
|
|
|
var xAxisData = [];
|
|
var data1 = [];
|
|
var data3 = [];
|
|
|
|
for (var i = 0; i < 100; i++) {
|
|
xAxisData.push('c' + i);
|
|
data1.push((Math.random() * 5).toFixed(2));
|
|
data3.push((Math.random() + 0.5).toFixed(2));
|
|
}
|
|
|
|
var option = {
|
|
legend: {
|
|
},
|
|
tooltip: {
|
|
trigger: 'axis',
|
|
axisPointer: {
|
|
type: 'shadow'
|
|
}
|
|
},
|
|
xAxis: {
|
|
data: xAxisData,
|
|
axisTick: {
|
|
interval: 4,
|
|
alignWithLabel: true
|
|
},
|
|
axisLabel: {
|
|
},
|
|
splitArea: {
|
|
show: true
|
|
}
|
|
},
|
|
yAxis: {
|
|
axisTick: {
|
|
show: false
|
|
},
|
|
splitArea: {
|
|
show: false
|
|
}
|
|
},
|
|
dataZoom: [{
|
|
type: 'inside',
|
|
startValue: 17,
|
|
endValue: 24
|
|
}, {
|
|
startValue: 17,
|
|
endValue: 24
|
|
}],
|
|
series: [{
|
|
name: 'bar',
|
|
type: 'bar',
|
|
stack: 'one',
|
|
cursor: 'move',
|
|
data: data1
|
|
}, {
|
|
name: 'bar3',
|
|
type: 'bar',
|
|
stack: 'two',
|
|
data: data3
|
|
}]
|
|
};
|
|
|
|
chart = myChart = testHelper.create(echarts, 'main4', {
|
|
title: [
|
|
'axisTick.interval is different from axisLabel.interval'
|
|
],
|
|
option: option
|
|
});
|
|
});
|
|
|
|
</script>
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
<script>
|
|
|
|
require([
|
|
'echarts'
|
|
], function (echarts) {
|
|
|
|
var xAxisData = [];
|
|
var data1 = [];
|
|
var data3 = [];
|
|
|
|
for (var i = 0; i < 100; i++) {
|
|
xAxisData.push('c' + i);
|
|
data1.push((Math.random() * 5).toFixed(2));
|
|
data3.push((Math.random() + 0.5).toFixed(2));
|
|
}
|
|
|
|
var option = {
|
|
legend: {
|
|
},
|
|
tooltip: {
|
|
trigger: 'axis',
|
|
axisPointer: {
|
|
type: 'shadow'
|
|
}
|
|
},
|
|
xAxis: [{
|
|
data: xAxisData,
|
|
name: 'axisLabel.interval is function',
|
|
nameLocation: 'middle',
|
|
nameGap: 20,
|
|
axisTick: {
|
|
alignWithLabel: true
|
|
},
|
|
axisLabel: {
|
|
interval: function (categoryIdx, categoryValue) {
|
|
return categoryIdx % 5 === 0;
|
|
}
|
|
},
|
|
splitArea: {
|
|
show: true
|
|
}
|
|
}, {
|
|
data: xAxisData,
|
|
name: 'axisTick.interval is function',
|
|
nameLocation: 'middle',
|
|
nameGap: 20,
|
|
gridIndex: 1,
|
|
axisTick: {
|
|
interval: function (categoryIdx, categoryValue) {
|
|
return categoryIdx % 5 === 0;
|
|
},
|
|
alignWithLabel: true
|
|
},
|
|
axisLabel: {
|
|
},
|
|
splitArea: {
|
|
show: true
|
|
}
|
|
}],
|
|
yAxis: [{
|
|
axisTick: {
|
|
show: false
|
|
},
|
|
splitArea: {
|
|
show: false
|
|
}
|
|
}, {
|
|
gridIndex: 1,
|
|
axisTick: {
|
|
show: false
|
|
},
|
|
splitArea: {
|
|
show: false
|
|
}
|
|
}],
|
|
grid: [{
|
|
bottom: '60%'
|
|
}, {
|
|
top: '52%',
|
|
bottom: 80
|
|
}],
|
|
dataZoom: [{
|
|
type: 'inside',
|
|
xAxisIndex: [0, 1],
|
|
startValue: 17,
|
|
endValue: 24
|
|
}, {
|
|
xAxisIndex: [0, 1],
|
|
startValue: 17,
|
|
endValue: 24
|
|
}],
|
|
series: [{
|
|
name: 'bar',
|
|
type: 'bar',
|
|
stack: 'one',
|
|
cursor: 'move',
|
|
data: data1
|
|
}, {
|
|
name: 'bar3',
|
|
type: 'bar',
|
|
stack: 'two',
|
|
data: data3
|
|
}, {
|
|
name: 'bar',
|
|
type: 'bar',
|
|
stack: 'one1',
|
|
cursor: 'move',
|
|
xAxisIndex: 1,
|
|
yAxisIndex: 1,
|
|
data: data1
|
|
}, {
|
|
name: 'bar3',
|
|
type: 'bar',
|
|
stack: 'two1',
|
|
xAxisIndex: 1,
|
|
yAxisIndex: 1,
|
|
data: data3
|
|
}]
|
|
};
|
|
|
|
chart = myChart = testHelper.create(echarts, 'main5', {
|
|
title: [
|
|
'axisLabel.interval and axisTick.interval are function'
|
|
],
|
|
option: option,
|
|
info: {xAxis: option.xAxis}
|
|
});
|
|
});
|
|
|
|
</script>
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
<script>
|
|
|
|
require([
|
|
'echarts'
|
|
], function (echarts) {
|
|
|
|
var xAxisData = [];
|
|
var data1 = [];
|
|
var data3 = [];
|
|
|
|
for (var i = 0; i < 100; i++) {
|
|
xAxisData.push('c' + i);
|
|
data1.push((Math.random() * 5).toFixed(2));
|
|
data3.push((Math.random() + 0.5).toFixed(2));
|
|
}
|
|
|
|
var option = {
|
|
legend: {
|
|
},
|
|
tooltip: {
|
|
trigger: 'axis',
|
|
axisPointer: {
|
|
type: 'shadow'
|
|
}
|
|
},
|
|
xAxis: {
|
|
data: xAxisData,
|
|
axisTick: {
|
|
alignWithLabel: true
|
|
},
|
|
axisLabel: {
|
|
show: false
|
|
},
|
|
splitArea: {
|
|
show: true
|
|
}
|
|
},
|
|
yAxis: {
|
|
axisLabel: {
|
|
show: false
|
|
},
|
|
splitArea: {
|
|
show: false
|
|
}
|
|
},
|
|
dataZoom: [{
|
|
type: 'inside',
|
|
startValue: 17,
|
|
endValue: 24
|
|
}, {
|
|
startValue: 17,
|
|
endValue: 24
|
|
}],
|
|
series: [{
|
|
name: 'bar',
|
|
type: 'bar',
|
|
stack: 'one',
|
|
cursor: 'move',
|
|
data: data1
|
|
}, {
|
|
name: 'bar3',
|
|
type: 'bar',
|
|
stack: 'two',
|
|
data: data3
|
|
}]
|
|
};
|
|
|
|
chart = myChart = testHelper.create(echarts, 'main6', {
|
|
title: [
|
|
'Only axisTick show, zoom and check axis tick.'
|
|
],
|
|
option: option,
|
|
info: {xAxis: option.xAxis}
|
|
});
|
|
});
|
|
|
|
</script>
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
<script>
|
|
|
|
require([
|
|
'echarts'
|
|
], function (echarts) {
|
|
|
|
var xAxisData = [];
|
|
var data1 = [];
|
|
var data3 = [];
|
|
|
|
for (var i = 0; i < 100; i++) {
|
|
xAxisData.push('c' + i);
|
|
data1.push((Math.random() * 5).toFixed(2));
|
|
data3.push((Math.random() + 0.5).toFixed(2));
|
|
}
|
|
|
|
var option = {
|
|
legend: {
|
|
},
|
|
tooltip: {
|
|
trigger: 'axis'
|
|
},
|
|
dataZoom: [{
|
|
type: 'inside',
|
|
xAxisIndex: 0,
|
|
startValue: 17,
|
|
endValue: 84
|
|
}, {
|
|
type: 'inside',
|
|
xAxisIndex: 1,
|
|
startValue: 17,
|
|
endValue: 84
|
|
}, {
|
|
xAxisIndex: [0, 1],
|
|
startValue: 17,
|
|
endValue: 84
|
|
}],
|
|
xAxis: [{
|
|
data: xAxisData,
|
|
// axisTick: {
|
|
// alignWithLabel: true
|
|
// },
|
|
axisLabel: {
|
|
show: false
|
|
},
|
|
splitArea: {
|
|
show: true
|
|
},
|
|
splitLine: {
|
|
show: true
|
|
}
|
|
}, {
|
|
data: xAxisData,
|
|
gridIndex: 1,
|
|
splitArea: {
|
|
show: true
|
|
},
|
|
splitLine: {
|
|
show: true
|
|
}
|
|
}],
|
|
yAxis: [{
|
|
}, {
|
|
gridIndex: 1,
|
|
axisLabel: {
|
|
showMaxLabel: false
|
|
}
|
|
}],
|
|
grid: [{
|
|
bottom: '50%'
|
|
}, {
|
|
top: '50%'
|
|
}],
|
|
series: [{
|
|
name: 'bar',
|
|
type: 'line',
|
|
stack: 'one',
|
|
cursor: 'move',
|
|
data: data1
|
|
}, {
|
|
name: 'bar3',
|
|
type: 'line',
|
|
stack: 'two',
|
|
xAxisIndex: 1,
|
|
yAxisIndex: 1,
|
|
data: data3
|
|
}]
|
|
};
|
|
|
|
chart = myChart = testHelper.create(echarts, 'main6.5', {
|
|
title: [
|
|
'The first grid has no label, the second grid has label.',
|
|
'splitLine and axisTick should be the same between the two grids.'
|
|
],
|
|
option: option,
|
|
info: {xAxis: option.xAxis}
|
|
});
|
|
});
|
|
|
|
</script>
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
<script>
|
|
|
|
require([
|
|
'echarts'
|
|
], function (echarts) {
|
|
|
|
var xAxisData = [];
|
|
var data1 = [];
|
|
var data3 = [];
|
|
|
|
for (var i = 0; i < 100; i++) {
|
|
xAxisData.push('c' + i);
|
|
data1.push((Math.random() * 5).toFixed(2));
|
|
data3.push((Math.random() + 0.5).toFixed(2));
|
|
}
|
|
|
|
var option = {
|
|
legend: {
|
|
},
|
|
tooltip: {
|
|
trigger: 'axis',
|
|
axisPointer: {
|
|
type: 'shadow'
|
|
}
|
|
},
|
|
xAxis: {
|
|
type: 'category',
|
|
axisTick: {
|
|
alignWithLabel: true
|
|
},
|
|
axisLabel: {
|
|
show: false
|
|
},
|
|
splitArea: {
|
|
show: true
|
|
},
|
|
min: -300,
|
|
max: 333333
|
|
},
|
|
yAxis: {
|
|
axisLabel: {
|
|
show: false
|
|
},
|
|
splitArea: {
|
|
show: false
|
|
}
|
|
},
|
|
dataZoom: [{
|
|
type: 'inside'
|
|
}, {
|
|
}],
|
|
series: [{
|
|
name: 'bar',
|
|
type: 'bar',
|
|
stack: 'one',
|
|
cursor: 'move'
|
|
}]
|
|
};
|
|
|
|
chart = myChart = testHelper.create(echarts, 'main7', {
|
|
title: [
|
|
'No data but has xAxis.min and xAxis.max, should no ticks and labels.',
|
|
'label.show: false, should no dead loop.'
|
|
],
|
|
option: option,
|
|
info: {xAxis: option.xAxis}
|
|
});
|
|
});
|
|
|
|
</script>
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
<script>
|
|
|
|
require([
|
|
'echarts'
|
|
], function (echarts) {
|
|
|
|
var xAxisData = [];
|
|
var data1 = [];
|
|
var data3 = [];
|
|
|
|
for (var i = 0; i < 100; i++) {
|
|
xAxisData.push('c' + i);
|
|
data1.push((Math.random() * 5).toFixed(2));
|
|
data3.push((Math.random() + 0.5).toFixed(2));
|
|
}
|
|
|
|
var option = {
|
|
legend: {
|
|
},
|
|
tooltip: {
|
|
trigger: 'axis',
|
|
axisPointer: {
|
|
type: 'shadow'
|
|
}
|
|
},
|
|
xAxis: {
|
|
type: 'category',
|
|
data: ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec'],
|
|
splitArea: {
|
|
interval: 3,
|
|
show: true,
|
|
areaStyle: {
|
|
color: ['blue', 'red']
|
|
}
|
|
}
|
|
},
|
|
yAxis: {
|
|
axisLabel: {
|
|
show: false
|
|
},
|
|
splitArea: {
|
|
show: false
|
|
}
|
|
},
|
|
dataZoom: [{
|
|
type: 'inside'
|
|
}, {
|
|
}],
|
|
series: []
|
|
};
|
|
|
|
chart = myChart = testHelper.create(echarts, 'main8', {
|
|
title: [
|
|
'Check splitArea correct for indivisible interval.',
|
|
'Move left handle of the dataZoom and check splitArea correct'
|
|
],
|
|
option: option,
|
|
info: {xAxis: option.xAxis}
|
|
});
|
|
});
|
|
|
|
</script>
|
|
|
|
|
|
|
|
|
|
|
|
|
|
<script>
|
|
|
|
require([
|
|
'echarts'
|
|
], function (echarts) {
|
|
|
|
var option = {
|
|
legend: {
|
|
},
|
|
tooltip: {
|
|
trigger: 'axis'
|
|
},
|
|
dataZoom: [{
|
|
type: 'inside',
|
|
xAxisIndex: 0
|
|
}, {
|
|
}],
|
|
grid: {
|
|
top: 10,
|
|
left: 100
|
|
},
|
|
xAxis: [{
|
|
type: 'category',
|
|
splitArea: {
|
|
show: true
|
|
},
|
|
splitLine: {
|
|
show: true
|
|
}
|
|
}],
|
|
yAxis: [{
|
|
type: 'category',
|
|
axisLabel: {
|
|
formatter: 'GOOD {value}',
|
|
fontSize: 20
|
|
}
|
|
}, {
|
|
axisLabel: {
|
|
showMaxLabel: false
|
|
}
|
|
}],
|
|
series: [{
|
|
type: 'scatter',
|
|
data: [[1, 1], [2, 2], [3, 3], [4, 4], [5, 5]]
|
|
}]
|
|
};
|
|
|
|
chart = myChart = testHelper.create(echarts, 'main9', {
|
|
title: [
|
|
'Drag to resize the yAxis util labels changes, and then drag back.',
|
|
'Labels of yAxis should be able to back too the original state.'
|
|
],
|
|
width: 300,
|
|
height: 300,
|
|
option: option,
|
|
draggable: true
|
|
});
|
|
|
|
});
|
|
|
|
</script>
|
|
|
|
|
|
|
|
|
|
<script>
|
|
|
|
require([
|
|
'echarts'
|
|
], function (echarts) {
|
|
|
|
var xAxisData = [];
|
|
var data1 = [];
|
|
|
|
for (var i = 0; i < 100; i++) {
|
|
xAxisData.push('c' + i);
|
|
data1.push((Math.random() * 5).toFixed(2));
|
|
}
|
|
|
|
var option = {
|
|
legend: {
|
|
},
|
|
tooltip: {
|
|
trigger: 'axis'
|
|
},
|
|
dataZoom: [{
|
|
type: 'inside',
|
|
xAxisIndex: 0,
|
|
start: 14.63022259346915,
|
|
end: 77.06506102371338
|
|
}, {
|
|
start: 14.63022259346915,
|
|
end: 77.06506102371338
|
|
}],
|
|
xAxis: [{
|
|
data: xAxisData,
|
|
splitArea: {
|
|
show: true
|
|
},
|
|
splitLine: {
|
|
show: true
|
|
}
|
|
}],
|
|
yAxis: [{
|
|
}],
|
|
series: [{
|
|
name: 'bar',
|
|
type: 'line',
|
|
stack: 'one',
|
|
cursor: 'move',
|
|
data: data1
|
|
}]
|
|
};
|
|
|
|
chart = myChart = testHelper.create(echarts, 'main10', {
|
|
title: [
|
|
'The dataZoom window range is at the critical value of changing axis interval from 2 to 3.',
|
|
'Move the dataZoom bar, the **xAxis labels should be stable**.',
|
|
'That is, xAxis labels should not be sometimes [c21, c24, c27] sometimes [c20, c24, c28]'
|
|
],
|
|
option: option,
|
|
// Should be fixed this width to make the dataZoom window range at the critical value.
|
|
width: 653,
|
|
height: 300,
|
|
autoResize: false
|
|
});
|
|
|
|
});
|
|
|
|
</script>
|
|
|
|
|
|
|
|
|
|
|
|
|
|
</body>
|
|
</html> |