Skip to content

I
incubator-echarts

半栈学徒 / incubator-echarts
与 Fork 源项目一致

从无法访问的项目Fork

通知 5
Star 0
Fork 0
I
incubator-echarts

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

提交 340794c3 编写于 作者: P pah100
浏览文件
操作

Fix #2710 (dataZoom location params merge error when using media query)

上级 605ea10b
隐藏空白更改
内联 并排
Showing with 135 addition and 128 deletion
src/component/dataZoom/DataZoomModel.js
浏览文件 @ 340794c3
......@@ -8,7 +8,6 @@ define(function(require) {
var echarts = require('../../echarts');
var modelUtil = require('../../util/model');
var AxisProxy = require('./AxisProxy');
var layout = require('../../util/layout');
var each = zrUtil.each;
var eachAxisDim = modelUtil.eachAxisDim;
......@@ -350,13 +349,6 @@ define(function(require) {
}, this);
},
/**
* @public
*/
setLayoutParams: function (params) {
layout.copyLayoutParams(this.option, params);
},
/**
* @public
* @return {Array.<number>} [startPercent, endPercent]
......
src/component/dataZoom/SliderZoomModel.js
浏览文件 @ 340794c3
......@@ -5,15 +5,13 @@ define(function(require) {
var DataZoomModel = require('./DataZoomModel');
var layout = require('../../util/layout');
var zrUtil = require('zrender/core/util');
var SliderZoomModel = DataZoomModel.extend({
type: 'dataZoom.slider',
/**
* @readOnly
*/
inputPositionParams: null,
layoutMode: 'box',
/**
* @protected
......@@ -21,12 +19,14 @@ define(function(require) {
defaultOption: {
show: true,
// ph => placeholder. Using placehoder here because
// deault value can only be drived in view stage.
right: 'ph', // Default align to grid rect.
top: 'ph', // Default align to grid rect.
width: 'ph', // Default align to grid rect.
height: 'ph', // Default align to grid rect.
left: null, // Default align to grid rect.
right: null, // Default align to grid rect.
top: null, // Default align to grid rect.
bottom: null, // Default align to grid rect.
width: null, // Default align to grid rect.
height: null, // Default align to grid rect.
backgroundColor: 'rgba(47,69,84,0)', // Background of slider zoom component.
dataBackgroundColor: '#ddd', // Background of data shadow.
......@@ -46,18 +46,21 @@ define(function(require) {
},
/**
* @override
* @public
*/
init: function (option) {
this.inputPositionParams = layout.getLayoutParams(option);
SliderZoomModel.superApply(this, 'init', arguments);
setDefaultLayoutParams: function (params) {
var option = this.option;
zrUtil.each(['right', 'top', 'width', 'height'], function (name) {
if (option[name] === 'ph') {
option[name] = params[name];
};
});
},
/**
* @override
*/
mergeOption: function (option) {
this.inputPositionParams = layout.getLayoutParams(option);
SliderZoomModel.superApply(this, 'mergeOption', arguments);
}
......
src/component/dataZoom/SliderZoomView.js
浏览文件 @ 340794c3
......@@ -166,7 +166,9 @@ define(function (require) {
// Default align by coordinate system rect.
var positionInfo = this._orient === HORIZONTAL
? {
left: coordRect.x,
// Why using 'right', because right should be used in vertical,
// and it is better to be consistent for dealing with position param merge.
right: ecSize.width - coordRect.x - coordRect.width,
top: (ecSize.height - DEFAULT_FILLER_SIZE - DEFAULT_LOCATION_EDGE_GAP),
width: coordRect.width,
height: DEFAULT_FILLER_SIZE
......@@ -178,14 +180,13 @@ define(function (require) {
height: coordRect.height
};
layout.mergeLayoutParam(positionInfo, dataZoomModel.inputPositionParams);
// Write back to option for chart.getOption(). (and may then
// chart.setOption() again, where current location value is needed);
dataZoomModel.setLayoutParams(positionInfo);
// dataZoomModel.setLayoutParams(positionInfo);
dataZoomModel.setDefaultLayoutParams(positionInfo);
var layoutRect = layout.getLayoutRect(
positionInfo,
dataZoomModel.option,
ecSize,
dataZoomModel.padding
);
......
test/dataZoom-axis-type.html
浏览文件 @ 340794c3
......@@ -201,10 +201,23 @@ chart.setOption({
+ '<td>endValue:</td><td>' + encodeHTML(rawOpt.endValue) + '</td>'
+ '</tr>';
});
var axisOpt = zrUtil.map(resultOpt.xAxis, function (rawOpt) {
return ''
+ '<tr>'
+ '<td>min:</td><td>' + encodeHTML(rawOpt.min) + '</td>'
+ '<td>max:</td><td>' + encodeHTML(rawOpt.max) + '</td>'
+ '<td>scale:</td><td>' + encodeHTML(rawOpt.scale) + '</td>'
+ '<td>rangeStart:</td><td>' + encodeHTML(rawOpt.rangeStart) + '</td>'
+ '<td>rangeEnd:</td><td>' + encodeHTML(rawOpt.rangeEnd) + '</td>'
+ '</tr>';
});
el.lastChild.innerHTML = ''
+ (isInit ? 'ON_INIT: ' : 'ON_EVENT: ') + '<br>'
+ '<table><tbody>' + dataZoomOpt.join('') + '</tbody></table>';
+ '<table><tbody>'
+ dataZoomOpt.join('')
+ axisOpt.join('')
+ '</tbody></table>';
}
function encodeHTML(source) {
......
test/getOption.html
浏览文件 @ 340794c3
......@@ -9,11 +9,17 @@
<body>
<style>
</style>
<div>
<input type="button" value="exchangeXY" onclick="go.exchangeXY();">
<input type="button" value="illegal use getModel.option" onclick="go.illegal();">
<input type="button" value="dataZoom restore (error if view changed)" onclick="go.dataZoomRestore();">
</div>
<div id="main"></div>
<script>
var chart;
var myChart;
var go;
require([
'echarts',
......@@ -34,108 +40,100 @@
renderer: 'canvas'
});
// -------------------------------------------------------------------
// -------------------------------------------------------------------
// -------------------------------------------------------------------
option = {
toolbox: {
feature: {
dataZoom: {}
}
},
dataZoom: [{
show: true
}, {
type: 'inside',
}],
legend: {
data:['邮件营销','联盟广告','视频广告','直接访问','搜索引擎']
},
xAxis : [
{
type : 'category',
boundaryGap : false,
data : ['周一','周二','周三','周四','周五','周六','周日']
}
],
yAxis : [
{
type : 'value'
}
],
series : [
{
name:'邮件营销',
type:'line',
stack: '总量',
data:[120, 132, 101, 134, 90, 230, 210]
},
{
name:'联盟广告',
type:'line',
stack: '总量',
data:[220, 182, 191, 234, 290, 330, 310]
},
{
name:'视频广告',
type:'line',
stack: '总量',
data:[150, 232, 201, 154, 190, 330, 410]
},
{
name:'直接访问',
type:'line',
stack: '总量',
data:[320, 332, 301, 334, 390, 330, 320]
},
{
name:'搜索引擎',
type:'line',
stack: '总量',
data:[820, 932, 901, 934, 1290, 1330, 1320]
}
]
};
setTimeout(function () {
resetOption();
setTimeout(function () {
try {
resetOptionIllegally();
alert('error');
}
catch (e) {
console.log('ok');
}
}, 2000);
}, 3000);
function resetOption() {
var option = myChart.getOption();
var temp;
temp = option.xAxis;
option.xAxis = option.yAxis;
option.yAxis = temp;
myChart.setOption(option);
}
function resetOptionIllegally() {
var option = myChart.getModel.option;
var temp;
temp = option.xAxis;
option.xAxis = option.yAxis;
option.yAxis = temp;
myChart.setOption(option);
}
// -------------------------------------------------------------------
// -------------------------------------------------------------------
// -------------------------------------------------------------------
option = {
toolbox: {
feature: {
dataZoom: {}
}
},
dataZoom: [{
show: true,
end: 80
}, {
type: 'inside',
end: 80
}],
legend: {
data:['邮件营销','联盟广告','视频广告','直接访问','搜索引擎']
},
xAxis : [
{
type : 'category',
boundaryGap : false,
data : ['周一','周二','周三','周四','周五','周六','周日']
}
],
yAxis : [
{
type : 'value'
}
],
series : [
{
name:'邮件营销',
type:'line',
stack: '总量',
data:[120, 132, 101, 134, 90, 230, 210]
},
{
name:'联盟广告',
type:'line',
stack: '总量',
data:[220, 182, 191, 234, 290, 330, 310]
},
{
name:'视频广告',
type:'line',
stack: '总量',
data:[150, 232, 201, 154, 190, 330, 410]
},
{
name:'直接访问',
type:'line',
stack: '总量',
data:[320, 332, 301, 334, 390, 330, 320]
},
{
name:'搜索引擎',
type:'line',
stack: '总量',
data:[820, 932, 901, 934, 1290, 1330, 1320]
}
]
};
go = {
exchangeXY: function () {
var option = myChart.getOption();
var temp;
temp = option.xAxis;
option.xAxis = option.yAxis;
option.yAxis = temp;
myChart.setOption(option);
},
illegal: function () {
try {
var option = myChart.getModel.option;
var temp;
temp = option.xAxis;
option.xAxis = option.yAxis;
option.yAxis = temp;
myChart.setOption(option);
alert('error');
}
catch (e) {
alert('ok');
}
},
dataZoomRestore: function () {
var option = myChart.getOption();
myChart.setOption(option);
}
};
......
Markdown is supported
0% 或 .
You are about to add 0 people to the discussion. Proceed with caution.
先完成此消息的编辑！
想要评论请 注册 或