提交 77190e97 编写于 作者: P pah100

parallel update option definition

上级 4753d29e
...@@ -13,7 +13,7 @@ define(function(require) { ...@@ -13,7 +13,7 @@ define(function(require) {
getInitialData: function (option, ecModel) { getInitialData: function (option, ecModel) {
var dimensions = ecModel.getComponent( var dimensions = ecModel.getComponent(
'parallel', this.get('parallelIndex') 'parallel', this.get('parallelIndex')
).get('dimensions'); ).dimensions;
dimensions = zrUtil.map(dimensions, function (dim) { dimensions = zrUtil.map(dimensions, function (dim) {
return dim.name; return dim.name;
...@@ -59,6 +59,7 @@ define(function(require) { ...@@ -59,6 +59,7 @@ define(function(require) {
lineStyle: { lineStyle: {
normal: { normal: {
width: 2, width: 2,
opacity: 0.6,
type: 'solid', type: 'solid',
shadowColor: 'rgba(0,0,0,0)', //默认透明 shadowColor: 'rgba(0,0,0,0)', //默认透明
shadowBlur: 0, shadowBlur: 0,
......
...@@ -8,14 +8,12 @@ define(function (require) { ...@@ -8,14 +8,12 @@ define(function (require) {
type: 'parallel', type: 'parallel',
init: function () { init: function () {
this._dataGroup = new graphic.Group();
}, },
render: function (seriesModel, ecModel, api, payload) { render: function (seriesModel, ecModel, api, payload) {
var data = seriesModel.getData(); var data = seriesModel.getData();
var oldData = this._data; var oldData = this._data;
var dataGroup = this._dataGroup;
var group = this.group; var group = this.group;
var coordSys = seriesModel.coordinateSystem; var coordSys = seriesModel.coordinateSystem;
var dimensions = coordSys.dimensions; var dimensions = coordSys.dimensions;
...@@ -23,13 +21,23 @@ define(function (require) { ...@@ -23,13 +21,23 @@ define(function (require) {
return dim.name; return dim.name;
}); });
var dataGroup = this._dataGroup;
if (!dataGroup) {
this.group.add(
dataGroup = this._dataGroup = new graphic.Group()
);
}
var hasAnimation = ecModel.get('animation'); var hasAnimation = ecModel.get('animation');
var isFirstRender = !oldData; var isFirstRender = !oldData;
var lineStyleModel = seriesModel.getModel('lineStyle.normal'); var lineStyleModel = seriesModel.getModel('lineStyle.normal');
var globalColors = ecModel.get('color'); var globalColors = ecModel.get('color');
var defaultColor = globalColors[seriesModel.seriesIndex % globalColors.length]; var defaultColor = globalColors[seriesModel.seriesIndex % globalColors.length];
var lineStyle = zrUtil.defaults(lineStyleModel.getLineStyle(), {stroke: defaultColor}); var lineStyle = zrUtil.defaults(
lineStyleModel.getLineStyle(),
{stroke: defaultColor}
);
// var onSectorClick = zrUtil.curry( // var onSectorClick = zrUtil.curry(
// updateDataSelected, this.uid, seriesModel, hasAnimation, api // updateDataSelected, this.uid, seriesModel, hasAnimation, api
...@@ -91,9 +99,9 @@ define(function (require) { ...@@ -91,9 +99,9 @@ define(function (require) {
}) })
.execute(); .execute();
// Make sure data els is on top of labels // // Make sure data els is on top of labels
group.remove(dataGroup); // group.remove(dataGroup);
group.add(dataGroup); // group.add(dataGroup);
this._updateAll(data, seriesModel); this._updateAll(data, seriesModel);
...@@ -152,7 +160,9 @@ define(function (require) { ...@@ -152,7 +160,9 @@ define(function (require) {
// }); // });
}, },
dispose: function () {} remove: function () {
this._dataGroup.remove();
}
}); });
function createEls(dataGroup, values, dimensions, coordSys, lineStyle) { function createEls(dataGroup, values, dimensions, coordSys, lineStyle) {
......
...@@ -20,7 +20,6 @@ define(function (require) { ...@@ -20,7 +20,6 @@ define(function (require) {
* @param {number} [opt.lableInterval] Default label interval when label * @param {number} [opt.lableInterval] Default label interval when label
* interval from model is null or 'auto'. * interval from model is null or 'auto'.
* @param {number} [opt.isCartesian=false] * @param {number} [opt.isCartesian=false]
* @param {number} [opt.z2=0]
*/ */
var AxisBuilder = function (axisModel, opt) { var AxisBuilder = function (axisModel, opt) {
...@@ -39,8 +38,7 @@ define(function (require) { ...@@ -39,8 +38,7 @@ define(function (require) {
*/ */
this.group = new graphic.Group({ this.group = new graphic.Group({
position: opt.position.slice(), position: opt.position.slice(),
rotation: opt.rotation, rotation: opt.rotation
z2: opt.z2
}); });
}; };
...@@ -210,7 +208,7 @@ define(function (require) { ...@@ -210,7 +208,7 @@ define(function (require) {
var opt = this.opt; var opt = this.opt;
var axisModel = this.axisModel; var axisModel = this.axisModel;
var name = this.opt.name; var name = this.opt.axisName;
// If name is '', do not get name from axisMode. // If name is '', do not get name from axisMode.
if (name == null) { if (name == null) {
name = axisModel.get('name'); name = axisModel.get('name');
......
...@@ -32,6 +32,7 @@ define(function (require) { ...@@ -32,6 +32,7 @@ define(function (require) {
}, this); }, this);
this.group.add(axisBuilder.getGroup()); this.group.add(axisBuilder.getGroup());
this.group.z2 = 100;
} }
}); });
......
...@@ -23,15 +23,27 @@ define(function(require) { ...@@ -23,15 +23,27 @@ define(function(require) {
defaultOption: { defaultOption: {
type: 'value', type: 'value', // 'value', 'category', ...
parallelIndex: null dim: null, // 'dim0', 'dim1', 'dim2', ...
parallelIndex: null,
z: 10
}, },
/**
* @override
*/
init: function (axisOption, parentModel, ecModel) { init: function (axisOption, parentModel, ecModel) {
this.mergeOption(axisOption, parentModel, ecModel);
},
/**
* @override
*/
mergeOption: function (axisOption, parentModel, ecModel) {
zrUtil.merge(axisOption, this.getDefaultOption(), false); zrUtil.merge(axisOption, this.getDefaultOption(), false);
mergeDefault(axisOption, ecModel); mergeDefault(axisOption, ecModel);
}, },
......
...@@ -37,7 +37,7 @@ define(function(require) { ...@@ -37,7 +37,7 @@ define(function(require) {
* @type {Array.<number>} * @type {Array.<number>}
* @readOnly * @readOnly
*/ */
this.dimensions = parallelModel.get('dimensions'); this.dimensions = parallelModel.dimensions;
/** /**
* @type {module:zrender/core/BoundingRect} * @type {module:zrender/core/BoundingRect}
...@@ -59,12 +59,11 @@ define(function(require) { ...@@ -59,12 +59,11 @@ define(function(require) {
*/ */
_init: function (parallelModel, ecModel, api) { _init: function (parallelModel, ecModel, api) {
var dimensions = parallelModel.get('dimensions'); var dimensions = parallelModel.dimensions;
var axisIndices = parallelModel.get('parallelAxisIndex');
each(axisIndices, function (axisIndex, idx) { each(dimensions, function (dim) {
var axisModel = ecModel.getComponent('parallelAxis', axisIndex); var axisModel = ecModel.getComponent('parallelAxis', dim.axisIndex);
var parallelIndex = axisModel.get('parallelIndex'); var parallelIndex = axisModel.get('parallelIndex');
if (ecModel.getComponent('parallel', parallelIndex) !== parallelModel) { if (ecModel.getComponent('parallel', parallelIndex) !== parallelModel) {
...@@ -73,8 +72,6 @@ define(function(require) { ...@@ -73,8 +72,6 @@ define(function(require) {
return; return;
} }
var dim = dimensions[idx];
var axis = this._axesMap[dim.name] = new ParallelAxis( var axis = this._axesMap[dim.name] = new ParallelAxis(
dim.name, dim.name,
axisHelper.createScaleByModel(axisModel), axisHelper.createScaleByModel(axisModel),
...@@ -104,7 +101,7 @@ define(function(require) { ...@@ -104,7 +101,7 @@ define(function(require) {
_updateAxesFromSeries: function (parallelModel, ecModel) { _updateAxesFromSeries: function (parallelModel, ecModel) {
ecModel.eachSeries(function (seriesModel) { ecModel.eachSeries(function (seriesModel) {
if (!parallelModel.containsSeries(seriesModel, ecModel)) { if (!parallelModel.contains(seriesModel, ecModel)) {
return; return;
} }
...@@ -201,7 +198,9 @@ define(function(require) { ...@@ -201,7 +198,9 @@ define(function(require) {
this._axesLayout[dim.name] = { this._axesLayout[dim.name] = {
position: position, position: position,
rotation: rotation, rotation: rotation,
transform: transform transform: transform,
tickDirection: 1,
labelDirection: 1
}; };
}, this); }, this);
}, },
......
...@@ -5,26 +5,27 @@ define(function(require) { ...@@ -5,26 +5,27 @@ define(function(require) {
require('./AxisModel'); require('./AxisModel');
var VALID_DIM_TYPES = {value: 1, category: 1};
Component.extend({ Component.extend({
type: 'parallel', type: 'parallel',
dependencies: ['parallelAxis'],
/** /**
* @type {module:echarts/coord/parallel/Parallel} * @type {module:echarts/coord/parallel/Parallel}
*/ */
coordinateSystem: null, coordinateSystem: null,
/**
* Each item like: {name: 'dimX', axisType: 'value', axisIndex: 2}
* @type {Array.<Object>}
* @readOnly
*/
dimensions: null,
defaultOption: { defaultOption: {
show: false, show: false,
dimensions: 5, // {number} 表示 dim数,如设为 3 会自动转化成 ['dim0', 'dim1', 'dim2']
// {Array.<string>} 表示哪些dim,如 ['dim3', 'dim2']
// {Array.<Object>} 表示哪些dim,如 [{name: 'dim3', axisType: 'category', ...]
parallelAxisIndex: null, // {Array.<number>} 表示引用哪些axis,如 [2, 1, 4]
// {Object} 表示 mapping,如{dim1: 3, dim3: 1, others: 0},others不设则自动取0
zlevel: 0, // 一级层叠 zlevel: 0, // 一级层叠
z: 0, // 二级层叠 z: 0, // 二级层叠
x: 80, x: 80,
...@@ -36,6 +37,8 @@ define(function(require) { ...@@ -36,6 +37,8 @@ define(function(require) {
layout: 'horizontal', // 'horizontal' or 'vertical' layout: 'horizontal', // 'horizontal' or 'vertical'
axisDefault: null,
backgroundColor: 'rgba(0,0,0,0)', backgroundColor: 'rgba(0,0,0,0)',
borderWidth: 0, borderWidth: 0,
borderColor: '#ccc' borderColor: '#ccc'
...@@ -58,113 +61,41 @@ define(function(require) { ...@@ -58,113 +61,41 @@ define(function(require) {
newOption && zrUtil.merge(thisOption, newOption); newOption && zrUtil.merge(thisOption, newOption);
var parallelAxisIndex = thisOption.parallelAxisIndex; this._initDimensions();
var dimensions = thisOption.dimensions;
dimensions = completeDimensions(dimensions);
parallelAxisIndex = completeParallelAxisIndexByMapping(
parallelAxisIndex, dimensions
);
parallelAxisIndex = completeParallelAxisIndexWhenNone(
parallelAxisIndex, dimensions
);
thisOption.dimensions = dimensions;
thisOption.parallelAxisIndex = parallelAxisIndex;
}, },
/** /**
* Whether series is in this coordinate system. * Whether series or axis is in this coordinate system.
* @param {module:echarts/model/Series|module:echarts/coord/parallel/AxisModel} model
* @param {module:echarts/model/Global} ecModel
*/ */
containsSeries: function (seriesModel, ecModel) { contains: function (model, ecModel) {
var parallelIndex; var parallelIndex = model.get('parallelIndex');
return seriesModel.get('coordinateSystem') === 'parallel' return parallelIndex != null
&& (parallelIndex = seriesModel.get('parallelIndex')) != null
&& ecModel.getComponent('parallel', parallelIndex) === this; && ecModel.getComponent('parallel', parallelIndex) === this;
} },
});
function completeDimensions(dimensions) {
// If dimensions is not array, represents dimension count.
// Generate dimensions by dimension count.
if (!zrUtil.isArray(dimensions)) {
var count = dimensions;
dimensions = [];
for (var i = 0; i < count; i++) {
dimensions.push('dim' + i);
}
}
for (var i = 0; i < dimensions.length; i++) { /**
var dim = dimensions[i]; * @private
// dim might be string, represent dim name. */
if (!zrUtil.isObject(dim)) { _initDimensions: function () {
dim = dimensions[i] = {name: dim}; var dimensions = this.dimensions = [];
}
if (!VALID_DIM_TYPES[dim.axisType]) {
dim.axisType = 'value';
}
}
return dimensions; var axisModels = zrUtil.filter(this.dependentModels.parallelAxis, function (axisModel) {
} // Can not use this.contains here, because
// initialization has not been completed yet.
function completeParallelAxisIndexByMapping(parallelAxisIndex, dimensions) { return axisModel.get('parallelIndex') === this.componentIndex;
// If parallelAxisIndex is {}, represents mapping.
// like: {dim1: 3, dim3: 1, others: 0}
// Generate parallelAxisIndex by mapping.
if (zrUtil.isObject(parallelAxisIndex)
&& !zrUtil.isArray(parallelAxisIndex)
) {
var mapping = parallelAxisIndex;
parallelAxisIndex = [];
var otherAxisIndex = 0; // Others default 0.
zrUtil.each(mapping, function (axisIndex, dim) {
var dimIndex = getDimIndex(dimensions, dim);
if (dimIndex >= 0) {
parallelAxisIndex[dimIndex] = dim;
}
else if (dim === 'others') {
otherAxisIndex = axisIndex;
}
}); });
// Complete others. zrUtil.each(axisModels, function (axisModel) {
zrUtil.each(parallelAxisIndex, function (axisIndex, idx) { dimensions.push({
if (axisIndex == null) { name: axisModel.get('dim'),
parallelAxisIndex[idx] = otherAxisIndex; axisType: axisModel.get('type'),
} axisIndex: axisModel.componentIndex
});
}); });
} }
return parallelAxisIndex; });
}
function getDimIndex(dimensions, dimName) {
for (var i = 0; i < dimensions.length; i++) {
if (dimensions[i] === dimName) {
return i;
}
}
return -1;
}
function completeParallelAxisIndexWhenNone(parallelAxisIndex, dimensions) {
if (!zrUtil.isObject(parallelAxisIndex)
|| !zrUtil.isArray(parallelAxisIndex)
) {
parallelAxisIndex = [];
}
if (parallelAxisIndex.length !== dimensions.length) {
// TODO
}
return parallelAxisIndex;
}
}); });
\ No newline at end of file
...@@ -101,6 +101,7 @@ define(function(require) { ...@@ -101,6 +101,7 @@ define(function(require) {
function (option, parentModel, ecModel, dependentModels, index) { function (option, parentModel, ecModel, dependentModels, index) {
this.ecModel = ecModel; this.ecModel = ecModel;
this.dependentModels = dependentModels; this.dependentModels = dependentModels;
this.componentIndex = index;
// FIXME // FIXME
// 如果name重复,要进行提示。 // 如果name重复,要进行提示。
......
define(function (require) { define(function (require) {
var zrUtil = require('zrender/core/util'); var zrUtil = require('zrender/core/util');
var modelUtil = require('../util/model');
// TODO
//
// parallelAxis: [ // 根据dim需求自动补全 parallelAxis,自动赋值已有axisoption。
// // 找出所有引用axis的 parallel option,来决定如何补全。
// // 但是这步在这里做比较难,在后面做比较麻烦。
// {
// axisLine: [],
// axisLabel: []
// parallelIndex: 0 // ??? 是axis引用到coord,还是coord引用到axis?
// }
// ],
// parallel: [ // 如果没有写parallel则自动创建。FIXME 是不是应该强制用户写,自动创建埋bug?
// {
// dimensions: 3 // number表示 count, 根据dimensionCount创建 []。
// ['dim1', 'dim3', {name: 'dim0', type: 'category'}], // FIXME 某列是category怎么指定?
// // 默认dim type 是value。
//
// parallelAxisIndex: [3, 1], // TODO 如果不设置则根据parallelAxisMap创建此项,
// // 如果没有parallelAxisMap则顺序引用。
// // TODO 如果设置了 parallelAxisIndex 则此项无效。
// { // 根据parallelAxisMap创建 []
// dim1: 3
// dim3: 1
// others: 0 // 不配other也取parallelAxis[0]。
// }
// }
// ],
// series: [
// {
// parallelIndex: 0, // 缺省则0。series引用到axis,还是引用到coord?
// data: [
// [22, 23, 34, 6, 19],
// [22, 23, 34, 6, 19]
// ]
// }
// ]
return function (option) { return function (option) {
createParallelIfNeeded(option);
mergeAxisOptionFromParallel(option);
};
// Create a parallel coordinate if not exists. /**
* Create a parallel coordinate if not exists.
* @inner
*/
function createParallelIfNeeded(option) {
if (option.parallel) { if (option.parallel) {
return; return;
} }
...@@ -58,5 +28,27 @@ define(function (require) { ...@@ -58,5 +28,27 @@ define(function (require) {
if (hasParallelSeries) { if (hasParallelSeries) {
option.parallel = [{}]; option.parallel = [{}];
} }
}; }
/**
* Merge aixs definition from parallel option (if exists) to axis option.
* @inner
*/
function mergeAxisOptionFromParallel(option) {
var axes = modelUtil.normalizeToArray(option.parallelAxis);
zrUtil.each(axes, function (axisOption) {
if (!zrUtil.isObject(axisOption)) {
return;
}
var parallelIndex = axisOption.parallelIndex || 0;
var parallelOption = modelUtil.normalizeToArray(option.parallel)[parallelIndex];
if (parallelOption && parallelOption.axisDefault) {
zrUtil.merge(axisOption, parallelOption.axisDefault, false);
}
});
}
}); });
\ No newline at end of file
...@@ -53,47 +53,6 @@ ...@@ -53,47 +53,6 @@
} }
}; };
var baseAxis = {
type: 'value',
name: 'AQI指数',
nameLocation: 'end',
nameGap: 20,
nameTextStyle: {
color: '#fff',
fontSize: 20
},
axisLine: {
lineStyle: {
color: '#fff'
}
},
axisTick: {
lineStyle: {
color: '#777'
}
},
splitLine: {
show: false
},
axisLabel: {
textStyle: {
color: '#fff'
}
}
};
var dimensionCount = 8;
var dimensions = [];
var parallelAxis = [];
var parallelAxisIndex = [];
for (var i = 0; i < dimensionCount; i++) {
dimensions.push('dim' + i);
var axis = zrUtil.clone(baseAxis, true);
axis.name = '指标' + i;
parallelAxis.push(axis);
parallelAxisIndex.push(i);
}
chart.setOption({ chart.setOption({
color: [ color: [
'#dd4444', '#fec42c', '#80F1BE' '#dd4444', '#fec42c', '#80F1BE'
...@@ -106,12 +65,6 @@ ...@@ -106,12 +65,6 @@
fontSize: 20 fontSize: 20
} }
}, },
grid: {
x: '10%',
x2: 200,
y: '15%',
y2: '10%'
},
tooltip: { tooltip: {
padding: 10, padding: 10,
backgroundColor: '#222', backgroundColor: '#222',
...@@ -131,10 +84,45 @@ ...@@ -131,10 +84,45 @@
+ schema[6].text + '' + value[6] + '<br>'; + schema[6].text + '' + value[6] + '<br>';
} }
}, },
parallelAxis: parallelAxis, parallelAxis: [
{dim: 'dim1', name: '指标1'},
{dim: 'dim2', name: '指标2'},
{dim: 'dim3', name: '指标3'},
{dim: 'dim4', name: '指标4'},
{dim: 'dim5', name: '指标5'},
{dim: 'dim6', name: '指标6'},
{dim: 'dim7', name: '指标7'},
{dim: 'dim8', name: '指标8'}
],
parallel: { parallel: {
dimensions: dimensions, axisDefault: {
parallelAxisIndex: parallelAxisIndex type: 'value',
name: 'AQI指数',
nameLocation: 'end',
nameGap: 20,
nameTextStyle: {
color: '#fff',
fontSize: 20
},
axisLine: {
lineStyle: {
color: '#aaa'
}
},
axisTick: {
lineStyle: {
color: '#777'
}
},
splitLine: {
show: false
},
axisLabel: {
textStyle: {
color: '#fff'
}
}
}
}, },
series: [ series: [
{ {
......
Markdown is supported
0% .
You are about to add 0 people to the discussion. Proceed with caution.
先完成此消息的编辑!
想要评论请 注册