Skip to content

I
incubator-echarts

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

从无法访问的项目Fork

通知 1
Star 0
Fork 0
I
incubator-echarts

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

提交 63c22ab0 编写于 作者: P pah100
浏览文件
操作

brush: trigger event.

上级 855227ae
隐藏空白更改
内联 并排
Showing with 282 addition and 64 deletion
src/ExtensionAPI.js
浏览文件 @ 63c22ab0
......@@ -5,7 +5,7 @@ define(function(require) {
var zrUtil = require('zrender/core/util');
var echartsAPIList = [
'getDom', 'getZr', 'getWidth', 'getHeight', 'dispatchAction',
'getDom', 'getZr', 'getWidth', 'getHeight', 'dispatchAction', 'prepareExtraEvent',
'on', 'off', 'getDataURL', 'getConnectedDataURL', 'getModel', 'getOption'
];
......
src/chart/bar/BarSeries.js
浏览文件 @ 63c22ab0
......@@ -4,7 +4,6 @@ define(function(require) {
var SeriesModel = require('../../model/Series');
var createListFromArray = require('../helper/createListFromArray');
var brushable = require('../helper/brushable');
return SeriesModel.extend({
......@@ -31,8 +30,7 @@ define(function(require) {
return [NaN, NaN];
},
isInBrush: brushable.isInBrush.rect,
getBrushed: brushable.getBrushed,
brushSelector: 'rect',
defaultOption: {
zlevel: 0, // 一级层叠
......
src/chart/effectScatter/EffectScatterSeries.js
浏览文件 @ 63c22ab0
......@@ -4,7 +4,6 @@ define(function (require) {
var createListFromArray = require('../helper/createListFromArray');
var SeriesModel = require('../../model/Series');
var brushable = require('../helper/brushable');
return SeriesModel.extend({
......@@ -17,8 +16,7 @@ define(function (require) {
return list;
},
isInBrush: brushable.isInBrush.point,
getBrushed: brushable.getBrushed,
brushSelector: 'point',
defaultOption: {
coordinateSystem: 'cartesian2d',
......
src/chart/scatter/ScatterSeries.js
浏览文件 @ 63c22ab0
......@@ -4,7 +4,6 @@ define(function (require) {
var createListFromArray = require('../helper/createListFromArray');
var SeriesModel = require('../../model/Series');
var brushable = require('../helper/brushable');
return SeriesModel.extend({
......@@ -17,8 +16,7 @@ define(function (require) {
return list;
},
isInBrush: brushable.isInBrush.point,
getBrushed: brushable.getBrushed,
brushSelector: 'point',
defaultOption: {
coordinateSystem: 'cartesian2d',
......
src/chart/helper/brushable.js → src/component/brush/selector.js
浏览文件 @ 63c22ab0
......@@ -2,7 +2,8 @@ define(function(require) {
var polygonContain = require('zrender/contain/polygon').contain;
// `line`, `rect`, `polygon` is brush type.
// Key of the first level is brushType: `line`, `rect`, `polygon`.
// Key of the second level is chart element type: `point`, `rect`.
// See moudule:echarts/component/helper/BrushController
// function param:
// {Object} itemLayout fetch from data.getItemLayout(dataIndex)
......@@ -10,62 +11,33 @@ define(function(require) {
// {module:zrender/core/BoundingRect} [boundingRect]
// function return:
// {boolean} Whether in the given brush.
var isInBrush = {
point: {
rect: function (itemLayout, brushRange, boundingRect) {
var selector = {
rect: {
point: function (itemLayout, brushRange, boundingRect) {
return boundingRect.contain(itemLayout[0], itemLayout[1]);
},
polygon: function (itemLayout, brushRange, boundingRect, data, dataIndex) {
rect: function (itemLayout, brushRange, boundingRect, data, dataIndex) {
// TEST contain
if (
data.get('x', dataIndex) === 6
&& data.get('y', dataIndex) === 1
&& boundingRect.contain(itemLayout[0], itemLayout[1])
&& polygonContain(brushRange.range, itemLayout[0], itemLayout[1])
) {
console.log(itemLayout, JSON.stringify(brushRange));
}
return boundingRect.contain(itemLayout[0], itemLayout[1])
&& polygonContain(brushRange.range, itemLayout[0], itemLayout[1]);
// if (
// data.get('x', dataIndex) === 6
// && data.get('y', dataIndex) === 1
// && boundingRect.contain(itemLayout[0], itemLayout[1])
// && polygonContain(brushRange.range, itemLayout[0], itemLayout[1])
// ) {
// console.log(itemLayout, JSON.stringify(brushRange));
// }
}
},
rect: {
rect: function (itemLayout, brushRange, boundingRect) {
return boundingRect.contain(itemLayout[0], itemLayout[1]);
},
polygon: function (itemLayout, brushRange, boundingRect, data, dataIndex) {
// TEST contain
if (
data.get('x', dataIndex) === 6
&& data.get('y', dataIndex) === 1
&& boundingRect.contain(itemLayout[0], itemLayout[1])
&& polygonContain(brushRange.range, itemLayout[0], itemLayout[1])
) {
console.log(itemLayout, JSON.stringify(brushRange));
}
polygon: {
point: function (itemLayout, brushRange, boundingRect) {
return boundingRect.contain(itemLayout[0], itemLayout[1])
&& polygonContain(brushRange.range, itemLayout[0], itemLayout[1]);
},
rect: function (itemLayout, brushRange, boundingRect, data, dataIndex) {
}
}
};
return {
return selector;
isInBrush: isInBrush,
/**
* Brushed is get by API, but not by event params, because when user calls
* setOption, no event triggered to tell user which are brushed.
* And on other event like dataZoom, user may need brushed params too.
* @public
* @return {Array.<number>} Brushed data index list.
*/
getBrushed: function () {
return this.__brushedRawIndices || [];
}
};
});
\ No newline at end of file
src/component/brush/visualEncoding.js
浏览文件 @ 63c22ab0
......@@ -7,6 +7,7 @@ define(function (require) {
var visualSolution = require('../../visual/visualSolution');
var zrUtil = require('zrender/core/util');
var BoundingRect = require('zrender/core/BoundingRect');
var selector = require('./selector');
var STATE_LIST = ['inBrush', 'outOfBrush'];
......@@ -15,9 +16,7 @@ define(function (require) {
*/
echarts.registerVisual(echarts.PRIORITY.VISUAL.BRUSH, function (ecModel, api, payload) {
ecModel.eachSeries(function (seriesModel, seriesIndex) {
seriesModel.__brushedRawIndices = [];
});
var brushSelected = [];
ecModel.eachComponent({mainType: 'brush'}, function (brushModel, brushIndex) {
......@@ -27,6 +26,14 @@ define(function (require) {
var selectedDataIndexForLink = [];
var rangeInfo = [];
var thisBrushSelected = {
brushId: brushModel.id,
brushIndex: brushIndex,
brushName: brushModel.name,
series: []
};
brushSelected.push(thisBrushSelected);
var visualMappings = visualSolution.createVisualMappings(
brushModel.option, STATE_LIST, function (mappingOption) {
mappingOption.mappingMethod = 'fixed';
......@@ -42,14 +49,14 @@ define(function (require) {
}
ecModel.eachSeries(function (seriesModel, seriesIndex) {
var isInBrush = seriesModel.isInBrush;
if (!isInBrush) {
var selectorsByBrushType = getSelectorsByBrushType(seriesModel);
if (!selectorsByBrushType) {
return;
}
var rInfo = rangeInfo[seriesIndex] = {ranges: [], boundingRects: []};
zrUtil.each(brushRanges, function (brushRange) {
if (isInBrush[brushRange.type]) {
if (selectorsByBrushType[brushRange.type]) {
rInfo.ranges.push(brushRange);
rInfo.boundingRects.push(boundingRectBuilders[brushRange.type](brushRange));
}
......@@ -58,7 +65,7 @@ define(function (require) {
if (useLink(seriesIndex)) {
var data = seriesModel.getData();
rInfo.ranges.length && data.each(function (dataIndex) {
if (checkInRange(isInBrush, rInfo, data, dataIndex)) {
if (checkInRange(selectorsByBrushType, rInfo, data, dataIndex)) {
selectedDataIndexForLink[dataIndex] = 1;
}
});
......@@ -66,25 +73,31 @@ define(function (require) {
});
ecModel.eachSeries(function (seriesModel, seriesIndex) {
var isInBrush = seriesModel.isInBrush;
if (!isInBrush) {
var selectorsByBrushType = getSelectorsByBrushType(seriesModel);
if (!selectorsByBrushType) {
return;
}
var data = seriesModel.getData();
var rInfo = rangeInfo[seriesIndex];
var brushedRawIndices = seriesModel.__brushedRawIndices;
var getValueState = useLink(seriesIndex)
? function (dataIndex) {
return selectedDataIndexForLink[dataIndex]
? (brushedRawIndices.push(data.getRawIndex(dataIndex)), 'inBrush')
? (seriesBrushSelected.rawIndices.push(data.getRawIndex(dataIndex)), 'inBrush')
: 'outOfBrush';
}
: function (dataIndex) {
return checkInRange(isInBrush, rInfo, data, dataIndex)
? (brushedRawIndices.push(data.getRawIndex(dataIndex)), 'inBrush')
return checkInRange(selectorsByBrushType, rInfo, data, dataIndex)
? (seriesBrushSelected.rawIndices.push(data.getRawIndex(dataIndex)), 'inBrush')
: 'outOfBrush';
};
var seriesBrushSelected = {
seriesId: seriesModel.id,
seriesIndex: seriesIndex,
seriesName: seriesModel.name,
rawIndices: []
};
thisBrushSelected.series.push(seriesBrushSelected);
// If no supported brush, all visuals are in original state.
rInfo.ranges.length && visualSolution.applyVisual(
......@@ -93,19 +106,37 @@ define(function (require) {
});
});
api.prepareExtraEvent({
type: 'brushSelected',
brushComponents: brushSelected
});
});
function checkInRange(isInBrush, rInfo, data, dataIndex) {
function checkInRange(selectorsByBrushType, rInfo, data, dataIndex) {
var itemLayout = data.getItemLayout(dataIndex);
for (var i = 0, len = rInfo.ranges.length; i < len; i++) {
if (isInBrush[rInfo.ranges[i].type](
itemLayout, rInfo.ranges[i], rInfo.boundingRects[i], data, dataIndex
var brushType = rInfo.ranges[i].type;
if (selectorsByBrushType[brushType](
itemLayout, rInfo.ranges[i], rInfo.boundingRects[i], selector[brushType]
)) {
return true;
}
}
}
function getSelectorsByBrushType(seriesModel) {
var brushSelector = seriesModel.brushSelector;
if (zrUtil.isString(brushSelector)) {
var sels = [];
zrUtil.each(selector, function (selectorsByElementType, brushType) {
sels[brushType] = selectorsByElementType[brushSelector];
});
return sels;
}
return brushSelector;
}
var boundingRectBuilders = {
line: zrUtil.noop,
......
src/echarts.js
浏览文件 @ 63c22ab0
......@@ -136,6 +136,11 @@ define(function (require) {
*/
this._coordSysMgr = new CoordinateSystemManager();
/**
* @type {Array.<Object>}
*/
this._extraEvents = [];
Eventful.call(this);
/**
......@@ -189,8 +194,12 @@ define(function (require) {
this._model.setOption(option, optionPreprocessorFuncs);
this._extraEvents = [];
updateMethods.prepareAndUpdate.call(this);
triggerExtraEvents.call(this);
!notRefreshImmediately && this._zr.refreshImmediately();
};
......@@ -545,9 +554,13 @@ define(function (require) {
echartsProto.resize = function () {
this._zr.resize();
this._extraEvents = [];
var optionChanged = this._model && this._model.resetOption('media');
updateMethods[optionChanged ? 'prepareAndUpdate' : 'update'].call(this);
triggerExtraEvents.call(this);
// Resize loading effect
this._loadingFX && this._loadingFX.resize();
};
......@@ -589,6 +602,20 @@ define(function (require) {
return payload;
};
/**
* @param {Object} eventObj
* @param {string} eventObj.type
*/
echartsProto.prepareExtraEvent = function (eventObj) {
this._extraEvents.push(eventObj);
};
function triggerExtraEvents() {
each(this._extraEvents, function (eventObj) {
this.trigger(eventObj.type.toLowerCase(), eventObj);
}, this);
}
/**
* @pubilc
* @param {Object} payload
......@@ -598,6 +625,9 @@ define(function (require) {
echartsProto.dispatchAction = function (payload, silent) {
var actionWrap = actions[payload.type];
if (actionWrap) {
this._extraEvents = [];
var actionInfo = actionWrap.actionInfo;
var updateMethod = actionInfo.update || 'update';
......@@ -646,6 +676,10 @@ define(function (require) {
}
this._messageCenter.trigger(eventObj.type, eventObj);
}
// FIXME
// Should controlled by silent?
triggerExtraEvents.call(this);
}
};
......
test/brush.html
浏览文件 @ 63c22ab0
......@@ -8,8 +8,8 @@
<body>
<style>
.split {
line-height: 80px;
height: 80px;
line-height: 60px;
height: 60px;
background: #333;
text-align: center;
font-weight: bold;
......@@ -39,15 +39,40 @@
font-weight: normal;
padding: 10px;
}
ul.panel-desc {
padding-left: 20px;
padding-bottom: 10px;
border-bottom: 1px solid #777;
}
ul.panel-desc li {
margin-bottom: 5px;
}
h3 {
font-size: 14px;
}
#main2 {
height: 450px;
}
#main2-st {
position: relative;
height: 200px;
margin-right: 220px;
margin-left: 20px;
}
</style>
<div class="split">Interaction with DataZoom and VisualMap (select an area and drag dataZoom)</div>
<div class="split">Scatter</div>
<div class="block">
<div id="main2" class="main"></div>
<div id="panel2" class="panel"></div>
<div id="main2-st"></div>
<div class="panel">
<ul class="panel-desc">
<li>test: select an area and drag dataZoom.</li>
<li>bar and pie are individual ec instances.</li>
</ul>
<div id="panel2"></div>
</div>
</div>
<div class="split">Scatter in Map</div>
......@@ -78,7 +103,9 @@
require([
'echarts',
'echarts/chart/scatter',
'echarts/chart/bar',
'echarts/chart/line',
'echarts/chart/pie',
'echarts/component/title',
'echarts/component/legend',
'echarts/component/grid',
'echarts/component/visualMapContinuous',
......@@ -93,8 +120,9 @@
return;
}
var chart = echarts.init(main);
var chart2St = echarts.init(document.getElementById('main2-st'));
var dataList = [[], []];
var dataList = [[], [], []];
var MAX_DIM2 = 300;
var MAX_DIM3 = 20000;
......@@ -112,6 +140,7 @@
for (var i = 0; i < 60; i++) {
dataList[0].push(genDataItem());
dataList[1].push(genDataItem());
dataList[2].push(genDataItem());
}
function genDataItem() {
......@@ -123,7 +152,7 @@
];
}
chart.setOption({
var option = {
color: ['#555', '#555'],
backgroundColor: '#fff',
toolbox: {
......@@ -135,7 +164,7 @@
},
legend: {
top: 20,
data: ['scatter0', 'scatter1']
data: ['scatter0', 'scatter1', 'scatter2']
},
grid: [
{
......@@ -173,7 +202,7 @@
},
outOfRange: {
color: ['blue', 'orange', 'yellow'],
opacity: 0.2
opacity: 0.1
}
},
{
......@@ -213,31 +242,59 @@
symbol: 'diamond',
itemStyle: itemStyle,
data: dataList[1]
},
{
name: 'scatter2',
type: 'scatter',
symbol: 'rect',
itemStyle: itemStyle,
data: dataList[2]
}
]
});
};
chart.on('brushSelected', renderBrushed);
window.onresize = function () {
chart.resize();
chart2St.resize();
};
chart.on('brush', renderBrushed);
chart.on('dataZoom', renderBrushed);
chart.on('legendselectchanged', renderBrushed);
var dim2SumTrack = [];
var dim3SumTrack = [];
var trackNums = [];
var trackNum = 0;
var trackMax = 100;
renderBrushed(); // For brush defined in option.
chart.setOption(option);
function renderBrushed() {
function renderBrushed(params) {
var brushed = [];
var dim2Sum = 0;
var dim3Sum = 0;
chart.getModel().eachSeries(function (seriesModel, seriesIndex) {
if (!seriesModel.getBrushed) {
return;
}
var rawIndices = seriesModel.getBrushed();
brushed.push('[Series ' + seriesIndex + '] ' + rawIndices.join(', '));
var countBySeries = [];
var brushComponent = params.brushComponents[0];
for (var sIdx = 0; sIdx < brushComponent.series.length; sIdx++) {
var rawIndices = brushComponent.series[sIdx].rawIndices;
brushed.push('[Series ' + sIdx + '] ' + rawIndices.join(', '));
for (var i = 0; i < rawIndices.length; i++) {
dim2Sum += dataList[seriesIndex][rawIndices[i]][2];
dim3Sum += dataList[seriesIndex][rawIndices[i]][3];
dim2Sum += dataList[sIdx][rawIndices[i]][2];
dim3Sum += dataList[sIdx][rawIndices[i]][3];
}
});
countBySeries[sIdx] = {
name: 'series-' + sIdx,
value: rawIndices.length
};
}
dim2SumTrack.push(dim2Sum);
dim3SumTrack.push(dim3Sum);
trackNums.push(trackNum++);
if (trackNums.length > trackMax) {
dim2SumTrack.shift();
dim3SumTrack.shift();
trackNums.shift();
}
panel.innerHTML = [
'<h3>STATISTICS:</h3>',
......@@ -248,6 +305,69 @@
'<h3>BRUSHED RAW INDICES:</h3>',
brushed.join('<br><br>'),
].join(' ');
chart2St.setOption({
backgroundColor: '#fff',
title: [
{
text: 'Selected\nCount',
textStyle: {fontSize: 14},
left: '70%',
top: '45%'
}
],
grid: {
left: 20,
top: 50,
bottom: 20,
containLabel: true,
width: '50%'
},
xAxis: {
type: 'category',
scale: true,
boundaryGap: false,
splitLine: {show: false},
data: trackNums
},
yAxis: [
{
type: 'value',
name: 'dim2 sum',
splitNumber: 5,
axisLine: {onZero: false, lineStyle: {color: '#c23531'}},
axisTick: {show: false}
},
{
type: 'value',
name: 'dim3 sum',
splitNumber: 5,
axisLine: {onZero: false, lineStyle: {color: '#61a0a8'}},
axisTick: {show: false}
}
],
series: [
{
type: 'pie',
center: ['75%', '50%'],
radius: [50, 70],
data: countBySeries
},
{
type: 'line',
symbol: 'none',
lineStyle: {normal: {color: '#c23531'}},
data: dim2SumTrack
},
{
type: 'line',
symbol: 'none',
lineStyle: {normal: {color: '#61a0a8'}},
yAxisIndex: 1,
data: dim3SumTrack
}
]
});
}
})
</script>
......@@ -683,7 +803,7 @@
var chart = echarts.init(document.getElementById('main1'));
panel = document.getElementById('panel1');
chart.setOption({
var option = {
backgroundColor: '#404a59',
title: {
text: '全国主要城市空气质量',
......@@ -786,25 +906,21 @@
zlevel: 1
}
]
});
chart.on('brush', renderBrushed);
chart.on('geoRoam', renderBrushed);
};
renderBrushed(); // For brush defined in option.
chart.on('brushSelected', renderBrushed);
chart.setOption(option);
function renderBrushed() {
function renderBrushed(params) {
var brushed = [];
var top = 0;
var topWhere;
var sum = 0;
var count = 0;
var brushComponent = params.brushComponents[0];
chart.getModel().eachSeries(function (seriesModel, seriesIndex) {
if (!seriesModel.getBrushed) {
return;
}
var rawIndices = seriesModel.getBrushed();
for (var sIdx = 0; sIdx < brushComponent.series.length; sIdx++) {
var rawIndices = brushComponent.series[sIdx].rawIndices;
var places = [];
for (var i = 0; i < rawIndices.length; i++) {
var rawIndex = rawIndices[i];
......@@ -818,8 +934,8 @@
}
places.push(item.name);
}
brushed.push('[Series ' + seriesIndex + '] ' + places.join(', '));
});
brushed.push('[Series ' + sIdx + '] ' + places.join(', '));
}
panel.innerHTML = [
'<h3>STATISTICS:</h3>',
......
Markdown is supported
0% 或 .
You are about to add 0 people to the discussion. Proceed with caution.
先完成此消息的编辑！
想要评论请 注册 或