提交 66628e00 编写于 作者: S sushuang

update examples and refix append data.

上级 d85cf7b9
......@@ -18,6 +18,8 @@ echarts.registerProcessor({
return seriesModelMap;
},
isOverallFilter: true,
// Consider appendData, where filter should be performed. Because data process is
// in block mode currently, it is not need to worry about that the overallProgress
// execute every frame.
......
......@@ -231,7 +231,7 @@ var SeriesModel = ComponentModel.extend({
if (task) {
var context = task.context;
// Consider case: filter, data sample.
if (context.data !== data) {
if (context.data !== data && task.isOverallFilter) {
task.setOutputEnd(data.count());
}
context.outputData = data;
......
......@@ -295,6 +295,7 @@ function createOverallStageTask(scheduler, stageHandler, stageHandlerRecord, ecM
var seriesType = stageHandler.seriesType;
var getTargetSeries = stageHandler.getTargetSeries;
var overallProgress = true;
var isOverallFilter = stageHandler.isOverallFilter;
// An overall task with seriesType detected or has `getTargetSeries`, we add
// stub in each pipelines, it will set the overall task dirty when the pipeline
......@@ -320,7 +321,11 @@ function createOverallStageTask(scheduler, stageHandler, stageHandlerRecord, ecM
var stub = agentStubMap.get(pipelineId) || agentStubMap.set(pipelineId, createTask(
{reset: stubReset, onDirty: stubOnDirty}
));
stub.context = {model: seriesModel, overallProgress: overallProgress};
stub.context = {
model: seriesModel,
overallProgress: overallProgress,
isOverallFilter: isOverallFilter
};
stub.agent = overallTask;
stub.__block = overallProgress;
......
......@@ -194,4 +194,5 @@ taskProto.setOutputEnd = function (end) {
// that the stub of dataZoom perform again and earse the
// setted end by upstream.
this._outputDueEnd = this._settedOutputEnd = end;
// this._outputDueEnd = end;
};
<!DOCTYPE>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1" />
<link rel="stylesheet" href="lib/reset.css">
</head>
<body>
<h1>Necessary cases for quick test.</h1>
<div id="cases" style="margin: 20px">
</div>
<script type="text/javascript">
var cases = [
'./lines-ny-appendData.html',
'./scatter-random-stream.html',
'./scatter-random-stream-fix-axis.html',
'./scatter-gps.html',
'./scatter-weibo.html',
'./lines-flight.html',
'./stream-filter.html',
'./scatter-stream-visual'
];
var el = document.getElementById('cases');
var html = [];
for (var i = 0; i < cases.length; i++) {
html.push(
'<a target="_blank" href="' + cases[i] + '">' + cases[i] + '</div>'
);
}
el.innerHTML = html.join('<br>');
</script>
</body>
</html>
\ No newline at end of file
......@@ -22,18 +22,14 @@
var xs = [440000, 450000];
var ys = [4368000, 4537000];
var dataURL = '../../data-online/figshare_Urban_Road_Network/public/links_ny.bin';
// var dataURL = '../../data-online/figshare_Urban_Road_Network/public/links_ny.bin';
// var dataURL = '../../echarts-worker/example/data/links_ny.bin';
// var dataURL = '../../echarts-worker/example/data/Links_NewYork_1.json';
// var dataURL = 'http://echarts.baidu.com/resource/data/figshare_Urban_Road_Network/public/Links_NewYork_1.json';
require([
'echarts',
// 'echarts/chart/lines',
// 'echarts/component/legend',
// 'extension/bmap'
'echarts', 'map/js/world'
], function (echarts) {
var config = {
......@@ -43,24 +39,30 @@
largeModel: true
};
$.get('../map/json/world.json', function (worldJson) {
echarts.registerMap('world', worldJson);
// echarts.registerMap('test', testGeoJson1);
// $.get('data/Links_Beijing_0.json', function (data) {
var myChart = echarts.init(document.getElementById('main'));
var CHUNK_COUNT = 32;
var dataCount = 0;
function fetchData(idx) {
if (idx >= CHUNK_COUNT) {
return;
}
var dataURL = `../../echarts-examples/public/data/asset/data/links-ny/links_ny_${idx}.bin`;
var xhr = new XMLHttpRequest();
xhr.open('GET', dataURL, true);
xhr.responseType = 'arraybuffer';
xhr.onload = function (e) {
var rawData = new Float32Array(this.response);
var chart;
var data = new Float64Array(rawData.length - 2);
var offsetX = rawData[0];
var offsetY = rawData[1];
var off = 0;
var addedDataCount = 0;
for (var i = 2; i < rawData.length;) {
var count = rawData[i++];
data[off++] = count;
......@@ -69,66 +71,67 @@
var y = rawData[i++] + offsetY;
data[off++] = x;
data[off++] = y;
addedDataCount++;
}
}
var gui = new dat.GUI();
gui.add(config, 'dataLoading', ['whole', 'chunked'])
.onChange(init);
gui.add(config, 'largeModel')
.onChange(init);
gui.add(config, 'progressiveThreshold', 0, 200000)
.onChange(init);
myChart.appendData({
seriesIndex: 0,
data: data
});
dataCount += addedDataCount;
fetchData(idx + 1);
}
init();
xhr.send();
}
function init() {
if (chart) {
chart.dispose();
var option = {
progressive: 20000,
backgroundColor: '#111',
geo: {
center: [-74.04327099998152, 40.86737600240287],
zoom: 360,
map: 'world',
roam: true,
silent: true,
itemStyle: {
normal: {
color: 'transparent',
borderColor: 'rgba(255,255,255,0.1)',
borderWidth: 1
}
}
},
series: [{
type: 'lines',
coordinateSystem: 'geo',
blendMode: 'lighter',
dimensions: ['value'],
data: new Float64Array(),
polyline: true,
large: true,
chart = echarts.init(document.getElementById('main'));
chart.setOption({
animation: false,
geo: {
center: [-74.04327099998152, 40.86737600240287],
zoom: 360,
map: 'world',
roam: true,
silent: true,
itemStyle: {
normal: {
areaColor: 'transparent',
borderColor: 'rgba(255,255,255,0.1)',
borderWidth: 1
}
}
},
series: [{
type: 'lines',
coordinateSystem: 'geo',
data: data,
large: config.largeModel,
polyline: true,
blendMode: 'lighter',
lineStyle: {
normal: {
color: 'orange',
opacity: 0.3,
width: 0.5
}
},
progressive: config.progressive,
progressiveThreshold: config.progressiveThreshold
}]
});
lineStyle: {
color: 'orange',
width: 0.5,
opacity: 0.3
}
};
}]
};
fetchData(0);
myChart.setOption(option);
xhr.send();
});
});
</script>
......
......@@ -48,8 +48,9 @@
if (idx >= CHUNK_COUNT) {
return;
}
var dataURL = `../../echarts-gl/test/data/gps/gps_${idx}.bin`;
// var dataURL = `../../echarts-gl/test/data/gps/gps_${idx}.bin`;
// var dataURL = `../../data-online/gps/gps_${idx}.bin`;
var dataURL = `../../echarts-examples/public/data/asset/data/gps/gps_${idx}.bin`;
var xhr = new XMLHttpRequest();
xhr.open('GET', dataURL, true);
xhr.responseType = 'arraybuffer';
......
<html>
<head>
<meta charset="utf-8">
<script src="lib/esl.js"></script>
<script src="lib/config.js"></script>
</head>
<body>
<style>
html, body, #main {
width: 100%;
height: 100%;
}
</style>
also check "scatter-gps.html", filter should not block append data.
<div id="main"></div>
<script>
require([
'echarts'
// 'echarts/chart/scatter',
// 'echarts/component/legend',
// 'echarts/component/grid',
// 'echarts/component/tooltip',
// 'echarts/component/dataZoom'
], function (echarts) {
var chart = echarts.init(document.getElementById('main'), null, {
});
var data1 = [];
var data2 = [];
var data3 = [];
var random = function (max) {
return (Math.random() * max).toFixed(3);
};
for (var i = 0; i < 100000; i++) {
data1.push([random(15), random(10), random(1)]);
// data1.push([i, 10, i]);
data2.push([random(10), random(10), random(1)]);
data3.push([random(15), random(10), random(1)]);
}
// console.profile('setOption');
chart.setOption({
animation: false,
legend: {
data: ['scatter', 'scatter2', 'scatter3']
},
tooltip: {
},
xAxis: {
type: 'value',
min: 'dataMin',
max: 'dataMax',
splitLine: {
show: true
}
},
yAxis: {
type: 'value',
min: 'dataMin',
max: 'dataMax',
splitLine: {
show: true
}
},
dataZoom: [
{
show: true,
xAxisIndex: [0],
start: 1,
end: 5
},
{
show: true,
yAxisIndex: [0],
start: 29,
end: 36
},
{
type: 'inside',
xAxisIndex: [0],
start: 1,
end: 5
},
{
type: 'inside',
yAxisIndex: [0],
start: 29,
end: 36
}
],
series: [
{
name: 'scatter',
type: 'scatter',
itemStyle: {
normal: {
opacity: 0.8,
// shadowBlur: 10,
// shadowOffsetX: 0,
// shadowOffsetY: 0,
// shadowColor: 'rgba(0, 0, 0, 0.5)'
}
},
symbolSize: function (val) {
return val[2] * 40;
},
data: data1
},
{
name: 'scatter2',
type: 'scatter',
itemStyle: {
normal: {
opacity: 0.8
}
},
symbolSize: function (val) {
return val[2] * 40;
},
data: data2
},
{
name: 'scatter3',
type: 'scatter',
itemStyle: {
normal: {
opacity: 0.8,
}
},
symbolSize: function (val) {
return val[2] * 40;
},
data: data3
}
]
});
// console.profileEnd('setOption');
})
</script>
<!-- <script src="js/memory-stats.js"></script>
<script src="js/memory.js"></script> -->
</body>
</html>
\ No newline at end of file
Markdown is supported
0% .
You are about to add 0 people to the discussion. Proceed with caution.
先完成此消息的编辑!
想要评论请 注册