From 76922b98ecda9e56b771dbbffdc373fa3e7d72b0 Mon Sep 17 00:00:00 2001 From: lang Date: Thu, 2 Jun 2016 16:18:55 +0800 Subject: [PATCH] Color palette enhancement --- src/echarts.js | 4 ++++ src/model/Global.js | 2 ++ src/model/Series.js | 12 ++++++++++++ src/model/mixin/colorPalette.js | 29 +++++++++++++++++++++++++++++ src/visual/dataColor.js | 24 ++++++++++++++---------- src/visual/seriesColor.js | 7 +++---- 6 files changed, 64 insertions(+), 14 deletions(-) create mode 100644 src/model/mixin/colorPalette.js diff --git a/src/echarts.js b/src/echarts.js index b451b7fa1..53e6281f8 100644 --- a/src/echarts.js +++ b/src/echarts.js @@ -783,6 +783,10 @@ define(function (require) { * @private */ function doVisualCoding(ecModel, payload) { + ecModel.clearColorPalette(); + ecModel.eachSeries(function (seriesModel) { + seriesModel.clearColorPalette(); + }); each(VISUAL_CODING_STAGES, function (stage) { each(visualCodingFuncs[stage] || [], function (visualCoding) { visualCoding(ecModel, payload); diff --git a/src/model/Global.js b/src/model/Global.js index 53eabab13..81476f024 100644 --- a/src/model/Global.js +++ b/src/model/Global.js @@ -748,5 +748,7 @@ define(function (require) { } } + zrUtil.mixin(GlobalModel, require('./mixin/colorPalette')); + return GlobalModel; }); \ No newline at end of file diff --git a/src/model/Series.js b/src/model/Series.js index 43242539f..15de00b84 100644 --- a/src/model/Series.js +++ b/src/model/Series.js @@ -6,6 +6,7 @@ define(function(require) { var formatUtil = require('../util/format'); var modelUtil = require('../util/model'); var ComponentModel = require('./Component'); + var colorPaletteMixin = require('./mixin/colorPalette'); var encodeHTML = formatUtil.encodeHTML; var addCommas = formatUtil.addCommas; @@ -219,10 +220,21 @@ define(function(require) { this._data = this._dataBeforeProcessed.cloneShallow(); }, + getColorFromPalette: function (name, scope) { + var ecModel = this.ecModel; + // PENDING + var color = colorPaletteMixin.getColorFromPalette.call(this, name, scope); + if (!color) { + color = ecModel.getColorFromPalette(name, scope); + } + return color; + }, + getAxisTooltipDataIndex: null }); zrUtil.mixin(SeriesModel, modelUtil.dataFormatMixin); + zrUtil.mixin(SeriesModel, colorPaletteMixin); return SeriesModel; }); \ No newline at end of file diff --git a/src/model/mixin/colorPalette.js b/src/model/mixin/colorPalette.js new file mode 100644 index 000000000..b7b217180 --- /dev/null +++ b/src/model/mixin/colorPalette.js @@ -0,0 +1,29 @@ +define(function () { + return { + clearColorPalette: function () { + this._colorIdx = 0; + this._colorNameMap = {}; + }, + + getColorFromPalette: function (name, scope) { + scope = scope || this; + var colorIdx = scope._colorIdx || 0; + var colorNameMap = scope._colorNameMap || (scope._colorNameMap = {}); + if (colorNameMap[name]) { + return colorNameMap[name]; + } + var colorPalette = this.get('color', true) || []; + if (!colorPalette.length) { + return; + } + + var color = colorPalette[colorIdx]; + if (name) { + colorNameMap[name] = color; + } + scope._colorIdx = (colorIdx + 1) % colorPalette.length; + + return color; + } + }; +}); \ No newline at end of file diff --git a/src/visual/dataColor.js b/src/visual/dataColor.js index 74d4226d1..9baad7e37 100644 --- a/src/visual/dataColor.js +++ b/src/visual/dataColor.js @@ -2,25 +2,30 @@ define(function (require) { return function (seriesType, ecModel) { - var globalColorList = ecModel.get('color'); - var offset = 0; + // Pie and funnel may use diferrent scope + var paletteScope = {}; ecModel.eachRawSeriesByType(seriesType, function (seriesModel) { - var colorList = seriesModel.get('color', true); var dataAll = seriesModel.getRawData(); + var idxMap = {}; if (!ecModel.isSeriesFiltered(seriesModel)) { var data = seriesModel.getData(); data.each(function (idx) { - var itemModel = data.getItemModel(idx); var rawIdx = data.getRawIndex(idx); + idxMap[rawIdx] = idx; + }); + dataAll.each(function (rawIdx) { + // FIXME Performance + var itemModel = dataAll.getItemModel(rawIdx); + var filteredIdx = idxMap[rawIdx]; // If series.itemStyle.normal.color is a function. itemVisual may be encoded - var singleDataColor = data.getItemVisual(idx, 'color', true); + var singleDataColor = data.getItemVisual(filteredIdx, 'color', true); + if (!singleDataColor) { - var paletteColor = colorList ? colorList[rawIdx % colorList.length] - : globalColorList[(rawIdx + offset) % globalColorList.length]; - var color = itemModel.get('itemStyle.normal.color') || paletteColor; + var color = itemModel.get('itemStyle.normal.color') + || seriesModel.getColorFromPalette(dataAll.getName(rawIdx), paletteScope); // Legend may use the visual info in data before processed dataAll.setItemVisual(rawIdx, 'color', color); - data.setItemVisual(idx, 'color', color); + data.setItemVisual(filteredIdx, 'color', color); } else { // Set data all color for legend @@ -28,7 +33,6 @@ define(function (require) { } }); } - offset += dataAll.count(); }); }; }); \ No newline at end of file diff --git a/src/visual/seriesColor.js b/src/visual/seriesColor.js index 5fc0861e1..350b595d7 100644 --- a/src/visual/seriesColor.js +++ b/src/visual/seriesColor.js @@ -3,10 +3,9 @@ define(function (require) { return function (seriesType, styleType, ecModel) { function encodeColor(seriesModel) { var colorAccessPath = [styleType, 'normal', 'color']; - var colorList = ecModel.get('color'); var data = seriesModel.getData(); var color = seriesModel.get(colorAccessPath) // Set in itemStyle - || colorList[seriesModel.seriesIndex % colorList.length]; // Default color + || seriesModel.getColorFromPalette(seriesModel.get('name')); // Default color // FIXME Set color function or use the platte color data.setVisual('color', color); @@ -30,7 +29,7 @@ define(function (require) { }); } } - seriesType ? ecModel.eachSeriesByType(seriesType, encodeColor) - : ecModel.eachSeries(encodeColor); + seriesType ? ecModel.eachRawSeriesByType(seriesType, encodeColor) + : ecModel.eachRawSeries(encodeColor); }; }); \ No newline at end of file -- GitLab