提交 d8d34c3a 编写于 作者: P pah100

udpate datazoom

上级 98615e8c
......@@ -108,15 +108,11 @@ define(function (require) {
var viewRange = this.layout.viewRange;
var viewExtend = [0, this._getViewTotalLength()];
var percentExtent = [0, 100];
var range = {
return this._processRange({
start: linearMap(viewRange.handle1, viewExtend, percentExtent, true),
end: linearMap(viewRange.handle2, viewExtend, percentExtent, true)
};
// Auto exchange
if (range.start > range.end) {
range.start = [range.end, range.end = range.start][0];
}
return range;
});
},
/**
......@@ -178,7 +174,7 @@ define(function (require) {
*/
_initViewRange: function () {
// Based on layout.location.
var range = this.dataZoomModel.getRange();
var range = this._processRange(this.dataZoomModel.getRange());
var viewExtend = [0, this._getViewTotalLength()];
var percentExtent = [0, 100];
this.layout.viewRange = {
......@@ -187,6 +183,26 @@ define(function (require) {
};
},
_processRange: function (range) {
// Auto exchange
if (range.start > range.end) {
range.start = [range.end, range.end = range.start][0];
}
// Clamp
range.start > 100 && (range.start = 100);
range.end > 100 && (range.end = 100);
range.start < 0 && (range.start = 0);
range.end < 0 && (range.end = 0);
// Reverse if needed.
var inverse = this.dataZoomModel.get('inverse');
if (inverse) {
range.end = [100 - range.start, range.start = 100 - range.end][0];
}
return range;
},
/**
* @private
* @param {Object} dataZoomModel
......
......@@ -73,6 +73,7 @@ define(function(require) {
this._resetTargetAxes(newOption);
// this._resetTargetSeries(newOption);
this._resetRange();
this._resetInverse();
},
_resetTargetAxes: function (newOption) {
......@@ -84,16 +85,6 @@ define(function(require) {
var axisIndices = helper.toArray(helper.retrieveValue(
newOption[dimNames.axisIndex], thisOption[dimNames.axisIndex], []
));
var axisModels = this.dependentModels[dimNames.axis];
// If not specified, set default.
if (axisModels.length && !axisIndices.length) {
for (var i = 0, len = axisModels.length; i < len; i++) {
if (axisModels[i].get('type') === 'category') {
axisIndices.push(i);
}
}
}
thisOption[dimNames.axisIndex] = axisIndices;
if (axisIndices.length) {
......@@ -101,6 +92,40 @@ define(function(require) {
}
}, this);
if (noAxisDefined) {
// Find axis that parallel to dataZoom as default.
var dimNames = this.get('orient') === 'vertical'
? {dim: 'y', axisIndex: 'yAxisIndex', axis: 'yAxis'}
: {dim: 'x', axisIndex: 'xAxisIndex', axis: 'xAxis'};
if (this.dependentModels[dimNames.axis].length) {
thisOption[dimNames.axisIndex] = [0];
noAxisDefined = false;
}
}
if (noAxisDefined) {
// Find the first category axis as default. (consider polar)
helper.eachAxisDim(function (dimNames) {
if (!noAxisDefined) {
return;
}
var axisIndices = [];
var axisModels = this.dependentModels[dimNames.axis];
if (axisModels.length && !axisIndices.length) {
for (var i = 0, len = axisModels.length; i < len; i++) {
if (axisModels[i].get('type') === 'category') {
axisIndices.push(i);
}
}
}
thisOption[dimNames.axisIndex] = axisIndices;
if (axisIndices.length) {
noAxisDefined = false;
}
}, this);
}
if (noAxisDefined) {
// FIXME
// 这里是兼容ec2的写法(没指定xAxisIndex和yAxisIndex时把scatter和双数值轴折柱纳入dataZoom控制),
......@@ -155,17 +180,19 @@ define(function(require) {
var targetDim;
helper.eachAxisDim(function (dimNames) {
if (thisOption[dimNames.axisIndex].length) {
targetDim = targetDim !== false ? false : dimNames.dim;
targetDim = targetDim != null ? false : dimNames.dim;
}
});
// Otherwise, determine it by dataZoom.orient (compatibale with the logic in ec2.)
// targetDim === 'y' means start/end control 'y' and start2/end2 control 'x'.
// FIXME
// 不要这么做。不要 start2 end2 参数。
var targetDim2;
if (targetDim === false) {
targetDim = thisOption.orient === 'vertical' ? 'y' : 'x';
targetDim2 = targetDim === 'x' ? 'y' : 'x';
}
// if (targetDim === false) {
// targetDim = thisOption.orient === 'vertical' ? 'y' : 'x';
// targetDim2 = targetDim === 'x' ? 'y' : 'x';
// }
var optAttrs = {};
optAttrs[targetDim] = {start: 'start', end: 'end'};
......@@ -194,6 +221,36 @@ define(function(require) {
}
},
/**
* @private
*/
_resetInverse: function () {
var orient = this.get('orient');
// Just use the first axis to determine mapping.
var targetAxisModel = this._getFirstTargetAxisModel();
var inverse = targetAxisModel && targetAxisModel.get('inverse');
this.option.inverse =
(orient === 'horizontal' && inverse)
|| (orient === 'vertical' && !inverse);
},
/**
* @private
*/
_getFirstTargetAxisModel: function () {
var firstAxisModel;
helper.eachAxisDim(function (dimNames) {
if (firstAxisModel == null) {
var indices = this.get(dimNames.axisIndex);
if (indices.length) {
firstAxisModel = this.dependentModels[dimNames.axis][indices[0]];
}
}
}, this);
return firstAxisModel;
},
/**
* @public
* @param {Function} callback param: axisModel, dimNames, axisIndex, dataZoomModel, ecModel
......
......@@ -29,45 +29,33 @@ define(function (require) {
// Process axis data
var axisModel = ecModel.getComponent(dimNames.axis, axisIndex);
var percentExtent = [0, 100];
var dataZoomStart = axisModel.get('dataZoomStart');
var dataZoomEnd = axisModel.get('dataZoomEnd');
var seriesModels = dataZoomModel.getTargetSeriesModels(dimNames.dim, axisIndex);
var dataExtent = calculateDataExtent(dimNames, axisModel, seriesModels);
var dataWindow = calculateDataWindow(axisModel, dataExtent);
var axisType = axisModel.get('type');
var axisData = axisModel.getData();
if (axisData) {
var axisDataExtent = [0, axisData.length];
var axisStart = Math.floor(linearMap(dataZoomStart, percentExtent, axisDataExtent, true));
var axisEnd = Math.ceil(linearMap(dataZoomEnd, percentExtent, axisDataExtent, true));
// Only category axis has property 'data's.
if (axisType === 'category') {
var axisData = axisModel.getData();
// FIXME
// setter?
axisData = axisModel.option.data = axisData.slice(axisStart, axisEnd);
axisData = axisModel.option.data = axisData.slice(dataWindow[0], dataWindow[1] + 1);
}
// Process series data
var seriesModels = dataZoomModel.getTargetSeriesModels(dimNames.dim, axisIndex);
zrUtil.each(seriesModels, function (seriesModel) {
// FIXME
// 如何filter,
// 是根据data自己存的信息(如dimension)来判断(这比较直接,但是现在list里存的信息没清楚),
// 还是根据axis type来判断(比较枚举不太好)
// var axisType = axisModel.get('type');
// FIXME
// 这里仅仅处理了list类型
var seriesData = seriesModel.getData();
if (seriesData) {
var seriesDataExtent = [0, seriesData.count()];
var seriesStart = Math.floor(linearMap(dataZoomStart, percentExtent, seriesDataExtent, true));
var seriesEnd = Math.ceil(linearMap(dataZoomEnd, percentExtent, seriesDataExtent, true));
seriesData.filterSelf(function (entry) {
var value = entry['get' + dimNames.dim.toUpperCase()]();
return value >= seriesStart && value <= seriesEnd;
});
if (!seriesData) {
return;
}
seriesData.filterSelf(function (entry) {
var value = entry[dimNames.getter]();
return value >= dataWindow[0] && value <= dataWindow[1];
});
// FIXME
// 对于value轴的过滤(另一个轴是category),效果有问题,现在简单去除节点不行。
// FIXME
// 对于数值轴,还要考虑log等情况.
// FIXME
......@@ -75,4 +63,37 @@ define(function (require) {
});
}
function calculateDataExtent(dimNames, axisModel, seriesModels) {
var dataExtent = [Number.MAX_VALUE, Number.MIN_VALUE];
if (axisModel.get('type') === 'category') {
// Only category axis has property 'data's.
var axisData = axisModel.getData() || [];
dataExtent = [0, axisData.length];
}
else {
zrUtil.each(seriesModels, function (seriesModel) {
var seriesData = seriesModel.getData();
if (seriesData) {
var seriesExtent = seriesData['getExtent' + dimNames.dim.toUpperCase()]();
seriesExtent[0] < dataExtent[0] && (dataExtent[0] = seriesExtent[0]);
seriesExtent[1] > dataExtent[1] && (dataExtent[1] = seriesExtent[1]);
}
}, this);
}
return dataExtent;
}
function calculateDataWindow(axisModel, dataExtent) {
var dataZoomStart = axisModel.get('dataZoomStart');
var dataZoomEnd = axisModel.get('dataZoomEnd');
var percentExtent = [0, 100];
return [
Math.floor(linearMap(dataZoomStart, percentExtent, dataExtent, true)),
Math.ceil(linearMap(dataZoomEnd, percentExtent, dataExtent, true))
];
}
});
......@@ -16,7 +16,9 @@ define(function(require) {
var names = {
axisIndex: axisDim + 'AxisIndex',
axis: axisDim + 'Axis',
dim: axisDim
dim: axisDim,
index: axisDim + 'Index',
getter: 'get' + axisDim.toUpperCase()
};
callback.call(context, names);
});
......
......@@ -361,6 +361,18 @@ define(function(require) {
}, context);
return ret;
};
List.prototype['getExtent' + capitalized] = function () {
var min = Number.MAX_VALUE;
var max = Number.MIN_VALUE;
this.each(function (item) {
var value = item['get' + capitalized]();
value > max && (max = value);
value < min && (min = value);
});
return [min, max];
};
});
List.fromArray = function (data, seriesModel, ecModel) {
......
......@@ -10,6 +10,7 @@ define(function(require) {
var Model = require('./Model');
var zrUtil = require('zrender/core/util');
var arrayPush = Array.prototype.push;
var unique = require('../util/unique');
var TYPE_DELIMITER = '.';
var IS_CONTAINER = '___EC__COMPONENT__CONTAINER___';
......@@ -70,6 +71,13 @@ define(function(require) {
var SubComponentModel = function (option, parentModel, ecModel, dependentModels) {
this.ecModel = ecModel;
this.dependentModels = dependentModels;
/**
* @type {string}
* @public
* @readOnly
*/
this.uid = unique.getUID('componentModel');
ComponentModel.apply(this, arguments);
};
......
......@@ -4,7 +4,6 @@
define(function (require) {
var zrUtil = require('zrender/core/util');
var unique = require('../util/unique');
/**
* @alias module:echarts/model/Model
......@@ -24,13 +23,6 @@ define(function (require) {
*/
this.option = option;
/**
* @type {string}
* @public
* @readOnly
*/
this.uid = unique.getUID('model');
this.init.apply(this, arguments);
}
......
......@@ -45,10 +45,12 @@
},
xAxis: {
// data: ['类目1', '类目2', '类目3', '类目4', '类目5',]
data: xAxisData
data: xAxisData,
boundaryGap: true
},
yAxis: {
// scale: true
boundaryGap: false
},
series: [
{
......@@ -56,16 +58,16 @@
type: 'line',
data: data1
},
// {
// name: 'line2',
// type: 'line',
// data: data2
// },
// {
// name: 'line3',
// type: 'line',
// data: data3
// }
{
name: 'line2',
type: 'line',
data: data2
},
{
name: 'line3',
type: 'line',
data: data3
}
],
dataZoom: {
show: true
......
<html>
<head>
<meta charset="utf-8">
<script src="esl.js"></script>
<script src="config.js"></script>
</head>
<body>
<style>
html, body, #main {
width: 100%;
height: 100%;
}
</style>
<div id="main"></div>
<script>
require([
'echarts',
'echarts/chart/line',
'echarts/component/legend',
'echarts/component/grid',
'echarts/component/axis',
'echarts/component/dataZoom'
], function (echarts) {
var chart = echarts.init(document.getElementById('main'), null, {
renderer: 'canvas'
});
var xAxisData = [];
var data1 = [];
var data2 = [];
var data3 = [];
for (var i = 0; i < 20; i++) {
xAxisData.push('类目' + i);
data1.push(Math.random() * 5);
data2.push(Math.random());
data3.push(Math.random());
}
chart.setOption({
legend: {
data: ['line', 'line2', 'line3']
},
xAxis: {
// data: ['类目1', '类目2', '类目3', '类目4', '类目5',]
data: xAxisData,
boundaryGap: true
},
yAxis: {
// scale: true
boundaryGap: false
},
series: [
{
name: 'line',
type: 'line',
data: data1
},
{
name: 'line2',
type: 'line',
data: data2
},
{
name: 'line3',
type: 'line',
data: data3
}
],
dataZoom: {
show: true,
orient: 'vertical',
yAxisIndex: [0]
}
});
})
</script>
</body>
</html>
\ No newline at end of file
<html>
<head>
<meta charset="utf-8">
<script src="esl.js"></script>
<script src="config.js"></script>
</head>
<body>
<style>
html, body, #main {
width: 100%;
height: 100%;
}
</style>
<div id="main"></div>
<script>
require([
'echarts',
'echarts/chart/scatter',
'echarts/component/legend',
'echarts/component/grid',
'echarts/component/dataZoom'
], function (echarts) {
var chart = echarts.init(document.getElementById('main'), null, {
renderer: 'canvas'
});
var data1 = [];
var data2 = [];
var data3 = [];
for (var i = 0; i < 100; i++) {
data1.push([Math.random() * 5, Math.random() * 4, Math.random()]);
data2.push([Math.random() * 10, Math.random() * 5, Math.random()]);
data3.push([Math.random() * 15, Math.random() * 10, Math.random()]);
}
chart.setOption({
legend: {
data: ['scatter', 'scatter2', 'scatter3']
},
xAxis: {
type: 'value',
splitLine: {
show: false
}
},
yAxis: {
type: 'value',
splitLine: {
show: false
}
},
dataZoom: [
{
show: true,
orient: 'vertical'
}, {
show: true,
orient: 'horizontal'
}
],
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,
shadowBlur: 10,
shadowOffsetX: 0,
shadowOffsetY: 0,
shadowColor: 'rgba(0, 0, 0, 0.5)'
}
},
symbolSize: function (val) {
return val[2] * 40;
},
data: data2
}, {
name: 'scatter3',
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: data3
}]
});
})
</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.
先完成此消息的编辑!
想要评论请 注册