257 lines
9.0 KiB
JavaScript
257 lines
9.0 KiB
JavaScript
|
require.config({
|
|||
|
|
paths:{
|
|||
|
|
echarts:'example/www/js'
|
|||
|
|
}
|
|||
|
|
});
|
|||
|
|
require(
|
|||
|
|
[
|
|||
|
|
'echarts',
|
|||
|
|
'echarts/chart/bar',
|
|||
|
|
'echarts/chart/line',
|
|||
|
|
'echarts/chart/scatter'
|
|||
|
|
],
|
|||
|
|
function(ec) {
|
|||
|
|
myChart = ec.init(document.getElementById('main'));
|
|||
|
|
option = {
|
|||
|
|
title : {
|
|||
|
|
text: 'Data Dancing',
|
|||
|
|
x: 'center',
|
|||
|
|
textStyle: {
|
|||
|
|
fontSize: 28
|
|||
|
|
}
|
|||
|
|
},
|
|||
|
|
toolbox: {
|
|||
|
|
show : true,
|
|||
|
|
feature : {
|
|||
|
|
mark : {show: true},
|
|||
|
|
magicType: {show: true, type: ['line', 'bar', 'stack', 'tiled']},
|
|||
|
|
restore : {show: true},
|
|||
|
|
saveAsImage : {show: true}
|
|||
|
|
}
|
|||
|
|
},
|
|||
|
|
xAxis : [
|
|||
|
|
{
|
|||
|
|
type : 'category',
|
|||
|
|
axisLabel:{show:false},
|
|||
|
|
data : (function() {
|
|||
|
|
var res = [];
|
|||
|
|
for (var i = 0; i < 30; i++) {
|
|||
|
|
res.push(i);
|
|||
|
|
}
|
|||
|
|
return res;
|
|||
|
|
})()
|
|||
|
|
}
|
|||
|
|
],
|
|||
|
|
yAxis : [
|
|||
|
|
{
|
|||
|
|
type : 'value',
|
|||
|
|
splitNumber:6,
|
|||
|
|
min:-30,
|
|||
|
|
max:30,
|
|||
|
|
power:1,
|
|||
|
|
axisLine:{show:false},
|
|||
|
|
axisLabel:{show:false},
|
|||
|
|
splitArea : {show : true}
|
|||
|
|
}
|
|||
|
|
],
|
|||
|
|
animationDuration: 3000,
|
|||
|
|
animationEasing: 'BounceOut',
|
|||
|
|
addDataAnimation : false,
|
|||
|
|
series : [
|
|||
|
|
{
|
|||
|
|
name:'1',
|
|||
|
|
type:'bar',
|
|||
|
|
itemStyle: {normal: {areaStyle: {type: 'default'}}},
|
|||
|
|
symbol:'none',
|
|||
|
|
barMinHeight:0,
|
|||
|
|
data : dataDanceing[Math.floor(Math.random()*3)](1)
|
|||
|
|
},
|
|||
|
|
{
|
|||
|
|
name:'2',
|
|||
|
|
type:'bar',
|
|||
|
|
itemStyle: {normal: {areaStyle: {type: 'default'}}},
|
|||
|
|
symbol:'none',
|
|||
|
|
barMinHeight:0,
|
|||
|
|
data : dataDanceing[Math.floor(Math.random()*3)](-1)
|
|||
|
|
}
|
|||
|
|
]
|
|||
|
|
};
|
|||
|
|
danceStep1 = option.series[0].data;
|
|||
|
|
danceStep2 = option.series[1].data;
|
|||
|
|
start(ecReady = true);
|
|||
|
|
}
|
|||
|
|
);
|
|||
|
|
|
|||
|
|
// ------------------------------------
|
|||
|
|
var dataDanceing = [
|
|||
|
|
function(n) {
|
|||
|
|
var res = [];
|
|||
|
|
var p = Math.round(Math.random()*10) % 2 == 0;
|
|||
|
|
for (var i = 0; i < 30; i++) {
|
|||
|
|
res[p ? 'push' : 'unshift'](i * n);
|
|||
|
|
}
|
|||
|
|
//console.log('1--',res);
|
|||
|
|
return res;
|
|||
|
|
},
|
|||
|
|
function(n) {
|
|||
|
|
var res = [];
|
|||
|
|
var p = Math.round(Math.random()*10) % 2 == 0;
|
|||
|
|
for (var i = 0; i < 30; i++) {
|
|||
|
|
i % 2 == 0
|
|||
|
|
? res[p ? 'push' : 'unshift']((p ? i : (30 - i)) * n)
|
|||
|
|
: res[p ? 'unshift' : 'push']((p ? i : (30 - i)) * n);
|
|||
|
|
}
|
|||
|
|
//console.log('2--',res);
|
|||
|
|
return res;
|
|||
|
|
},
|
|||
|
|
function(n) {
|
|||
|
|
var res = [];
|
|||
|
|
var p = Math.round(Math.random()*10) % 2 == 0;
|
|||
|
|
for (var i = 0; i < 60; i++) {
|
|||
|
|
res[p ? 'push' : 'unshift']((i - 30) * n);
|
|||
|
|
}
|
|||
|
|
//console.log('3--',res);
|
|||
|
|
return res;
|
|||
|
|
},
|
|||
|
|
function(n) {
|
|||
|
|
var res = [];
|
|||
|
|
var p = Math.round(Math.random()*10) % 2 == 0;
|
|||
|
|
for (var i = 0; i < 30; i++) {
|
|||
|
|
res[p ? 'push' : 'unshift']((i * n) * (i % 2 == 0 ? 1 : -1));
|
|||
|
|
}
|
|||
|
|
//console.log('3--',res);
|
|||
|
|
return res;
|
|||
|
|
}
|
|||
|
|
];
|
|||
|
|
var myChart;
|
|||
|
|
var option;
|
|||
|
|
var ecReady = false;
|
|||
|
|
var password = false;
|
|||
|
|
var mReady = false;
|
|||
|
|
var danceStep1;
|
|||
|
|
var danceStep2;
|
|||
|
|
var timeTicket;
|
|||
|
|
var playing = false;
|
|||
|
|
function start(){
|
|||
|
|
if (ecReady && password && mReady && !playing) {
|
|||
|
|
if (!document.createElement('canvas').getContext) {
|
|||
|
|
alert('亲，换个浏览器吧');
|
|||
|
|
password = false;
|
|||
|
|
playing = false;
|
|||
|
|
return;
|
|||
|
|
}
|
|||
|
|
document.getElementById('main-wrap').className = 'ddshow';
|
|||
|
|
audioV3.play();
|
|||
|
|
playing = true;
|
|||
|
|
myChart.setOption(option, true);
|
|||
|
|
setTimeout(function(){
|
|||
|
|
timeTicket = setInterval(function(){
|
|||
|
|
if (danceStep1.length == 0 && playing) {
|
|||
|
|
danceStep1 = dataDanceing[Math.floor(Math.random()*dataDanceing.length)](Math.round(Math.random()*10)%2==0?1:-1);
|
|||
|
|
}
|
|||
|
|
if (danceStep2.length == 0 && playing) {
|
|||
|
|
danceStep2 = dataDanceing[Math.floor(Math.random()*dataDanceing.length)](Math.round(Math.random()*10)%2==0?1:-1);
|
|||
|
|
}
|
|||
|
|
if (danceStep1.length > 0 && danceStep2.length) {
|
|||
|
|
// 动态数据接口 addData
|
|||
|
|
myChart.addData([
|
|||
|
|
[
|
|||
|
|
0, // 系列索引
|
|||
|
|
danceStep1.pop(), // 新增数据
|
|||
|
|
false, // 新增数据是否从队列头部插入
|
|||
|
|
false // 是否增加队列长度，false则自定删除原有数据，队头插入删队尾，队尾插入删队头
|
|||
|
|
],
|
|||
|
|
[
|
|||
|
|
1, // 系列索引
|
|||
|
|
danceStep2.pop(), // 新增数据
|
|||
|
|
false, // 新增数据是否从队列头部插入
|
|||
|
|
false, // 是否增加队列长度，false则自定删除原有数据，队头插入删队尾，队尾插入删队头
|
|||
|
|
]
|
|||
|
|
]);
|
|||
|
|
}
|
|||
|
|
else {
|
|||
|
|
clearInterval(timeTicket);
|
|||
|
|
setTimeout(function(){
|
|||
|
|
option.series[0].data = dataDanceing[1](1);
|
|||
|
|
option.series[1].data = dataDanceing[1](-1);
|
|||
|
|
var _backupSeries = option.series;
|
|||
|
|
var es = [[],[2,3,4,5,6,7,8],[2,5,8],[2,5,8],[],[3,4,5,6,7],[2,8],[2,8],[],[2,3,4,5,6,7,8],[5],[2,3,4,5,6,7,8],[],[4,5,6,7,8],[2,3,6],[4,5,6,7,8],[],[2,3,4,5,6,7,8],[2,5],[2,3,4,6,7,8],[],[2],[2,3,4,5,6,7,8],[2],[],[3,4,8],[2,5,8],[2,6,7]];
|
|||
|
|
var data= [];
|
|||
|
|
for (var i = 0, l = es.length; i < l; i++) {
|
|||
|
|
for (var j = 0, k = es[i].length; j < k; j++) {
|
|||
|
|
data.push([i + 1, 4.5 * (8 - es[i][j]) + 2, 1])
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
option.series = [
|
|||
|
|
{
|
|||
|
|
type:'scatter',
|
|||
|
|
symbol:'rectangle',
|
|||
|
|
symbolSize:6,
|
|||
|
|
data: data.splice(0,13)
|
|||
|
|
},
|
|||
|
|
{
|
|||
|
|
type:'scatter',
|
|||
|
|
symbol:'circle',
|
|||
|
|
symbolSize:6,
|
|||
|
|
data: data
|
|||
|
|
},
|
|||
|
|
{
|
|||
|
|
type:'bar',
|
|||
|
|
itemStyle: {normal: {
|
|||
|
|
color: (function(){
|
|||
|
|
var zrColor = require('zrender/tool/color');
|
|||
|
|
return zrColor.getLinearGradient(
|
|||
|
|
0, 200, 0, 400,
|
|||
|
|
[[0, 'rgba(144,238,144,0.8)'],[0.8, 'rgba(255,255,0,0.8)']]
|
|||
|
|
);
|
|||
|
|
})(),
|
|||
|
|
areaStyle: {type: 'default'}
|
|||
|
|
}},
|
|||
|
|
symbol:'none',
|
|||
|
|
barMinHeight:0,
|
|||
|
|
data : dataDanceing[1](-1)
|
|||
|
|
}
|
|||
|
|
];
|
|||
|
|
option.title.text= 'Welcome';
|
|||
|
|
myChart.setOption(option, true);
|
|||
|
|
option.series = _backupSeries;
|
|||
|
|
option.title.text = 'Data Dancing';
|
|||
|
|
},500);
|
|||
|
|
}
|
|||
|
|
}, 100);
|
|||
|
|
},3800);
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
// --------------------
|
|||
|
|
var audioV3 = document.getElementById('audioV3');
|
|||
|
|
audioV3.addEventListener && audioV3.addEventListener(
|
|||
|
|
'ended',
|
|||
|
|
function(){
|
|||
|
|
playing = false;
|
|||
|
|
}
|
|||
|
|
)
|
|||
|
|
audioV3.addEventListener && audioV3.addEventListener(
|
|||
|
|
'canplaythrough',
|
|||
|
|
function() {
|
|||
|
|
start(mReady = true);
|
|||
|
|
}
|
|||
|
|
);
|
|||
|
|
audioV3.src = 'asset/img/dataDancing.mp3';
|
|||
|
|
|
|||
|
|
// -----------
|
|||
|
|
var k = [101,99,104,97,114,116,115];
|
|||
|
|
var progress = 0;
|
|||
|
|
document.body.addEventListener && document.body.addEventListener(
|
|||
|
|
'keypress',
|
|||
|
|
function(p) {
|
|||
|
|
var curCode = p.keyCode;
|
|||
|
|
if (k[progress] == p.keyCode) {
|
|||
|
|
progress++;
|
|||
|
|
}
|
|||
|
|
else {
|
|||
|
|
progress = 0;
|
|||
|
|
}
|
|||
|
|
progress == k.length && start(password = true, progress = 0);
|
|||
|
|
}
|
|||
|
|
)
|