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

parallel update option definition

上级 4753d29e
......@@ -13,7 +13,7 @@ define(function(require) {
getInitialData: function (option, ecModel) {
var dimensions = ecModel.getComponent(
'parallel', this.get('parallelIndex')
).get('dimensions');
).dimensions;
dimensions = zrUtil.map(dimensions, function (dim) {
return dim.name;
......@@ -59,6 +59,7 @@ define(function(require) {
lineStyle: {
normal: {
width: 2,
opacity: 0.6,
type: 'solid',
shadowColor: 'rgba(0,0,0,0)', //默认透明
shadowBlur: 0,
......
......@@ -8,14 +8,12 @@ define(function (require) {
type: 'parallel',
init: function () {
this._dataGroup = new graphic.Group();
},
render: function (seriesModel, ecModel, api, payload) {
var data = seriesModel.getData();
var oldData = this._data;
var dataGroup = this._dataGroup;
var group = this.group;
var coordSys = seriesModel.coordinateSystem;
var dimensions = coordSys.dimensions;
......@@ -23,13 +21,23 @@ define(function (require) {
return dim.name;
});
var dataGroup = this._dataGroup;
if (!dataGroup) {
this.group.add(
dataGroup = this._dataGroup = new graphic.Group()
);
}
var hasAnimation = ecModel.get('animation');
var isFirstRender = !oldData;
var lineStyleModel = seriesModel.getModel('lineStyle.normal');
var globalColors = ecModel.get('color');
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(
// updateDataSelected, this.uid, seriesModel, hasAnimation, api
......@@ -91,9 +99,9 @@ define(function (require) {
})
.execute();
// Make sure data els is on top of labels
group.remove(dataGroup);
group.add(dataGroup);
// // Make sure data els is on top of labels
// group.remove(dataGroup);
// group.add(dataGroup);
this._updateAll(data, seriesModel);
......@@ -152,7 +160,9 @@ define(function (require) {
// });
},
dispose: function () {}
remove: function () {
this._dataGroup.remove();
}
});
function createEls(dataGroup, values, dimensions, coordSys, lineStyle) {
......
......@@ -20,7 +20,6 @@ define(function (require) {
* @param {number} [opt.lableInterval] Default label interval when label
* interval from model is null or 'auto'.
* @param {number} [opt.isCartesian=false]
* @param {number} [opt.z2=0]
*/
var AxisBuilder = function (axisModel, opt) {
......@@ -39,8 +38,7 @@ define(function (require) {
*/
this.group = new graphic.Group({
position: opt.position.slice(),
rotation: opt.rotation,
z2: opt.z2
rotation: opt.rotation
});
};
......@@ -210,7 +208,7 @@ define(function (require) {
var opt = this.opt;
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 == null) {
name = axisModel.get('name');
......
......@@ -32,6 +32,7 @@ define(function (require) {
}, this);
this.group.add(axisBuilder.getGroup());
this.group.z2 = 100;
}
});
......
......@@ -23,15 +23,27 @@ define(function(require) {
defaultOption: {
type: 'value',
type: 'value', // 'value', 'category', ...
parallelIndex: null
dim: null, // 'dim0', 'dim1', 'dim2', ...
parallelIndex: null,
z: 10
},
/**
* @override
*/
init: function (axisOption, parentModel, ecModel) {
this.mergeOption(axisOption, parentModel, ecModel);
},
/**
* @override
*/
mergeOption: function (axisOption, parentModel, ecModel) {
zrUtil.merge(axisOption, this.getDefaultOption(), false);
mergeDefault(axisOption, ecModel);
},
......
......@@ -37,7 +37,7 @@ define(function(require) {
* @type {Array.<number>}
* @readOnly
*/
this.dimensions = parallelModel.get('dimensions');
this.dimensions = parallelModel.dimensions;
/**
* @type {module:zrender/core/BoundingRect}
......@@ -59,12 +59,11 @@ define(function(require) {
*/
_init: function (parallelModel, ecModel, api) {
var dimensions = parallelModel.get('dimensions');
var axisIndices = parallelModel.get('parallelAxisIndex');
var dimensions = parallelModel.dimensions;
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');
if (ecModel.getComponent('parallel', parallelIndex) !== parallelModel) {
......@@ -73,8 +72,6 @@ define(function(require) {
return;
}
var dim = dimensions[idx];
var axis = this._axesMap[dim.name] = new ParallelAxis(
dim.name,
axisHelper.createScaleByModel(axisModel),
......@@ -104,7 +101,7 @@ define(function(require) {
_updateAxesFromSeries: function (parallelModel, ecModel) {
ecModel.eachSeries(function (seriesModel) {
if (!parallelModel.containsSeries(seriesModel, ecModel)) {
if (!parallelModel.contains(seriesModel, ecModel)) {
return;
}
......@@ -201,7 +198,9 @@ define(function(require) {
this._axesLayout[dim.name] = {
position: position,
rotation: rotation,
transform: transform
transform: transform,
tickDirection: 1,
labelDirection: 1
};
}, this);
},
......
......@@ -5,26 +5,27 @@ define(function(require) {
require('./AxisModel');
var VALID_DIM_TYPES = {value: 1, category: 1};
Component.extend({
type: 'parallel',
dependencies: ['parallelAxis'],
/**
* @type {module:echarts/coord/parallel/Parallel}
*/
coordinateSystem: null,
/**
* Each item like: {name: 'dimX', axisType: 'value', axisIndex: 2}
* @type {Array.<Object>}
* @readOnly
*/
dimensions: null,
defaultOption: {
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, // 一级层叠
z: 0, // 二级层叠
x: 80,
......@@ -36,6 +37,8 @@ define(function(require) {
layout: 'horizontal', // 'horizontal' or 'vertical'
axisDefault: null,
backgroundColor: 'rgba(0,0,0,0)',
borderWidth: 0,
borderColor: '#ccc'
......@@ -58,113 +61,41 @@ define(function(require) {
newOption && zrUtil.merge(thisOption, newOption);
var parallelAxisIndex = thisOption.parallelAxisIndex;
var dimensions = thisOption.dimensions;
dimensions = completeDimensions(dimensions);
parallelAxisIndex = completeParallelAxisIndexByMapping(
parallelAxisIndex, dimensions
);
parallelAxisIndex = completeParallelAxisIndexWhenNone(
parallelAxisIndex, dimensions
);
thisOption.dimensions = dimensions;
thisOption.parallelAxisIndex = parallelAxisIndex;
this._initDimensions();
},
/**
* 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) {
var parallelIndex;
return seriesModel.get('coordinateSystem') === 'parallel'
&& (parallelIndex = seriesModel.get('parallelIndex')) != null
contains: function (model, ecModel) {
var parallelIndex = model.get('parallelIndex');
return parallelIndex != null
&& 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];
// dim might be string, represent dim name.
if (!zrUtil.isObject(dim)) {
dim = dimensions[i] = {name: dim};
}
if (!VALID_DIM_TYPES[dim.axisType]) {
dim.axisType = 'value';
}
}
/**
* @private
*/
_initDimensions: function () {
var dimensions = this.dimensions = [];
return dimensions;
}
function completeParallelAxisIndexByMapping(parallelAxisIndex, dimensions) {
// 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;
}
var axisModels = zrUtil.filter(this.dependentModels.parallelAxis, function (axisModel) {
// Can not use this.contains here, because
// initialization has not been completed yet.
return axisModel.get('parallelIndex') === this.componentIndex;
});
// Complete others.
zrUtil.each(parallelAxisIndex, function (axisIndex, idx) {
if (axisIndex == null) {
parallelAxisIndex[idx] = otherAxisIndex;
}
zrUtil.each(axisModels, function (axisModel) {
dimensions.push({
name: axisModel.get('dim'),
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) {
function (option, parentModel, ecModel, dependentModels, index) {
this.ecModel = ecModel;
this.dependentModels = dependentModels;
this.componentIndex = index;
// FIXME
// 如果name重复,要进行提示。
......
define(function (require) {
var zrUtil = require('zrender/core/util');
// 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]
// ]
// }
// ]
var modelUtil = require('../util/model');
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) {
return;
}
......@@ -58,5 +28,27 @@ define(function (require) {
if (hasParallelSeries) {
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 @@
}
};
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({
color: [
'#dd4444', '#fec42c', '#80F1BE'
......@@ -106,12 +65,6 @@
fontSize: 20
}
},
grid: {
x: '10%',
x2: 200,
y: '15%',
y2: '10%'
},
tooltip: {
padding: 10,
backgroundColor: '#222',
......@@ -131,10 +84,45 @@
+ 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: {
dimensions: dimensions,
parallelAxisIndex: parallelAxisIndex
axisDefault: {
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: [
{
......
Markdown is supported
0% .
You are about to add 0 people to the discussion. Proceed with caution.
先完成此消息的编辑!
想要评论请 注册