Improve color palette. Add two themes

src/component/visualMap/VisualMapModel.js

@@ -15,8 +15,6 @@ var asc = numberUtil.asc;
 var linearMap = numberUtil.linearMap;
 var noop = zrUtil.noop;
 
-var DEFAULT_COLOR = ['#f6efa6', '#d88273', '#bf444c'];
-
 var VisualMapModel = echarts.extendComponentModel({
 
     type: 'visualMap',
@@ -327,6 +325,7 @@ var VisualMapModel = echarts.extendComponentModel({
      * @protected
      */
     completeVisualOption: function () {
+        var ecModel = this.ecModel;
         var thisOption = this.option;
         var base = {inRange: thisOption.inRange, outOfRange: thisOption.outOfRange};
 
@@ -363,7 +362,7 @@ var VisualMapModel = echarts.extendComponentModel({
             // the second time the default color will be erased. So we change to use
             // constant DEFAULT_COLOR.
             // If user do not want the defualt color, set inRange: {color: null}.
-            base.inRange = base.inRange || {color: DEFAULT_COLOR};
+            base.inRange = base.inRange || {color: ecModel.get('gradientColor')};
 
             // If using shortcut like: {inRange: 'symbol'}, complete default value.
             each(this.stateList, function (state) {

src/model/Global.js

@@ -27,7 +27,7 @@ import * as modelUtil from '../util/model';
 import Model from './Model';
 import ComponentModel from './Component';
 import globalDefault from './globalDefault';
-import colorPaletteMinin from './mixin/colorPalette';
+import colorPaletteMixin from './mixin/colorPalette';
 import {resetSourceDefaulter} from '../data/helper/sourceHelper';
 
 var OPTION_INNER_KEY = '\0_ec_inner';
@@ -492,6 +492,13 @@ var GlobalModel = Model.extend({
         return this._componentsMap.get('series').slice();
     },
 
+    /**
+     * @return {number}
+     */
+    getSeriesCount: function () {
+        return this._componentsMap.get('series').length;
+    },
+
     /**
      * After filtering, series may be different
      * frome raw series.
@@ -733,6 +740,6 @@ function assertSeriesInitialized(ecModel) {
     }
 }
 
-mixin(GlobalModel, colorPaletteMinin);
+mixin(GlobalModel, colorPaletteMixin);
 
 export default GlobalModel;

src/model/Series.js

@@ -357,12 +357,12 @@ var SeriesModel = ComponentModel.extend({
         this.dataTask.dirty();
     },
 
-    getColorFromPalette: function (name, scope) {
+    getColorFromPalette: function (name, scope, requestColorNum) {
         var ecModel = this.ecModel;
         // PENDING
-        var color = colorPaletteMixin.getColorFromPalette.call(this, name, scope);
+        var color = colorPaletteMixin.getColorFromPalette.call(this, name, scope, requestColorNum);
         if (!color) {
-            color = ecModel.getColorFromPalette(name, scope);
+            color = ecModel.getColorFromPalette(name, scope, requestColorNum);
         }
         return color;
     },

src/model/globalDefault.js

@@ -17,6 +17,8 @@ export default {
     // 深色
     color: ['#c23531','#2f4554', '#61a0a8', '#d48265', '#91c7ae','#749f83',  '#ca8622', '#bda29a','#6e7074', '#546570', '#c4ccd3'],
 
+    gradientColor: ['#f6efa6', '#d88273', '#bf444c'],
+
     // 默认需要 Grid 配置项
     // grid: {},
     // 主题，主题

src/model/mixin/colorPalette.js

@@ -2,13 +2,24 @@ import {makeInner, normalizeToArray} from '../../util/model';
 
 var inner = makeInner();
 
+function getNearestColorPalette(colors, requestColorNum) {
+    var paletteNum = colors.length;
+    // TODO colors must be in order
+    for (var i = 0; i < paletteNum; i++) {
+        if (colors[i].length > requestColorNum) {
+            return colors[i];
+        }
+    }
+    return colors[paletteNum - 1];
+}
+
 export default {
     clearColorPalette: function () {
         inner(this).colorIdx = 0;
         inner(this).colorNameMap = {};
     },
 
-    getColorFromPalette: function (name, scope) {
+    getColorFromPalette: function (name, scope, requestColorNum) {
         scope = scope || this;
         var scopeFields = inner(scope);
         var colorIdx = scopeFields.colorIdx || 0;
@@ -17,8 +28,15 @@ export default {
         if (colorNameMap.hasOwnProperty(name)) {
             return colorNameMap[name];
         }
-        var colorPalette = normalizeToArray(this.get('color', true));
-        if (!colorPalette.length) {
+        var defaultColorPalette = normalizeToArray(this.get('color', true));
+        var layeredColorPalette = this.get('colorLayer', true);
+        var colorPalette = ((requestColorNum == null || !layeredColorPalette)
+            ? defaultColorPalette : getNearestColorPalette(layeredColorPalette, requestColorNum));
+
+        // In case can't find in layered color palette.
+        colorPalette = colorPalette || defaultColorPalette;
+
+        if (!colorPalette || !colorPalette.length) {
             return;
         }
 

src/theme/dark.js

+var contrastColor = '#eee';
+var axisCommon = function () {
+    return {
+        axisLine: {
+            lineStyle: {
+                color: contrastColor
+            }
+        },
+        axisTick: {
+            lineStyle: {
+                color: contrastColor
+            }
+        },
+        axisLabel: {
+            textStyle: {
+                color: contrastColor
+            }
+        },
+        splitLine: {
+            lineStyle: {
+                type: 'dashed',
+                color: '#aaa'
+            }
+        },
+        splitArea: {
+            areaStyle: {
+                color: contrastColor
+            }
+        }
+    };
+};
+
+var colorPalette = ['#dd6b66','#759aa0','#e69d87','#8dc1a9','#ea7e53','#eedd78','#73a373','#73b9bc','#7289ab', '#91ca8c','#f49f42'];
+var theme = {
+    color: colorPalette,
+    backgroundColor: '#333',
+    tooltip: {
+        axisPointer: {
+            lineStyle: {
+                color: contrastColor
+            },
+            crossStyle: {
+                color: contrastColor
+            }
+        }
+    },
+    legend: {
+        textStyle: {
+            color: contrastColor
+        }
+    },
+    textStyle: {
+        color: contrastColor
+    },
+    title: {
+        textStyle: {
+            color: contrastColor
+        }
+    },
+    toolbox: {
+        iconStyle: {
+            normal: {
+                borderColor: contrastColor
+            }
+        }
+    },
+    dataZoom: {
+        textStyle: {
+            color: contrastColor
+        }
+    },
+    visualMap: {
+        textStyle: {
+            color: contrastColor
+        }
+    },
+    timeline: {
+        lineStyle: {
+            color: contrastColor
+        },
+        itemStyle: {
+            normal: {
+                color: colorPalette[1]
+            }
+        },
+        label: {
+            normal: {
+                textStyle: {
+                    color: contrastColor
+                }
+            }
+        },
+        controlStyle: {
+            normal: {
+                color: contrastColor,
+                borderColor: contrastColor
+            }
+        }
+    },
+    timeAxis: axisCommon(),
+    logAxis: axisCommon(),
+    valueAxis: axisCommon(),
+    categoryAxis: axisCommon(),
+
+    line: {
+        symbol: 'circle'
+    },
+    graph: {
+        color: colorPalette
+    },
+    gauge: {
+        title: {
+            textStyle: {
+                color: contrastColor
+            }
+        }
+    },
+    candlestick: {
+        itemStyle: {
+            normal: {
+                color: '#FD1050',
+                color0: '#0CF49B',
+                borderColor: '#FD1050',
+                borderColor0: '#0CF49B'
+            }
+        }
+    }
+};
+theme.categoryAxis.splitLine.show = false;
+
+export default theme;
\ No newline at end of file

src/theme/light.js

+var colorAll = ['#37A2DA', '#32C5E9', '#67E0E3', '#9FE6B8', '#FFDB5C','#ff9f7f', '#fb7293', '#E062AE', '#E690D1', '#e7bcf3', '#9d96f5', '#8378EA', '#96BFFF'];
+
+export default {
+
+    color: colorAll,
+
+    colorLayer: [
+        ['#37A2DA', '#ffd85c', '#fd7b5f'],
+        ['#37A2DA', '#67E0E3', '#FFDB5C', '#ff9f7f', '#E062AE', '#9d96f5'],
+        ['#37A2DA', '#32C5E9', '#9FE6B8', '#FFDB5C', '#ff9f7f', '#fb7293', '#e7bcf3', '#8378EA', '#96BFFF'],
+        colorAll
+    ]
+};
\ No newline at end of file

src/visual/dataColor.js

@@ -39,7 +39,8 @@ export default function (seriesType) {
                     var itemModel = dataAll.getItemModel(rawIdx);
                     var color = itemModel.get('itemStyle.color')
                         || seriesModel.getColorFromPalette(
-                            dataAll.getName(rawIdx), seriesModel.__paletteScope
+                            dataAll.getName(rawIdx), seriesModel.__paletteScope,
+                            dataAll.count()
                         );
                     // Legend may use the visual info in data before processed
                     dataAll.setItemVisual(rawIdx, 'color', color);

src/visual/seriesColor.js

@@ -7,7 +7,10 @@ export default {
         var data = seriesModel.getData();
         var colorAccessPath = (seriesModel.visualColorAccessPath || 'itemStyle.color').split('.');
         var color = seriesModel.get(colorAccessPath) // Set in itemStyle
-            || seriesModel.getColorFromPalette(seriesModel.get('name'));  // Default color
+            || seriesModel.getColorFromPalette(
+                // TODO series count changed.
+                seriesModel.get('name'), null, ecModel.getSeriesCount()
+            );  // Default color
 
         // FIXME Set color function or use the platte color
         data.setVisual('color', color);