Skip to content

I
incubator-echarts

x649585723 / incubator-echarts
与 Fork 源项目一致

从无法访问的项目Fork

通知 1
Star 0
Fork 0
I
incubator-echarts

体验新版 GitCode，发现更多精彩内容 >>

提交 2e1f313c 编写于 作者: P pah100
浏览文件
操作

update example

上级 d32c4d17
显示空白变更内容
内联 并排
Showing with 318 addition and 207 deletion
src/util/throttle.js
浏览文件 @ 2e1f313c
......@@ -4,6 +4,7 @@ define(function () {
var ORIGIN_METHOD = '\0__throttleOriginMethod';
var RATE = '\0__throttleRate';
var THROTTLE_TYPE = '\0__throttleType';
/**
* @public
......@@ -104,13 +105,15 @@ define(function () {
}
var originFn = fn[ORIGIN_METHOD] || fn;
var lastThrottleType = fn[THROTTLE_TYPE];
var lastRate = fn[RATE];
if (lastRate !== rate) {
if (lastRate !== rate || lastThrottleType !== throttleType) {
fn = obj[fnAttr] = lib.throttle(
originFn, rate, throttleType === 'debounce'
);
fn[ORIGIN_METHOD] = originFn;
fn[THROTTLE_TYPE] = throttleType;
fn[RATE] = rate;
}
......
test/brush.html
浏览文件 @ 2e1f313c
......@@ -24,7 +24,7 @@
}
body .main {
height: 550px;
margin-right: 220px;
margin-right: 300px;
margin-left: 20px;
}
.panel {
......@@ -32,7 +32,7 @@
top: 0;
right: 0;
bottom: 0;
width: 200px;
width: 280px;
background: #555;
color: #fff;
font-size: 14px;
......@@ -66,6 +66,14 @@
border-radius: 2px;
color: #000;
}
.sm-settings {
border-bottom: 1px solid #777;
padding-bottom: 15px;
}
.sm-settings input {
max-width: 50px;
}
</style>
<div class="split">Scatter</div>
......@@ -81,6 +89,7 @@
</div>
</div>
<div class="split">Scatter in Map</div>
<div class="block">
<div id="main1" class="main"></div>
......@@ -88,10 +97,36 @@
<ul class="panel-desc">
<li>bar and scatter are in the same ec instances and use setOption in brushSelected event.</li>
</ul>
<div class="sm-settings">
<div>
DIFF with previous selected:
<input onclick="smChange.diff(true)" type="radio" name="diff" checked="checked"/>Y
<input onclick="smChange.diff(false)" type="radio" name="diff" />N
</div>
<div>
animation:
<input onclick="smChange.animation(true)" type="radio" name="animation" checked="checked"/>Y
<input onclick="smChange.animation(false)" type="radio" name="animation" />N
</div>
<div>
animationDurationUpdate:
<input value="1000" onblur="smChange.animationDurationUpdate(this)" type="text" />
</div>
<div>
throttleDelay:
<input value="300" onblur="smChange.throttleDelay(this)" type="text" />
</div>
<div>
throttleType:
<input onclick="smChange.throttleType('debounce')" type="radio" name="throttleType" checked="checked"/>debounce
<input onclick="smChange.throttleType('fixRate')" type="radio" name="throttleType" />fixRate
</div>
</div>
<div id="panel1"></div>
</div>
</div>
<div class="split">Stacked Bar (rect-polygon intersect)</div>
<div class="block">
<div id="main4" class="main"></div>
......@@ -108,6 +143,15 @@
<!-- =================== 1 ===================== -->
<script type="text/javascript">
require([
'echarts',
......@@ -399,6 +443,10 @@
<!-- =================== 2 ===================== -->
......@@ -821,8 +869,49 @@
var chart = echarts.init(document.getElementById('main1'));
panel = document.getElementById('panel1');
var smSettings = {
diff: true,
animation: true,
animationDurationUpdate: 1000,
throttleDelay: 300,
throttleType: 'debounce'
};
window.smChange = {
diff: function (val) {
smSettings.diff = val;
restart();
},
animation: function (val) {
smSettings.animation = val;
restart();
},
animationDurationUpdate: function (el) {
smSettings.animationDurationUpdate = +el.value;
restart();
},
throttleDelay: function (el) {
smSettings.throttleDelay = +el.value;
restart();
},
throttleType: function (val) {
smSettings.throttleType = val;
restart();
}
};
restart();
function restart() {
chart.off();
var option = {
backgroundColor: '#404a59',
animation: smSettings.animation,
animationDurationUpdate: smSettings.animationDurationUpdate,
title: {
text: '全国主要城市空气质量',
subtext: 'data from PM25.in',
......@@ -881,8 +970,8 @@
color: '#abc'
},
seriesIndex: [0, 1],
throttleType: 'debounce',
throttleDelay: 100,
throttleType: smSettings.throttleType,
throttleDelay: smSettings.throttleDelay,
brushRanges: [
{
brushType: 'polygon',
......@@ -984,8 +1073,10 @@
]
};
var oldSelectedItems = [];
chart.on('brushSelected', renderBrushed);
chart.setOption(option);
chart.setOption(option, true);
function renderBrushed(params) {
var brushed = [];
......@@ -996,6 +1087,8 @@
var brushComponent = params.brushComponents[0];
var selectedItems = [];
var isDiff;
for (var sIdx = 0; sIdx < brushComponent.series.length; sIdx++) {
var rawIndices = brushComponent.series[sIdx].rawIndices;
var placesBySeries = [];
......@@ -1017,6 +1110,19 @@
brushed.push('[Series ' + sIdx + '] ' + placesBySeries.join(', '));
}
if (selectedItems.length !== oldSelectedItems.length) {
isDiff = true;
}
else {
for (var i = 0; i < selectedItems.length; i++) {
if (selectedItems[i].value !== oldSelectedItems[i].value
|| selectedItems[i].name !== oldSelectedItems[i].name
) {
isDiff = true;
}
}
}
panel.innerHTML = [
'<h3>STATISTICS:</h3>',
'PM2.5 TOP: ' + topWhere + ' ' + top.toFixed(4) + '<br>',
......@@ -1040,23 +1146,21 @@
barData.push(selectedItems[i].value[2]);
}
console.log('in brushSeleteed listener.');
// console.log(chart.getOption().geo[0].center, chart.getOption().geo[0].zoom);
// console.log(JSON.stringify(params));
if (!smSettings.diff || isDiff) {
smSettings.diff
? console.log('diff checked and setOption.')
: console.log('do not check diff and setOption.');
chart.setOption({
// animation: false,
yAxis: {
data: categoryData
},
series: {
id: 'bar',
data: barData
}
yAxis: {data: categoryData},
series: {id: 'bar', data: barData}
});
}
if (smSettings.diff && !isDiff) {
console.log('check diff and NO DIFF');
}
}
}
});
});
......@@ -1071,6 +1175,10 @@
<!-- =================== 3 ===================== -->
......
Markdown is supported
0% 或 .
You are about to add 0 people to the discussion. Proceed with caution.
先完成此消息的编辑！
想要评论请 注册 或