Merge branch 'next' into custom-series-enhance

# Conflicts:
#	src/util/graphic.ts

.eslintignore

 /dist
-/node_modules
\ No newline at end of file
+/node_modules
+/build
\ No newline at end of file

src/chart/boxplot/boxplotLayout.ts

@@ -149,7 +149,7 @@ function layoutSingleSeries(seriesModel: BoxplotSeriesModel, offset: number, box
     const vDimIdx = 1 - cDimIdx;
     const coordDims = ['x', 'y'];
     const cDim = data.mapDimension(coordDims[cDimIdx]);
-    const vDims = data.mapDimension(coordDims[vDimIdx], true);
+    const vDims = data.mapDimensionsAll(coordDims[vDimIdx]);
 
     if (cDim == null || vDims.length < 5) {
         return;

src/chart/candlestick/candlestickLayout.ts

@@ -57,7 +57,7 @@ const candlestickLayout: StageHandler = {
         const vDimIdx = 1;
         const coordDims = ['x', 'y'];
         const cDim = data.mapDimension(coordDims[cDimIdx]);
-        const vDims = data.mapDimension(coordDims[vDimIdx], true);
+        const vDims = data.mapDimensionsAll(coordDims[vDimIdx]);
         const openDim = vDims[0];
         const closeDim = vDims[1];
         const lowestDim = vDims[2];

src/chart/graph/GraphSeries.ts

@@ -279,32 +279,32 @@ class GraphSeriesModel extends SeriesModel<GraphSeriesOption> {
                 return model;
             });
 
-            const edgeLabelModel = self.getModel('edgeLabel');
-            // For option `edgeLabel` can be found by label.xxx.xxx on item mode.
-            const fakeSeriesModel = new Model(
-                {label: edgeLabelModel.option},
-                edgeLabelModel.parentModel,
-                ecModel
-            );
-            const emphasisEdgeLabelModel = self.getModel(['emphasis', 'edgeLabel']);
-            const emphasisFakeSeriesModel = new Model(
-                {emphasis: {label: emphasisEdgeLabelModel.option}},
-                emphasisEdgeLabelModel.parentModel,
-                ecModel
-            );
-
-            edgeData.wrapMethod('getItemModel', function (model) {
-                model.customizeGetParent(edgeGetParent);
+            // TODO Inherit resolveParentPath by default in Model#getModel?
+            const oldGetModel = Model.prototype.getModel;
+            function newGetModel(this: Model, path: any, parentModel?: Model) {
+                const model = oldGetModel.call(this, path, parentModel);
+                model.resolveParentPath = resolveParentPath;
+                return model;
+            }
+
+            edgeData.wrapMethod('getItemModel', function (model: Model) {
+                model.resolveParentPath = resolveParentPath;
+                model.getModel = newGetModel;
                 return model;
             });
 
-            function edgeGetParent(this: Model, path: string | string[]) {
-                const pathArr = this.parsePath(path);
-                return (pathArr && pathArr[0] === 'label')
-                    ? fakeSeriesModel
-                    : (pathArr && pathArr[0] === 'emphasis' && pathArr[1] === 'label')
-                    ? emphasisFakeSeriesModel
-                    : this.parentModel;
+            function resolveParentPath(this: Model, pathArr: readonly string[]): string[] {
+                if (pathArr && (pathArr[0] === 'label' || pathArr[1] === 'label')) {
+                    const newPathArr = pathArr.slice();
+                    if (pathArr[0] === 'label') {
+                        newPathArr[0] = 'edgeLabel';
+                    }
+                    else if (pathArr[1] === 'label') {
+                        newPathArr[1] = 'edgeLabel';
+                    }
+                    return newPathArr;
+                }
+                return pathArr as string[];
             }
         }
     }

src/chart/graph/simpleLayout.ts

@@ -32,7 +32,7 @@ export default function (ecModel: GlobalModel, api: ExtensionAPI) {
 
             let dimensions: string[] = [];
             each(coordSys.dimensions, function (coordDim) {
-                dimensions = dimensions.concat(data.mapDimension(coordDim, true));
+                dimensions = dimensions.concat(data.mapDimensionsAll(coordDim));
             });
 
             for (let dataIndex = 0; dataIndex < data.count(); dataIndex++) {

src/chart/helper/labelHelper.ts

@@ -25,7 +25,7 @@ import List from '../../data/List';
  * @return label string. Not null/undefined
  */
 export function getDefaultLabel(data: List, dataIndex: number): string {
-    const labelDims = data.mapDimension('defaultedLabel', true);
+    const labelDims = data.mapDimensionsAll('defaultedLabel');
     const len = labelDims.length;
 
     // Simple optimization (in lots of cases, label dims length is 1)

src/chart/sankey/SankeySeries.ts

@@ -177,24 +177,30 @@ class SankeySeriesModel extends SeriesModel<SankeySeriesOption> {
             return graph.data;
         }
         function beforeLink(nodeData: List, edgeData: List) {
-            nodeData.wrapMethod('getItemModel', function (model, idx) {
-                model.customizeGetParent(function (this: Model, path: string | string[]) {
-                    const parentModel = this.parentModel as SankeySeriesModel;
-                    const nodeDepth = parentModel.getData().getItemLayout(idx).depth;
-                    const levelModel = parentModel.levelModels[nodeDepth];
-                    return levelModel || this.parentModel;
-                });
+            nodeData.wrapMethod('getItemModel', function (model: Model, idx: number) {
+                const seriesModel = model.parentModel as SankeySeriesModel;
+                const layout = seriesModel.getData().getItemLayout(idx);
+                if (layout) {
+                    const nodeDepth = layout.depth;
+                    const levelModel = seriesModel.levelModels[nodeDepth];
+                    if (levelModel) {
+                        model.parentModel = levelModel;
+                    }
+                }
                 return model;
             });
 
-            edgeData.wrapMethod('getItemModel', function (model, idx) {
-                model.customizeGetParent(function (this: Model, path: string | string[]) {
-                    const parentModel = this.parentModel as SankeySeriesModel;
-                    const edge = parentModel.getGraph().getEdgeByIndex(idx);
-                    const depth = edge.node1.getLayout().depth;
-                    const levelModel = parentModel.levelModels[depth];
-                    return levelModel || this.parentModel;
-                });
+            edgeData.wrapMethod('getItemModel', function (model: Model, idx: number) {
+                const seriesModel = model.parentModel as SankeySeriesModel;
+                const edge = seriesModel.getGraph().getEdgeByIndex(idx);
+                const layout = edge.node1.getLayout();
+                if (layout) {
+                    const depth = layout.depth;
+                    const levelModel = seriesModel.levelModels[depth];
+                    if (levelModel) {
+                        model.parentModel = levelModel;
+                    }
+                }
                 return model;
             });
         }

src/chart/sankey/SankeyView.ts

@@ -443,7 +443,6 @@ class SankeyView extends ChartView {
         const data = seriesModel.getData();
         const graph = data.graph;
         const dataIndex = payload.dataIndex;
-        const itemModel = data.getItemModel<SankeyNodeItemOption>(dataIndex);
         const edgeDataIndex = payload.edgeDataIndex;
 
         if (dataIndex == null && edgeDataIndex == null) {
@@ -460,6 +459,7 @@ class SankeyView extends ChartView {
         });
 
         if (node) {
+            const itemModel = data.getItemModel<SankeyNodeItemOption>(dataIndex);
             fadeInItem(node, hoverNodeOpacityPath);
             const focusNodeAdj = itemModel.get('focusNodeAdjacency');
             if (focusNodeAdj === 'outEdges') {

src/component/axisPointer/axisTrigger.ts

@@ -263,7 +263,7 @@ function buildPayloadsBySeries(value: AxisValue, axisInfo: CollectedAxisInfo) {
     let minDiff = -1;
 
     each(axisInfo.seriesModels, function (series, idx) {
-        const dataDim = series.getData().mapDimension(dim, true);
+        const dataDim = series.getData().mapDimensionsAll(dim);
         let seriesNestestValue;
         let dataIndices;
 

src/component/dataZoom/AxisProxy.ts

@@ -337,7 +337,7 @@ class AxisProxy {
 
         each(seriesModels, function (seriesModel) {
             let seriesData = seriesModel.getData();
-            const dataDims = seriesData.mapDimension(axisDim, true);
+            const dataDims = seriesData.mapDimensionsAll(axisDim);
 
             if (!dataDims.length) {
                 return;
@@ -451,7 +451,7 @@ function calculateDataExtent(axisProxy: AxisProxy, axisDim: string, seriesModels
     each(seriesModels, function (seriesModel) {
         const seriesData = seriesModel.getData();
         if (seriesData) {
-            each(seriesData.mapDimension(axisDim, true), function (dim) {
+            each(seriesData.mapDimensionsAll(axisDim), function (dim) {
                 const seriesExtent = seriesData.getApproximateExtent(dim);
                 seriesExtent[0] < dataExtent[0] && (dataExtent[0] = seriesExtent[0]);
                 seriesExtent[1] > dataExtent[1] && (dataExtent[1] = seriesExtent[1]);

src/component/tooltip/TooltipView.ts

@@ -131,6 +131,7 @@ type TooltipDataParams = CallbackDataParams & {
     // TODO: TYPE Value type
     axisValue?: string | number
     axisValueLabel?: string
+    marker?: formatUtil.TooltipMarker
 };
 class TooltipView extends ComponentView {
     static type = 'tooltip' as const;
@@ -535,6 +536,10 @@ class TooltipView extends ComponentView {
                     dataParams.axisId = item.axisId;
                     dataParams.axisValue = axisHelper.getAxisRawValue(axisModel.axis, axisValue);
                     dataParams.axisValueLabel = valueLabel;
+                    dataParams.marker = formatUtil.getTooltipMarker({
+                        color: dataParams.color as ColorString,
+                        renderMode
+                    });
 
                     if (dataParams) {
                         singleParamsList.push(dataParams);
@@ -631,6 +636,11 @@ class TooltipView extends ComponentView {
         }
 
         const params = dataModel.getDataParams(dataIndex, dataType);
+        params.marker = formatUtil.getTooltipMarker({
+            color: params.color as ColorString,
+            renderMode: this._renderMode
+        });
+
         const seriesTooltip = dataModel.formatTooltip(dataIndex, false, dataType, this._renderMode);
         let defaultHtml: string;
         let markers: Dictionary<ColorString>;

src/coord/cartesian/Grid.ts

@@ -438,7 +438,7 @@ class Grid implements CoordinateSystemMaster {
         }, this);
 
         function unionExtent(data: List, axis: Axis2D): void {
-            each(data.mapDimension(axis.dim, true), function (dim) {
+            each(data.mapDimensionsAll(axis.dim), function (dim) {
                 axis.scale.unionExtentFromData(
                     // For example, the extent of the orginal dimension
                     // is [0.1, 0.5], the extent of the `stackResultDimension`

src/coord/polar/polarCreator.ts

@@ -86,12 +86,12 @@ function updatePolarScale(this: Polar, ecModel: GlobalModel, api: ExtensionAPI)
     ecModel.eachSeries(function (seriesModel) {
         if (seriesModel.coordinateSystem === polar) {
             const data = seriesModel.getData();
-            zrUtil.each(data.mapDimension('radius', true), function (dim) {
+            zrUtil.each(data.mapDimensionsAll('radius'), function (dim) {
                 radiusAxis.scale.unionExtentFromData(
                     data, getStackedDimension(data, dim)
                 );
             });
-            zrUtil.each(data.mapDimension('angle', true), function (dim) {
+            zrUtil.each(data.mapDimensionsAll('angle'), function (dim) {
                 angleAxis.scale.unionExtentFromData(
                     data, getStackedDimension(data, dim)
                 );

src/coord/single/Single.ts

@@ -96,7 +96,7 @@ class Single implements CoordinateSystem, CoordinateSystemMaster {
         ecModel.eachSeries(function (seriesModel) {
             if (seriesModel.coordinateSystem === this) {
                 const data = seriesModel.getData();
-                each(data.mapDimension(this.dimension, true), function (dim) {
+                each(data.mapDimensionsAll(this.dimension), function (dim) {
                     this._axis.scale.unionExtentFromData(data, dim);
                 }, this);
                 axisHelper.niceScaleExtent(this._axis.scale, this._axis.model);

src/data/List.ts

@@ -139,6 +139,9 @@ export interface DefaultDataVisual {
 
     // visualMap will inject visualMeta data
     visualMeta?: VisualMeta[]
+
+    // If color is encoded from palette
+    colorFromPalette?: boolean
 }
 
 class List<
@@ -351,16 +354,12 @@ class List<
     /**
      * @param coordDim
      * @param idx A coordDim may map to more than one data dim.
-     *        If idx is `true`, return a array of all mapped dims.
-     *        If idx is not specified, return the first dim not extra.
-     * @return concrete data dim.
-     *        If idx is number, and not found, return null/undefined.
-     *        If idx is `true`, and not found, return empty array (always return array).
+     *        If not specified, return the first dim not extra.
+     * @return concrete data dim. If not found, return null/undefined
      */
     mapDimension(coordDim: DimensionName): DimensionName;
-    mapDimension(coordDim: DimensionName, idx: true): DimensionName[];
     mapDimension(coordDim: DimensionName, idx: number): DimensionName;
-    mapDimension(coordDim: DimensionName, idx?: true | number): DimensionName | DimensionName[] {
+    mapDimension(coordDim: DimensionName, idx?: number): DimensionName {
         const dimensionsSummary = this._dimensionsSummary;
 
         if (idx == null) {
@@ -368,10 +367,13 @@ class List<
         }
 
         const dims = dimensionsSummary.encode[coordDim];
-        return idx === true
-            // always return array if idx is `true`
-            ? (dims || []).slice()
-            : (dims ? dims[idx as number] as any : null);
+        return dims ? dims[idx as number] as any : null;
+    }
+
+    mapDimensionsAll(coordDim: DimensionName): DimensionName[] {
+        const dimensionsSummary = this._dimensionsSummary;
+        const dims = dimensionsSummary.encode[coordDim];
+        return (dims || []).slice();
     }
 
     /**

src/echarts.ts

@@ -1620,6 +1620,8 @@ class ECharts extends Eventful {
                 const componentModel = componentView.__model;
                 componentView.render(componentModel, ecModel, api, payload);
 
+                componentView.group.markRedraw();
+
                 updateZ(componentModel, componentView);
                 updateHoverEmphasisHandler(componentView);
             });
@@ -1652,6 +1654,7 @@ class ECharts extends Eventful {
                 unfinished |= +renderTask.perform(scheduler.getPerformArgs(renderTask));
 
                 chartView.group.silent = !!seriesModel.get('silent');
+                chartView.group.markRedraw();
 
                 updateZ(seriesModel, chartView);
 

src/model/Model.ts

@@ -19,7 +19,6 @@
 
 import * as zrUtil from 'zrender/src/core/util';
 import env from 'zrender/src/core/env';
-import {makeInner} from '../util/model';
 import {
     enableClassExtend,
     ExtendableConstructor,
@@ -36,9 +35,6 @@ import { ModelOption } from '../util/types';
 import { Dictionary } from 'zrender/src/core/types';
 
 const mixin = zrUtil.mixin;
-const inner = makeInner<{
-    getParent(path: string | string[]): Model
-}, Model>();
 
 // Since model.option can be not only `Dictionary` but also primary types,
 // we do this conditional type to avoid getting type 'never';
@@ -119,10 +115,9 @@ class Model<Opt extends ModelOption = ModelOption> {    // TODO: TYPE use unkown
             return this.option;
         }
 
-        return doGet(
-            this.option,
+        return this._doGet(
             this.parsePath(path),
-            !ignoreParent && getParent(this, path)
+            !ignoreParent && this.parentModel
         );
     }
 
@@ -133,7 +128,7 @@ class Model<Opt extends ModelOption = ModelOption> {    // TODO: TYPE use unkown
 
         let val = option == null ? option : option[key];
         if (val == null && !ignoreParent) {
-            const parentModel = getParent(this, key as string);
+            const parentModel = this.parentModel;
             if (parentModel) {
                 // FIXME:TS do not know how to make it works
                 val = parentModel.getShallow(key);
@@ -162,13 +157,12 @@ class Model<Opt extends ModelOption = ModelOption> {    // TODO: TYPE use unkown
         const hasPath = path != null;
         const pathFinal = hasPath ? this.parsePath(path) : null;
         const obj = hasPath
-            ? doGet(this.option, pathFinal)
+            ? this._doGet(pathFinal)
             : this.option;
 
-        let thisParentModel;
         parentModel = parentModel || (
-            (thisParentModel = getParent(this, pathFinal))
-                && thisParentModel.getModel(pathFinal as readonly [string])
+            this.parentModel
+                && this.parentModel.getModel(this.resolveParentPath(pathFinal) as [string])
         );
 
         return new Model(obj, parentModel, this.ecModel);
@@ -201,10 +195,11 @@ class Model<Opt extends ModelOption = ModelOption> {    // TODO: TYPE use unkown
         return path;
     }
 
-    customizeGetParent(
-        getParentMethod: (path: string | string[]) => Model
-    ): void {
-        inner(this).getParent = getParentMethod;
+    // Resolve path for parent. Perhaps useful when parent use a different property.
+    // Default to be a identity resolver.
+    // Can be modified to a different resolver.
+    resolveParentPath(path: readonly string[]): string[] {
+        return path as string[];
     }
 
     // FIXME:TS check whether put this method here
@@ -219,32 +214,33 @@ class Model<Opt extends ModelOption = ModelOption> {    // TODO: TYPE use unkown
         }
     }
 
-};
+    private _doGet(pathArr: readonly string[], parentModel?: Model<Dictionary<any>>) {
+        let obj = this.option;
+        if (!pathArr) {
+            return obj;
+        }
 
-function doGet(obj: ModelOption, pathArr: readonly string[], parentModel?: Model<Dictionary<any>>) {
-    for (let i = 0; i < pathArr.length; i++) {
-        // Ignore empty
-        if (!pathArr[i]) {
-            continue;
+        for (let i = 0; i < pathArr.length; i++) {
+            // Ignore empty
+            if (!pathArr[i]) {
+                continue;
+            }
+            // obj could be number/string/... (like 0)
+            obj = (obj && typeof obj === 'object') ? obj[pathArr[i] as keyof ModelOption] : null;
+            if (obj == null) {
+                break;
+            }
         }
-        // obj could be number/string/... (like 0)
-        obj = (obj && typeof obj === 'object') ? obj[pathArr[i] as keyof ModelOption] : null;
-        if (obj == null) {
-            break;
+        if (obj == null && parentModel) {
+            obj = parentModel._doGet(
+                this.resolveParentPath(pathArr) as [string],
+                parentModel.parentModel
+            ) as any;
         }
+
+        return obj;
     }
-    if (obj == null && parentModel) {
-        // TODO At most 3 items array. support string[]?
-        obj = parentModel.get(pathArr as [string]);
-    }
-    return obj;
-}
-
-// `path` can be null/undefined
-function getParent(model: Model, path: string | readonly string[]): Model {
-    const getParentMethod = inner(model).getParent;
-    return getParentMethod ? getParentMethod.call(model, path) : model.parentModel;
-}
+};
 
 type ModelConstructor = typeof Model
     & ExtendableConstructor

src/model/Series.ts

@@ -475,7 +475,7 @@ class SeriesModel<Opt extends SeriesOption = SeriesOption> extends ComponentMode
         }
 
         const data = this.getData();
-        const tooltipDims = data.mapDimension('defaultedTooltip', true);
+        const tooltipDims = data.mapDimensionsAll('defaultedTooltip');
         const tooltipDimLen = tooltipDims.length;
         const value = this.getRawValue(dataIndex) as any;
         const isValueArr = zrUtil.isArray(value);
@@ -565,11 +565,11 @@ class SeriesModel<Opt extends SeriesOption = SeriesOption> extends ComponentMode
     }
 
     /**
-     * Use `data.mapDimension(coordDim, true)` instead.
+     * Use `data.mapDimensionsAll(coordDim)` instead.
      * @deprecated
      */
     coordDimToDataDim(coordDim: DimensionName): DimensionName[] {
-        return this.getRawData().mapDimension(coordDim, true);
+        return this.getRawData().mapDimensionsAll(coordDim);
     }
 
     /**
@@ -628,7 +628,7 @@ function autoSeriesName(seriesModel: SeriesModel): void {
 
 function getSeriesAutoName(seriesModel: SeriesModel): string {
     const data = seriesModel.getRawData();
-    const dataDims = data.mapDimension('seriesName', true);
+    const dataDims = data.mapDimensionsAll('seriesName');
     const nameArr: string[] = [];
     zrUtil.each(dataDims, function (dataDim) {
         const dimInfo = data.getDimensionInfo(dataDim);

src/model/mixin/dataFormat.ts

@@ -18,9 +18,8 @@
 */
 
 import {retrieveRawValue} from '../../data/helper/dataProvider';
-import {getTooltipMarker, formatTpl} from '../../util/format';
-import { getTooltipRenderMode } from '../../util/model';
-import { DataHost, DisplayState, TooltipRenderMode, CallbackDataParams, ColorString } from '../../util/types';
+import {formatTpl} from '../../util/format';
+import { DataHost, DisplayState, TooltipRenderMode, CallbackDataParams, ColorString, ZRColor } from '../../util/types';
 import GlobalModel from '../Global';
 import Element from 'zrender/src/Element';
 
@@ -53,12 +52,8 @@ class DataFormatMixin {
         const name = data.getName(dataIndex);
         const itemOpt = data.getRawDataItem(dataIndex);
         const style = data.getItemVisual(dataIndex, 'style');
-        const color = style && style.fill as ColorString;
+        const color = style && style[data.getItemVisual(dataIndex, 'drawType') || 'fill'] as ZRColor;
         const borderColor = style && style.stroke as ColorString;
-        const tooltipModel = this.ecModel.getComponent('tooltip');
-        // @ts-ignore FIXME:TooltipModel
-        const renderModeOption = tooltipModel && tooltipModel.get('renderMode');
-        const renderMode = getTooltipRenderMode(renderModeOption);
         const mainType = this.mainType;
         const isSeries = mainType === 'series';
         const userOutput = data.userOutput;
@@ -80,10 +75,6 @@ class DataFormatMixin {
             borderColor: borderColor,
             dimensionNames: userOutput ? userOutput.dimensionNames : null,
             encode: userOutput ? userOutput.encode : null,
-            marker: getTooltipMarker({
-                color: color,
-                renderMode: renderMode
-            }),
 
             // Param name list for mapping `a`, `b`, `c`, `d`, `e`
             $vars: ['seriesName', 'name', 'value']

src/util/graphic.ts

@@ -638,8 +638,6 @@ export function setLabelStyle<LDI>(
 ) {
     opt = opt || EMPTY_OBJ;
     const isSetOnText = targetEl instanceof ZRText;
-    // This scenario, `label.normal.show = true; label.emphasis.show = false`,
-    // is not supported util someone requests.
 
     const showNormal = normalModel.getShallow('show');
     const showEmphasis = emphasisModel.getShallow('show');
@@ -742,7 +740,6 @@ export function setLabelStyle<LDI>(
 
 /**
  * Set basic textStyle properties.
- * See more info in `setTextStyleCommon`.
  */
 export function createTextStyle(
     textStyleModel: Model,

src/visual/helper.ts

@@ -70,6 +70,8 @@ export function setItemVisualFromData(data: List, dataIndex: number, key: string
             // Make sure not sharing style object.
             const style = data.ensureUniqueItemVisual(dataIndex, 'style');
             style[data.getVisual('drawType')] = value;
+            // Mark the color has been changed, not from palette anymore
+            data.setItemVisual(dataIndex, 'colorFromPalette', false);
             break;
         case 'opacity':
             data.ensureUniqueItemVisual(dataIndex, 'style').opacity = value;

src/visual/style.ts

@@ -82,12 +82,13 @@ const seriesStyleTask: StageHandler = {
 
         // TODO style callback
         const colorCallback = isFunction(color) ? color as unknown as ColorCallback : null;
-        // Default
-        if ((!globalStyle[colorKey] || colorCallback) && !seriesModel.useColorPaletteOnData) {
+        // Get from color palette by default.
+        if (!globalStyle[colorKey] || colorCallback) {
             globalStyle[colorKey] = seriesModel.getColorFromPalette(
                 // TODO series count changed.
                 seriesModel.name, null, ecModel.getSeriesCount()
             );
+            data.setVisual('colorFromPalette', true);
         }
 
         data.setVisual('style', globalStyle);
@@ -95,6 +96,8 @@ const seriesStyleTask: StageHandler = {
 
         // Only visible series has each data be visual encoded
         if (!ecModel.isSeriesFiltered(seriesModel) && colorCallback) {
+            data.setVisual('colorFromPalette', false);
+
             return {
                 dataEach(data, idx) {
                     const dataParams = seriesModel.getDataParams(idx);
@@ -122,6 +125,8 @@ const dataStyleTask: StageHandler = {
         // Set in itemStyle
         const getStyle = getStyleMapper(seriesModel, stylePath);
 
+        const colorKey = data.getVisual('drawType');
+
         return {
             dataEach: data.hasItemOption ? function (data, idx) {
                 // Not use getItemModel for performance considuration
@@ -132,12 +137,17 @@ const dataStyleTask: StageHandler = {
 
                     const existsStyle = data.ensureUniqueItemVisual(idx, 'style');
                     extend(existsStyle, style);
+
+                    if (colorKey in style) {
+                        data.setItemVisual(idx, 'colorFromPalette', false);
+                    }
                 }
             } : null
         };
     }
 };
 
+// Pick color from palette for the data which has not been set with color yet.
 const dataColorPaletteTask: StageHandler = {
     createOnAllSeries: true,
     performRawSeries: true,
@@ -181,10 +191,14 @@ const dataColorPaletteTask: StageHandler = {
             // Consistent when toggling legend.
             dataAll.each(function (rawIdx) {
                 const idx = idxMap[rawIdx];
-                const existsStyle = data.ensureUniqueItemVisual(idx, 'style');
-                if (!existsStyle[colorKey]) {
-                    // Get color from palette.
-                    existsStyle[colorKey] = seriesModel.getColorFromPalette(
+                const fromPalette = data.getItemVisual(idx, 'colorFromPalette');
+                // Get color from palette for each data only when the color is inherited from series color, which is
+                // also picked from color palette. So following situation is not in the case:
+                // 1. series.itemStyle.color is set
+                // 2. color is encoded by visualMap
+                if (fromPalette) {
+                    const itemStyle = data.ensureUniqueItemVisual(idx, 'style');
+                    itemStyle[colorKey] = seriesModel.getColorFromPalette(
                         dataAll.getName(rawIdx) || (rawIdx + ''),
                         colorScope,
                         dataAll.count()
@@ -195,4 +209,8 @@ const dataColorPaletteTask: StageHandler = {
     }
 };
 
-export {seriesStyleTask, dataStyleTask, dataColorPaletteTask};
\ No newline at end of file
+export {
+    seriesStyleTask,
+    dataStyleTask,
+    dataColorPaletteTask
+};
\ No newline at end of file

test/pie-visual.html

+<!DOCTYPE html>
+<!--
+Licensed to the Apache Software Foundation (ASF) under one
+or more contributor license agreements.  See the NOTICE file
+distributed with this work for additional information
+regarding copyright ownership.  The ASF licenses this file
+to you under the Apache License, Version 2.0 (the
+"License"); you may not use this file except in compliance
+with the License.  You may obtain a copy of the License at
+
+   http://www.apache.org/licenses/LICENSE-2.0
+
+Unless required by applicable law or agreed to in writing,
+software distributed under the License is distributed on an
+"AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY
+KIND, either express or implied.  See the License for the
+specific language governing permissions and limitations
+under the License.
+-->
+
+
+<html>
+    <head>
+        <meta charset="utf-8">
+        <meta name="viewport" content="width=device-width, initial-scale=1" />
+        <script src="lib/esl.js"></script>
+        <script src="lib/config.js"></script>
+        <script src="lib/jquery.min.js"></script>
+        <script src="lib/facePrint.js"></script>
+        <script src="lib/testHelper.js"></script>
+        <!-- <script src="ut/lib/canteen.js"></script> -->
+        <link rel="stylesheet" href="lib/reset.css" />
+    </head>
+    <body>
+        <style>
+        </style>
+
+
+
+        <div id="main0"></div>
+        <div id="main1"></div>
+        <div id="main2"></div>
+        <div id="main3"></div>
+        <div id="main4"></div>
+
+
+        <script>
+        require(['echarts'/*, 'map/js/china' */], function (echarts) {
+            var option;
+            // $.getJSON('./data/nutrients.json', function (data) {});
+            option = {
+                series: [
+                    {
+                        type: 'pie',
+                        data: [
+                            {value: 335, name: 'Tom'},
+                            {value: 310, name: 'Jack'},
+                            {value: 274, name: 'Bobby'},
+                            {value: 235, name: 'Emily'},
+                            {value: 400, name: 'Jessy'}
+                        ],
+                        roseType: 'radius'
+                    }
+                ]
+            };
+            var chart = testHelper.create(echarts, 'main0', {
+                title: [
+                    'Should use color from palette by default'
+                ],
+                option: option
+            });
+        });
+        </script>
+
+        <script>
+            require(['echarts'/*, 'map/js/china' */], function (echarts) {
+                var option;
+                // $.getJSON('./data/nutrients.json', function (data) {});
+                option = {
+                    series: [
+                        {
+                            type: 'pie',
+                            data: [
+                                {value: 335, name: 'Tom'},
+                                {value: 310, name: 'Jack'},
+                                {value: 274, name: 'Bobby'},
+                                {value: 235, name: 'Emily'},
+                                {value: 400, name: 'Jessy'}
+                            ],
+                            itemStyle: {
+                                color: '#37A2DA',
+                                borderColor: '#fff',
+                                borderWidth: 2
+                            }
+                        }
+                    ]
+                };
+                var chart = testHelper.create(echarts, 'main1', {
+                    title: [
+                        'Test of itemStyle.color',
+                        'Should all be color #37A2DA'
+                    ],
+                    option: option
+                });
+            });
+        </script>
+
+        <script>
+            require(['echarts'/*, 'map/js/china' */], function (echarts) {
+                var option;
+                // $.getJSON('./data/nutrients.json', function (data) {});
+                option = {
+                    series: [
+                        {
+                            type: 'pie',
+                            data: [
+                                {
+                                    value: 335,
+                                    name: 'This color should be purple. Others will pick from color palette',
+                                    itemStyle: {
+                                        color: 'purple'
+                                    }
+                                },
+                                {
+                                    value: 310,
+                                    name: 'This should has shadow',
+                                    itemStyle: {
+                                        shadowBlur: 10
+                                    }
+                                },
+                                {value: 274, name: 'Bobby'},
+                                {value: 235, name: 'Emily'},
+                                {value: 400, name: 'Jessy'}
+                            ]
+                        }
+                    ]
+                };
+                var chart = testHelper.create(echarts, 'main2', {
+                    title: [
+                        'data.itemStyle.color should work property '
+                    ],
+                    option: option
+                });
+            });
+        </script>
+
+        <script>
+            require(['echarts'/*, 'map/js/china' */], function (echarts) {
+                var option;
+                // $.getJSON('./data/nutrients.json', function (data) {});
+                option = {
+                    series: [
+                        {
+                            type: 'pie',
+                            itemStyle: {
+                                color: function (params) {
+                                    return echarts.color.modifyAlpha('red', params.dataIndex / 10 + 0.5);
+                                }
+                            },
+                            label: {
+                                formatter: function (params) {
+                                    return params.name + '(opacity: ' + (params.dataIndex / 10 + 0.5) + ')';
+                                }
+                            },
+                            data: [
+                                {
+                                    value: 335,
+                                    name: 'This color should be purple',
+                                    itemStyle: {
+                                        color: 'purple'
+                                    }
+                                },
+                                {value: 310, name: 'Jack'},
+                                {value: 274, name: 'Bobby'},
+                                {value: 235, name: 'Emily'},
+                                {value: 400, name: 'Jessy'}
+                            ]
+                        }
+                    ]
+                };
+                var chart = testHelper.create(echarts, 'main3', {
+                    title: [
+                        'Callback of color'
+                    ],
+                    option: option
+                });
+            });
+        </script>
+
+        <script>
+            require(['echarts'/*, 'map/js/china' */], function (echarts) {
+                var option;
+                // $.getJSON('./data/nutrients.json', function (data) {});
+                option = {
+                    backgroundColor: '#2c343c',
+                    visualMap: {
+                        show: false,
+                        min: 80,
+                        max: 600,
+                        inRange: {
+                            colorLightness: [0, 1]
+                        }
+                    },
+                    series: [
+                        {
+                            type: 'pie',
+                            radius: '50%',
+                            center: ['25%', '50%'],
+                            data: [
+                                {value: 335, name: 'Tom'},
+                                {value: 310, name: 'Jack'},
+                                {value: 274, name: 'Bobby'},
+                                {value: 235, name: 'Emily'},
+                                {value: 400, name: 'Jessy'}
+                            ].sort(function (a, b) { return a.value - b.value; }),
+                            roseType: 'radius'
+                        },
+
+                        {
+                            type: 'pie',
+                            radius: '50%',
+                            center: ['75%', '50%'],
+                            data: [
+                                {
+                                    value: 335,
+                                    name: 'This should be pink',
+                                    itemStyle: {
+                                        color: 'pink'
+                                    }
+                                },
+                                {value: 310, name: 'Jack'},
+                                {value: 274, name: 'Bobby'},
+                                {value: 235, name: 'Emily'},
+                                {value: 400, name: 'Jessy'}
+                            ].sort(function (a, b) { return a.value - b.value; }),
+                            roseType: 'radius'
+                        }
+                    ]
+                };
+                var chart = testHelper.create(echarts, 'main4', {
+                    title: [
+                        'visualMap will apply lightness modification on series color',
+                        'data.itemStyle.color should have higher priority.'
+                    ],
+                    option: option
+                });
+            });
+        </script>
+
+    </body>
+</html>
+