899 lines
26 KiB
HTML
899 lines
26 KiB
HTML
<html>
|
|
<head>
|
|
<meta charset="utf-8">
|
|
<meta name="viewport" content="width=device-width, initial-scale=1" />
|
|
<script src="esl.js"></script>
|
|
<script src="config.js"></script>
|
|
<script src="lib/facePrint.js"></script>
|
|
<link rel="stylesheet" href="reset.css">
|
|
</head>
|
|
<body>
|
|
<style>
|
|
.chart {
|
|
height: 500px;
|
|
}
|
|
h1 {
|
|
font-size: 20px;
|
|
text-align: center;
|
|
background: #bbb;
|
|
padding: 10px 0;
|
|
}
|
|
</style>
|
|
|
|
<h1>visual on hue</h1>
|
|
<div class="chart" id="mainH"></div>
|
|
<h1>visual on color opacity</h1>
|
|
<div class="chart" id="mainZ"></div>
|
|
<h1>pieces | auto split | check: min > dataMin; max < dataMax; </h1>
|
|
<div class="chart" id="mainX"></div>
|
|
<h1>pieces | auto split | check: minOpen/maxOpen</h1>
|
|
<div class="chart" id="mainX2"></div>
|
|
<h1>pieces | check: auto-sort</h1>
|
|
<div class="chart" id="main0"></div>
|
|
<h1>continuous | check: area that greater than dataMax</h1>
|
|
<div class="chart" id="main1"></div>
|
|
<h1>continuous | log axis | inverse axis | gradient on xAxis</h1>
|
|
<div class="chart" id="main2"></div>
|
|
<h1>continuous | positive and negative | check: min > dataMin; max < dataMax; </h1>
|
|
<div class="chart" id="main4"></div>
|
|
<h1>category axis</h1>
|
|
<div class="chart" id="mainX0"></div>
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
<script>
|
|
|
|
require([
|
|
'echarts',
|
|
'echarts/chart/line',
|
|
'echarts/chart/bar',
|
|
'echarts/component/legend',
|
|
'echarts/component/grid',
|
|
'echarts/component/tooltip',
|
|
'echarts/component/visualMap',
|
|
'echarts/component/dataZoom'
|
|
], function (echarts) {
|
|
|
|
var main = document.getElementById('mainH');
|
|
if (!main) {
|
|
return;
|
|
}
|
|
var chart = echarts.init(main);
|
|
|
|
var data0 = [];
|
|
|
|
var MAX_DIM1 = 100;
|
|
|
|
var itemStyle = {
|
|
normal: {
|
|
opacity: 0.8,
|
|
shadowBlur: 10,
|
|
shadowOffsetX: 0,
|
|
shadowOffsetY: 0,
|
|
shadowColor: 'rgba(0, 0, 0, 0.3)'
|
|
}
|
|
};
|
|
|
|
var last = 60;
|
|
var lastDelta = 20;
|
|
for (var i = 0; i < MAX_DIM1; i++) {
|
|
lastDelta += (Math.random() - 0.5) * 15;
|
|
data0.push([
|
|
i,
|
|
last += lastDelta
|
|
]);
|
|
}
|
|
|
|
chart.setOption({
|
|
grid: {
|
|
top: 100,
|
|
bottom: 100
|
|
},
|
|
xAxis: {
|
|
type: 'value',
|
|
splitLine: {
|
|
show: false
|
|
}
|
|
},
|
|
yAxis: {
|
|
type: 'value',
|
|
splitLine: {
|
|
show: false
|
|
}
|
|
},
|
|
visualMap: [
|
|
{
|
|
show: true,
|
|
left: 'center',
|
|
bottom: 20,
|
|
orient: 'horizontal',
|
|
itemWidth: 20,
|
|
itemHeight: 200,
|
|
min: 0,
|
|
max: MAX_DIM1,
|
|
calculable: true,
|
|
range: [5, 95],
|
|
dimension: 0,
|
|
inRange: {
|
|
colorHue: [0, 300],
|
|
colorLightness: 0.35,
|
|
colorSaturation: 1
|
|
},
|
|
outOfRange: {
|
|
color: '#eee'
|
|
}
|
|
}
|
|
],
|
|
series: [
|
|
{
|
|
name: 'hue',
|
|
type: 'line',
|
|
barMaxWidth: 10,
|
|
itemStyle: itemStyle,
|
|
areaStyle: {normal: {}},
|
|
data: data0
|
|
}
|
|
]
|
|
});
|
|
});
|
|
|
|
</script>
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
<script>
|
|
|
|
require([
|
|
'echarts',
|
|
'echarts/chart/line',
|
|
'echarts/component/legend',
|
|
'echarts/component/grid',
|
|
'echarts/component/tooltip',
|
|
'echarts/component/visualMap',
|
|
'echarts/component/dataZoom'
|
|
], function (echarts) {
|
|
|
|
var main = document.getElementById('mainZ');
|
|
if (!main) {
|
|
return;
|
|
}
|
|
var chart = echarts.init(main);
|
|
|
|
var xAxisData = [];
|
|
var data1 = [];
|
|
var data2 = [];
|
|
var min = Infinity;
|
|
var max = -Infinity;
|
|
|
|
var base1 = Math.round(Math.random() * 30);
|
|
var base2 = base1;
|
|
for (var i = 0; i < 10; i++) {
|
|
xAxisData.push('类目' + i);
|
|
base1 += Math.round(Math.random() * 60);
|
|
|
|
if (i > 500 && i < 550) {
|
|
data1.push(180);
|
|
}
|
|
else if (i > 700 && i < 740) {
|
|
data1.push(-90);
|
|
}
|
|
else {
|
|
data1.push(base1);
|
|
}
|
|
|
|
base2 += Math.round(Math.random() * 30 - 5);
|
|
data2.push(base2);
|
|
|
|
min = Math.min(data1[data1.length - 1], data2[data2.length - 1], min);
|
|
max = Math.max(data1[data1.length - 1], data2[data2.length - 1], max);
|
|
}
|
|
|
|
chart.setOption({
|
|
color: ['#01003D', '#004202'],
|
|
legend: {
|
|
data: ['line1', 'line2']
|
|
},
|
|
visualMap: {
|
|
type: 'piecewise',
|
|
top: 'center',
|
|
inRange: {
|
|
opacity: [0.1, 1]
|
|
},
|
|
outOfRange: {
|
|
color: '#fff'
|
|
},
|
|
min: min,
|
|
max: max,
|
|
minOpen: true,
|
|
maxOpen: true
|
|
},
|
|
tooltip: {
|
|
trigger: 'axis',
|
|
axisPointer: {
|
|
type: 'line'
|
|
}
|
|
},
|
|
xAxis: {
|
|
data: xAxisData,
|
|
boundaryGap: false
|
|
},
|
|
yAxis: {},
|
|
series: [{
|
|
name: 'line1',
|
|
type: 'line',
|
|
stack: 'all',
|
|
symbol: 'none',
|
|
lineStyle: { normal: {width: 8}},
|
|
data: data1
|
|
}, {
|
|
name: 'line2',
|
|
type: 'line',
|
|
stack: 'all',
|
|
symbol: 'none',
|
|
lineStyle: { normal: {width: 8}},
|
|
data: data2
|
|
}]
|
|
});
|
|
});
|
|
|
|
</script>
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
<script>
|
|
|
|
require([
|
|
'echarts',
|
|
'echarts/chart/line',
|
|
'echarts/component/legend',
|
|
'echarts/component/grid',
|
|
'echarts/component/tooltip',
|
|
'echarts/component/visualMap',
|
|
'echarts/component/dataZoom'
|
|
], function (echarts) {
|
|
|
|
var main = document.getElementById('mainX0');
|
|
if (!main) {
|
|
return;
|
|
}
|
|
var chart = echarts.init(main);
|
|
|
|
var xAxisData = [];
|
|
var data1 = [];
|
|
|
|
var base = Math.round(Math.random() * 30);
|
|
for (var i = 0; i < 10; i++) {
|
|
xAxisData.push('类目' + i);
|
|
base += Math.round(Math.random() * 10 - 5);
|
|
|
|
if (i > 500 && i < 550) {
|
|
data1.push(180);
|
|
}
|
|
else if (i > 700 && i < 740) {
|
|
data1.push(-90);
|
|
}
|
|
else {
|
|
data1.push(base);
|
|
}
|
|
}
|
|
|
|
chart.setOption({
|
|
visualMap: {
|
|
type: 'piecewise',
|
|
top: 'center',
|
|
inRange: {
|
|
color: ['red', 'green', 'black']
|
|
},
|
|
outOfRange: {
|
|
color: '#aaa'
|
|
},
|
|
dimension: 0,
|
|
min: 0,
|
|
max: 10
|
|
},
|
|
dataZoom: {
|
|
orient: 'vertical'
|
|
},
|
|
tooltip: {
|
|
trigger: 'axis',
|
|
axisPointer: {
|
|
type: 'line'
|
|
}
|
|
},
|
|
xAxis: {
|
|
data: xAxisData,
|
|
boundaryGap: false
|
|
},
|
|
yAxis: {},
|
|
series: [{
|
|
name: 'line',
|
|
type: 'line',
|
|
stack: 'all',
|
|
symbol: 'circle',
|
|
areaStyle: { normal: {} },
|
|
symbolSize: 10,
|
|
data: data1
|
|
}]
|
|
});
|
|
});
|
|
|
|
</script>
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
<script>
|
|
|
|
require([
|
|
'echarts',
|
|
'echarts/chart/line',
|
|
'echarts/component/legend',
|
|
'echarts/component/grid',
|
|
'echarts/component/tooltip',
|
|
'echarts/component/visualMap',
|
|
'echarts/component/dataZoom'
|
|
], function (echarts) {
|
|
|
|
var main = document.getElementById('mainX');
|
|
if (!main) {
|
|
return;
|
|
}
|
|
var chart = echarts.init(main);
|
|
|
|
var xAxisData = [];
|
|
var data1 = [];
|
|
|
|
var base = Math.round(Math.random() * 30);
|
|
for (var i = 0; i < 1000; i++) {
|
|
xAxisData.push('类目' + i);
|
|
base += Math.round(Math.random() * 10 - 5);
|
|
|
|
if (i > 500 && i < 550) {
|
|
data1.push(180);
|
|
}
|
|
else if (i > 700 && i < 740) {
|
|
data1.push(-90);
|
|
}
|
|
else {
|
|
data1.push(base);
|
|
}
|
|
}
|
|
|
|
chart.setOption({
|
|
visualMap: {
|
|
type: 'piecewise',
|
|
top: 'center',
|
|
inRange: {
|
|
color: ['red', 'green', 'black']
|
|
},
|
|
outOfRange: {
|
|
color: '#aaa'
|
|
},
|
|
min: -70,
|
|
max: 150
|
|
},
|
|
dataZoom: {
|
|
orient: 'vertical'
|
|
},
|
|
tooltip: {
|
|
trigger: 'axis',
|
|
axisPointer: {
|
|
type: 'line'
|
|
}
|
|
},
|
|
xAxis: {
|
|
data: xAxisData,
|
|
boundaryGap: false
|
|
},
|
|
yAxis: {},
|
|
series: [{
|
|
name: 'line',
|
|
type: 'line',
|
|
stack: 'all',
|
|
symbol: 'circle',
|
|
areaStyle: { normal: {} },
|
|
symbolSize: 10,
|
|
data: data1
|
|
}]
|
|
});
|
|
});
|
|
|
|
</script>
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
<script>
|
|
|
|
require([
|
|
'echarts',
|
|
'echarts/chart/line',
|
|
'echarts/component/legend',
|
|
'echarts/component/grid',
|
|
'echarts/component/tooltip',
|
|
'echarts/component/visualMap',
|
|
'echarts/component/dataZoom'
|
|
], function (echarts) {
|
|
|
|
var main = document.getElementById('mainX2');
|
|
if (!main) {
|
|
return;
|
|
}
|
|
var chart = echarts.init(main);
|
|
|
|
var xAxisData = [];
|
|
var data1 = [];
|
|
|
|
var base = Math.round(Math.random() * 30);
|
|
for (var i = 0; i < 1000; i++) {
|
|
xAxisData.push('类目' + i);
|
|
base += Math.round(Math.random() * 10 - 5);
|
|
|
|
if (i > 500 && i < 550) {
|
|
data1.push(180);
|
|
}
|
|
else if (i > 700 && i < 740) {
|
|
data1.push(-90);
|
|
}
|
|
else {
|
|
data1.push(base);
|
|
}
|
|
}
|
|
|
|
chart.setOption({
|
|
visualMap: {
|
|
type: 'piecewise',
|
|
top: 'center',
|
|
inRange: {
|
|
color: ['red', 'green', 'black']
|
|
},
|
|
outOfRange: {
|
|
color: '#aaa'
|
|
},
|
|
min: -70,
|
|
max: 150,
|
|
minOpen: true,
|
|
maxOpen: true
|
|
},
|
|
dataZoom: {
|
|
orient: 'vertical'
|
|
},
|
|
tooltip: {
|
|
trigger: 'axis',
|
|
axisPointer: {
|
|
type: 'line'
|
|
}
|
|
},
|
|
xAxis: {
|
|
data: xAxisData,
|
|
boundaryGap: false
|
|
},
|
|
yAxis: {},
|
|
series: [{
|
|
name: 'line',
|
|
type: 'line',
|
|
stack: 'all',
|
|
symbol: 'circle',
|
|
areaStyle: { normal: {} },
|
|
symbolSize: 10,
|
|
data: data1
|
|
}]
|
|
});
|
|
});
|
|
|
|
</script>
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
<script>
|
|
|
|
require([
|
|
'echarts',
|
|
'echarts/chart/line',
|
|
'echarts/component/legend',
|
|
'echarts/component/grid',
|
|
'echarts/component/tooltip',
|
|
'echarts/component/visualMap',
|
|
'echarts/component/dataZoom'
|
|
], function (echarts) {
|
|
|
|
var main = document.getElementById('main0');
|
|
if (!main) {
|
|
return;
|
|
}
|
|
var chart = echarts.init(main);
|
|
|
|
var xAxisData = [];
|
|
var data1 = [];
|
|
|
|
var base = Math.round(Math.random() * 100);
|
|
for (var i = 0; i < 1000; i++) {
|
|
xAxisData.push('类目' + i);
|
|
base += Math.round(Math.random() * 10 - 5);
|
|
|
|
if (i > 500 && i < 550) {
|
|
data1.push(130);
|
|
}
|
|
else if (i > 700 && i < 740) {
|
|
data1.push(-20);
|
|
}
|
|
else {
|
|
data1.push(base);
|
|
}
|
|
}
|
|
|
|
chart.setOption({
|
|
visualMap: {
|
|
type: 'piecewise',
|
|
top: 'center',
|
|
inRange: {
|
|
color: ['red', 'green', 'black']
|
|
},
|
|
outOfRange: {
|
|
color: '#aaa'
|
|
},
|
|
pieces: [{
|
|
lte: 120,
|
|
gt: 100,
|
|
color: 'red'
|
|
}, {
|
|
lt: 80,
|
|
gt: 70
|
|
}, {
|
|
lt: 90,
|
|
gt: 50
|
|
}, {
|
|
lte: 40
|
|
}]
|
|
},
|
|
dataZoom: {
|
|
orient: 'vertical'
|
|
},
|
|
tooltip: {
|
|
trigger: 'axis',
|
|
axisPointer: {
|
|
type: 'line'
|
|
}
|
|
},
|
|
xAxis: {
|
|
data: xAxisData,
|
|
boundaryGap: false
|
|
},
|
|
yAxis: {},
|
|
series: [{
|
|
name: 'line',
|
|
type: 'line',
|
|
stack: 'all',
|
|
symbol: 'circle',
|
|
areaStyle: { normal: {} },
|
|
symbolSize: 10,
|
|
data: data1
|
|
}]
|
|
});
|
|
});
|
|
|
|
</script>
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
<script>
|
|
|
|
require([
|
|
'echarts',
|
|
'echarts/chart/line',
|
|
'echarts/component/legend',
|
|
'echarts/component/grid',
|
|
'echarts/component/tooltip',
|
|
'echarts/component/visualMap',
|
|
'echarts/component/dataZoom'
|
|
], function (echarts) {
|
|
|
|
var main = document.getElementById('main1');
|
|
if (!main) {
|
|
return;
|
|
}
|
|
var chart = echarts.init(main);
|
|
|
|
var xAxisData = [];
|
|
var data1 = [];
|
|
|
|
var base = -Math.round(Math.random() * 500 + 500);
|
|
var min = Infinity;
|
|
var max = -Infinity;
|
|
for (var i = 0; i < 1000; i++) {
|
|
xAxisData.push('类目' + i);
|
|
base -= Math.round(Math.random() * 2);
|
|
data1.push(base);
|
|
|
|
base > max && (max = base);
|
|
base < min && (min = base);
|
|
}
|
|
|
|
max += 500;
|
|
min -= 500;
|
|
|
|
chart.setOption({
|
|
visualMap: {
|
|
top: 'center',
|
|
calculable: true,
|
|
type: 'continuous',
|
|
inRange: {
|
|
color: ['red', 'green', 'black']
|
|
},
|
|
outOfRange: {
|
|
color: '#aaa'
|
|
},
|
|
range: [min + 100, max - 100],
|
|
min: min,
|
|
max: max
|
|
},
|
|
dataZoom: {
|
|
orient: 'vertical'
|
|
},
|
|
tooltip: {
|
|
trigger: 'axis',
|
|
axisPointer: {
|
|
type: 'line'
|
|
}
|
|
},
|
|
xAxis: {
|
|
data: xAxisData,
|
|
boundaryGap: false
|
|
},
|
|
yAxis: {},
|
|
series: [{
|
|
name: 'line',
|
|
type: 'line',
|
|
stack: 'all',
|
|
symbol: 'circle',
|
|
areaStyle: { normal: {} },
|
|
symbolSize: 10,
|
|
data: data1
|
|
}]
|
|
});
|
|
});
|
|
|
|
</script>
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
<script>
|
|
|
|
require([
|
|
'echarts',
|
|
'echarts/chart/line',
|
|
'echarts/component/legend',
|
|
'echarts/component/grid',
|
|
'echarts/component/tooltip',
|
|
'echarts/component/visualMap',
|
|
'echarts/component/dataZoom'
|
|
], function (echarts) {
|
|
|
|
var main = document.getElementById('main2');
|
|
if (!main) {
|
|
return;
|
|
}
|
|
var chart = echarts.init(main);
|
|
|
|
var xAxisData = [];
|
|
var data1 = [];
|
|
|
|
var base = Math.round(Math.random() * 500 + 500);
|
|
var min = Infinity;
|
|
var max = -Infinity;
|
|
for (var i = 0; i < 1000; i++) {
|
|
xAxisData.push('类目' + i);
|
|
base += Math.round(Math.random() * 500);
|
|
data1.push(base);
|
|
|
|
base > max && (max = base);
|
|
base < min && (min = base);
|
|
}
|
|
|
|
max += 100;
|
|
min -= 100;
|
|
|
|
chart.setOption({
|
|
visualMap: {
|
|
orient: 'horizontal',
|
|
left: 'center',
|
|
top: 0,
|
|
inverse: true,
|
|
calculable: true,
|
|
type: 'continuous',
|
|
inRange: {
|
|
color: ['red', 'green', 'black']
|
|
},
|
|
outOfRange: {
|
|
color: '#aaa'
|
|
},
|
|
range: [min + 80, max - 80],
|
|
dimension: 0,
|
|
min: min,
|
|
max: max
|
|
},
|
|
dataZoom: {
|
|
orient: 'vertical'
|
|
},
|
|
tooltip: {
|
|
trigger: 'axis',
|
|
axisPointer: {
|
|
type: 'line'
|
|
}
|
|
},
|
|
yAxis: {
|
|
data: xAxisData,
|
|
boundaryGap: false
|
|
},
|
|
xAxis: {
|
|
type: 'log',
|
|
inverse: true
|
|
},
|
|
series: [{
|
|
name: 'line',
|
|
type: 'line',
|
|
stack: 'all',
|
|
symbol: 'circle',
|
|
areaStyle: { normal: {} },
|
|
symbolSize: 10,
|
|
data: data1
|
|
}]
|
|
});
|
|
});
|
|
|
|
</script>
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
<script>
|
|
|
|
require([
|
|
'echarts',
|
|
'echarts/chart/line',
|
|
'echarts/component/legend',
|
|
'echarts/component/grid',
|
|
'echarts/component/tooltip',
|
|
'echarts/component/visualMap',
|
|
'echarts/component/dataZoom'
|
|
], function (echarts) {
|
|
|
|
var main = document.getElementById('main4');
|
|
if (!main) {
|
|
return;
|
|
}
|
|
var chart = echarts.init(main);
|
|
|
|
var xAxisData = [];
|
|
var data1 = [];
|
|
|
|
var base = Math.round(Math.random() * 100);
|
|
var min = Infinity;
|
|
var max = -Infinity;
|
|
for (var i = 0; i < 1000; i++) {
|
|
xAxisData.push('类目' + i);
|
|
base += Math.round(Math.random() * 240 - 120);
|
|
data1.push(base);
|
|
|
|
base > max && (max = base);
|
|
base < min && (min = base);
|
|
}
|
|
|
|
var span = max - min;
|
|
|
|
max -= span / 6;
|
|
min += span / 6;
|
|
|
|
chart.setOption({
|
|
visualMap: {
|
|
top: 'center',
|
|
calculable: true,
|
|
type: 'continuous',
|
|
inRange: {
|
|
color: ['red', 'green', 'black']
|
|
},
|
|
outOfRange: {
|
|
color: '#aaa'
|
|
},
|
|
min: min,
|
|
max: max
|
|
},
|
|
dataZoom: {
|
|
orient: 'vertical'
|
|
},
|
|
tooltip: {
|
|
trigger: 'axis',
|
|
axisPointer: {
|
|
type: 'line'
|
|
}
|
|
},
|
|
xAxis: {
|
|
data: xAxisData,
|
|
boundaryGap: false
|
|
},
|
|
yAxis: {},
|
|
series: [{
|
|
name: 'line',
|
|
type: 'line',
|
|
stack: 'all',
|
|
symbol: 'circle',
|
|
areaStyle: { normal: {} },
|
|
symbolSize: 10,
|
|
data: data1
|
|
}]
|
|
});
|
|
});
|
|
|
|
</script>
|
|
|
|
</body>
|
|
</html> |