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,242 +869,298 @@
var chart = echarts.init(document.getElementById('main1'));
panel = document.getElementById('panel1');
var option = {
backgroundColor: '#404a59',
title: {
text: '全国主要城市空气质量',
subtext: 'data from PM25.in',
sublink: 'http://www.pm25.in',
left: 'center',
textStyle: {
color: '#fff'
}
var smSettings = {
diff: true,
animation: true,
animationDurationUpdate: 1000,
throttleDelay: 300,
throttleType: 'debounce'
};
window.smChange = {
diff: function (val) {
smSettings.diff = val;
restart();
},
tooltip : {
trigger: 'item'
animation: function (val) {
smSettings.animation = val;
restart();
},
toolbox: {
iconStyle: {
normal: {
borderColor: '#fff'
},
emphasis: {
borderColor: '#b1e4ff'
}
}
animationDurationUpdate: function (el) {
smSettings.animationDurationUpdate = +el.value;
restart();
},
legend: {
orient: 'vertical',
top: 'bottom',
left: 'right',
data:['pm2.5'],
textStyle: {
color: '#fff'
}
throttleDelay: function (el) {
smSettings.throttleDelay = +el.value;
restart();
},
geo: {
map: 'china',
left: '10',
right: '35%',
center: [117.98561551896913, 31.205000490896193],
zoom: 4.177248169415658,
label: {
emphasis: {
show: false
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',
sublink: 'http://www.pm25.in',
left: 'center',
textStyle: {
color: '#fff'
}
},
roam: true,
itemStyle: {
normal: {
areaColor: '#323c48',
borderColor: '#111'
},
emphasis: {
areaColor: '#2a333d'
}
}
},
brush: {
outOfBrush: {
color: '#abc'
tooltip : {
trigger: 'item'
},
seriesIndex: [0, 1],
throttleType: 'debounce',
throttleDelay: 100,
brushRanges: [
{
brushType: 'polygon',
range: [[482,130],[481,130],[470,123],[406,100],[387,94],[377,88],[374,83],[373,81],[366,76],[360,74],[355,73],[346,79],[337,83],[323,84],[301,84],[297,84],[281,88],[265,92],[265,93],[258,120],[265,144],[272,148],[297,168],[319,192],[324,200],[324,201],[325,205],[337,229],[342,240],[343,242],[343,243],[344,247],[345,250],[350,261],[354,268],[355,274],[355,281],[347,300],[342,319],[336,352],[333,388],[336,424],[351,442],[364,451],[375,455],[392,466],[401,474],[409,483],[419,493],[432,502],[453,502],[487,484],[521,436],[536,364],[539,322],[539,309],[537,305],[537,304],[536,295],[517,273],[511,264],[511,264]]
}
]
},
grid: {
right: 20,
top: 50,
bottom: 20,
width: '30%'
},
xAxis: {
type: 'value',
scale: true,
boundaryGap: false,
splitLine: {show: false},
axisLine: {show: false, lineStyle: {color: '#ddd'}},
axisTick: {show: false},
axisLabel: {textStyle: {color: '#ddd'}},
},
yAxis: {
type: 'category',
name: 'PM 2.5',
axisLine: {show: false, lineStyle: {color: '#ddd'}},
axisTick: {show: false, lineStyle: {color: '#ddd'}},
axisLabel: {interval: 0, textStyle: {color: '#ddd'}},
data: []
},
series : [
{
name: 'pm2.5',
type: 'scatter',
coordinateSystem: 'geo',
data: convertedData,
symbolSize: function (val) {
return val[2] / 10;
},
label: {
toolbox: {
iconStyle: {
normal: {
formatter: '{b}',
position: 'right',
show: false
borderColor: '#fff'
},
emphasis: {
show: true
}
},
itemStyle: {
normal: {
color: '#ddb926'
borderColor: '#b1e4ff'
}
}
},
{
name: 'Top 5',
type: 'effectScatter',
coordinateSystem: 'geo',
data: convertData(data.sort(function (a, b) {
return b.value - a.value;
}).slice(0, 6)),
symbolSize: function (val) {
return val[2] / 10;
},
showEffectOn: 'emphasis',
rippleEffect: {
brushType: 'stroke'
},
hoverAnimation: true,
legend: {
orient: 'vertical',
top: 'bottom',
left: 'right',
data:['pm2.5'],
textStyle: {
color: '#fff'
}
},
geo: {
map: 'china',
left: '10',
right: '35%',
center: [117.98561551896913, 31.205000490896193],
zoom: 4.177248169415658,
label: {
normal: {
formatter: '{b}',
position: 'right',
show: true
emphasis: {
show: false
}
},
roam: true,
itemStyle: {
normal: {
color: '#f4e925',
shadowBlur: 10,
shadowColor: '#333'
areaColor: '#323c48',
borderColor: '#111'
},
emphasis: {
areaColor: '#2a333d'
}
}
},
brush: {
outOfBrush: {
color: '#abc'
},
zlevel: 1
seriesIndex: [0, 1],
throttleType: smSettings.throttleType,
throttleDelay: smSettings.throttleDelay,
brushRanges: [
{
brushType: 'polygon',
range: [[482,130],[481,130],[470,123],[406,100],[387,94],[377,88],[374,83],[373,81],[366,76],[360,74],[355,73],[346,79],[337,83],[323,84],[301,84],[297,84],[281,88],[265,92],[265,93],[258,120],[265,144],[272,148],[297,168],[319,192],[324,200],[324,201],[325,205],[337,229],[342,240],[343,242],[343,243],[344,247],[345,250],[350,261],[354,268],[355,274],[355,281],[347,300],[342,319],[336,352],[333,388],[336,424],[351,442],[364,451],[375,455],[392,466],[401,474],[409,483],[419,493],[432,502],[453,502],[487,484],[521,436],[536,364],[539,322],[539,309],[537,305],[537,304],[536,295],[517,273],[511,264],[511,264]]
}
]
},
{
id: 'bar',
zlevel: 2,
type: 'bar',
symbol: 'none',
itemStyle: {
normal: {
color: '#ddb926'
grid: {
right: 20,
top: 50,
bottom: 20,
width: '30%'
},
xAxis: {
type: 'value',
scale: true,
boundaryGap: false,
splitLine: {show: false},
axisLine: {show: false, lineStyle: {color: '#ddd'}},
axisTick: {show: false},
axisLabel: {textStyle: {color: '#ddd'}},
},
yAxis: {
type: 'category',
name: 'PM 2.5',
axisLine: {show: false, lineStyle: {color: '#ddd'}},
axisTick: {show: false, lineStyle: {color: '#ddd'}},
axisLabel: {interval: 0, textStyle: {color: '#ddd'}},
data: []
},
series : [
{
name: 'pm2.5',
type: 'scatter',
coordinateSystem: 'geo',
data: convertedData,
symbolSize: function (val) {
return val[2] / 10;
},
label: {
normal: {
formatter: '{b}',
position: 'right',
show: false
},
emphasis: {
show: true
}
},
itemStyle: {
normal: {
color: '#ddb926'
}
}
},
data: []
}
]
};
chart.on('brushSelected', renderBrushed);
chart.setOption(option);
function renderBrushed(params) {
var brushed = [];
var top = 0;
var topWhere;
var sum = 0;
var count = 0;
var brushComponent = params.brushComponents[0];
var selectedItems = [];
for (var sIdx = 0; sIdx < brushComponent.series.length; sIdx++) {
var rawIndices = brushComponent.series[sIdx].rawIndices;
var placesBySeries = [];
for (var i = 0; i < rawIndices.length; i++) {
var rawIndex = rawIndices[i];
var item = convertedData[rawIndex];
var value = item.value[2];
sum += value;
count++;
if (value > top) {
top = value;
topWhere = item.name;
{
name: 'Top 5',
type: 'effectScatter',
coordinateSystem: 'geo',
data: convertData(data.sort(function (a, b) {
return b.value - a.value;
}).slice(0, 6)),
symbolSize: function (val) {
return val[2] / 10;
},
showEffectOn: 'emphasis',
rippleEffect: {
brushType: 'stroke'
},
hoverAnimation: true,
label: {
normal: {
formatter: '{b}',
position: 'right',
show: true
}
},
itemStyle: {
normal: {
color: '#f4e925',
shadowBlur: 10,
shadowColor: '#333'
}
},
zlevel: 1
},
{
id: 'bar',
zlevel: 2,
type: 'bar',
symbol: 'none',
itemStyle: {
normal: {
color: '#ddb926'
}
},
data: []
}
if (sIdx === 0) {
selectedItems.push(item);
]
};
var oldSelectedItems = [];
chart.on('brushSelected', renderBrushed);
chart.setOption(option, true);
function renderBrushed(params) {
var brushed = [];
var top = 0;
var topWhere;
var sum = 0;
var count = 0;
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 = [];
for (var i = 0; i < rawIndices.length; i++) {
var rawIndex = rawIndices[i];
var item = convertedData[rawIndex];
var value = item.value[2];
sum += value;
count++;
if (value > top) {
top = value;
topWhere = item.name;
}
if (sIdx === 0) {
selectedItems.push(item);
}
placesBySeries.push(item.name);
}
placesBySeries.push(item.name);
brushed.push('[Series ' + sIdx + '] ' + placesBySeries.join(', '));
}
brushed.push('[Series ' + sIdx + '] ' + placesBySeries.join(', '));
}
panel.innerHTML = [
'<h3>STATISTICS:</h3>',
'PM2.5 TOP: ' + topWhere + ' ' + top.toFixed(4) + '<br>',
'PM2.5 AVERAGE: ' + (sum / count).toFixed(4) + '<br>',
'<br>',
'<br>',
'<h3>BRUSHED:</h3>',
brushed.join('<br><br>'),
].join(' ');
selectedItems.sort(function (a, b) {
return a.value[2] - b.value[2];
});
var categoryData = [];
var barData = [];
var max = 30;
for (var i = 0; i < Math.min(selectedItems.length, max); i++) {
categoryData.push(selectedItems[i].name);
barData.push(selectedItems[i].value[2]);
}
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;
}
}
}
console.log('in brushSeleteed listener.');
panel.innerHTML = [
'<h3>STATISTICS:</h3>',
'PM2.5 TOP: ' + topWhere + ' ' + top.toFixed(4) + '<br>',
'PM2.5 AVERAGE: ' + (sum / count).toFixed(4) + '<br>',
'<br>',
'<br>',
'<h3>BRUSHED:</h3>',
brushed.join('<br><br>'),
].join(' ');
selectedItems.sort(function (a, b) {
return a.value[2] - b.value[2];
});
var categoryData = [];
var barData = [];
var max = 30;
for (var i = 0; i < Math.min(selectedItems.length, max); i++) {
categoryData.push(selectedItems[i].name);
barData.push(selectedItems[i].value[2]);
}
// 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({
yAxis: {data: categoryData},
series: {id: 'bar', data: barData}
});
}
chart.setOption({
// animation: false,
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.
先完成此消息的编辑！
想要评论请 注册 或