From 77190e97c6961a06a66962ffd2a561c50bc079f7 Mon Sep 17 00:00:00 2001 From: pah100 Date: Thu, 19 Nov 2015 16:22:09 +0800 Subject: [PATCH] parallel update option definition --- src/chart/parallel/ParallelSeries.js | 3 +- src/chart/parallel/ParallelView.js | 24 +++-- src/component/axis/AxisBuilder.js | 6 +- src/component/axis/ParallelAxisView.js | 1 + src/coord/parallel/AxisModel.js | 18 +++- src/coord/parallel/Parallel.js | 17 ++- src/coord/parallel/ParallelModel.js | 139 +++++++------------------ src/model/Component.js | 1 + src/preprocessor/parallel.js | 72 ++++++------- test/parallel-aqi.html | 88 +++++++--------- 10 files changed, 151 insertions(+), 218 deletions(-) diff --git a/src/chart/parallel/ParallelSeries.js b/src/chart/parallel/ParallelSeries.js index 0170dd622..6b775a89f 100644 --- a/src/chart/parallel/ParallelSeries.js +++ b/src/chart/parallel/ParallelSeries.js @@ -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, diff --git a/src/chart/parallel/ParallelView.js b/src/chart/parallel/ParallelView.js index 6ec1cbed1..aa6b70ca7 100644 --- a/src/chart/parallel/ParallelView.js +++ b/src/chart/parallel/ParallelView.js @@ -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) { diff --git a/src/component/axis/AxisBuilder.js b/src/component/axis/AxisBuilder.js index a24e92ca7..7c4980bb1 100644 --- a/src/component/axis/AxisBuilder.js +++ b/src/component/axis/AxisBuilder.js @@ -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'); diff --git a/src/component/axis/ParallelAxisView.js b/src/component/axis/ParallelAxisView.js index 3767fc138..8b736d361 100644 --- a/src/component/axis/ParallelAxisView.js +++ b/src/component/axis/ParallelAxisView.js @@ -32,6 +32,7 @@ define(function (require) { }, this); this.group.add(axisBuilder.getGroup()); + this.group.z2 = 100; } }); diff --git a/src/coord/parallel/AxisModel.js b/src/coord/parallel/AxisModel.js index 83bdaa042..0338e1669 100644 --- a/src/coord/parallel/AxisModel.js +++ b/src/coord/parallel/AxisModel.js @@ -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); }, diff --git a/src/coord/parallel/Parallel.js b/src/coord/parallel/Parallel.js index 777dfc075..04b09dc58 100644 --- a/src/coord/parallel/Parallel.js +++ b/src/coord/parallel/Parallel.js @@ -37,7 +37,7 @@ define(function(require) { * @type {Array.} * @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); }, diff --git a/src/coord/parallel/ParallelModel.js b/src/coord/parallel/ParallelModel.js index 8e0441664..85737b057 100644 --- a/src/coord/parallel/ParallelModel.js +++ b/src/coord/parallel/ParallelModel.js @@ -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.} + * @readOnly + */ + dimensions: null, + defaultOption: { show: false, - dimensions: 5, // {number} 表示 dim数，如设为 3 会自动转化成 ['dim0', 'dim1', 'dim2'] - // {Array.} 表示哪些dim，如 ['dim3', 'dim2'] - // {Array.} 表示哪些dim，如 [{name: 'dim3', axisType: 'category', ...] - parallelAxisIndex: null, // {Array.} 表示引用哪些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 diff --git a/src/model/Component.js b/src/model/Component.js index c8c09f145..9df946858 100644 --- a/src/model/Component.js +++ b/src/model/Component.js @@ -101,6 +101,7 @@ define(function(require) { function (option, parentModel, ecModel, dependentModels, index) { this.ecModel = ecModel; this.dependentModels = dependentModels; + this.componentIndex = index; // FIXME // 如果name重复，要进行提示。 diff --git a/src/preprocessor/parallel.js b/src/preprocessor/parallel.js index 506d2014c..028c321c7 100644 --- a/src/preprocessor/parallel.js +++ b/src/preprocessor/parallel.js @@ -1,48 +1,18 @@ 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 diff --git a/test/parallel-aqi.html b/test/parallel-aqi.html index a16cab81a..1a6d5067b 100644 --- a/test/parallel-aqi.html +++ b/test/parallel-aqi.html @@ -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] + '
'; } }, - 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: [ { -- GitLab