Merge pull request #11737 from apache/pie-visual-color

fix(legend): legend of pie/funnel/radar can pick from visualMap encoded color

src/chart/funnel/FunnelSeries.js

@@ -20,6 +20,8 @@
 import * as echarts from '../../echarts';
 import createListSimply from '../helper/createListSimply';
 import {defaultEmphasis} from '../../util/model';
+import LegendVisualProvider from '../../visual/LegendVisualProvider';
+import {bind} from 'zrender/src/core/util';
 
 var FunnelSeries = echarts.extendSeriesModel({
 
@@ -30,9 +32,9 @@ var FunnelSeries = echarts.extendSeriesModel({
 
         // Enable legend selection for each data item
         // Use a function instead of direct access because data reference may changed
-        this.legendDataProvider = function () {
-            return this.getRawData();
-        };
+        this.legendVisualProvider = new LegendVisualProvider(
+            bind(this.getData, this), bind(this.getRawData, this)
+        );
         // Extend labelLine emphasis
         this._defaultLabelLine(option);
     },

src/chart/graph/GraphSeries.js

@@ -24,6 +24,7 @@ import {defaultEmphasis} from '../../util/model';
 import Model from '../../model/Model';
 import {encodeHTML} from '../../util/format';
 import createGraphFromNodeEdge from '../helper/createGraphFromNodeEdge';
+import LegendVisualProvider from '../../visual/LegendVisualProvider';
 
 var GraphSeries = echarts.extendSeriesModel({
 
@@ -32,10 +33,14 @@ var GraphSeries = echarts.extendSeriesModel({
     init: function (option) {
         GraphSeries.superApply(this, 'init', arguments);
 
+        var self = this;
+        function getCategoriesData() {
+            return self._categoriesData;
+        }
         // Provide data for legend select
-        this.legendDataProvider = function () {
-            return this._categoriesData;
-        };
+        this.legendVisualProvider = new LegendVisualProvider(
+            getCategoriesData, getCategoriesData
+        );
 
         this.fillDataTextStyle(option.edges || option.links);
 

src/chart/pie/PieSeries.js

@@ -24,6 +24,7 @@ import * as modelUtil from '../../util/model';
 import {getPercentWithPrecision} from '../../util/number';
 import dataSelectableMixin from '../../component/helper/selectableMixin';
 import {retrieveRawAttr} from '../../data/helper/dataProvider';
+import LegendVisualProvider from '../../visual/LegendVisualProvider';
 
 
 var PieSeries = echarts.extendSeriesModel({
@@ -36,9 +37,9 @@ var PieSeries = echarts.extendSeriesModel({
 
         // Enable legend selection for each data item
         // Use a function instead of direct access because data reference may changed
-        this.legendDataProvider = function () {
-            return this.getRawData();
-        };
+        this.legendVisualProvider = new LegendVisualProvider(
+            zrUtil.bind(this.getData, this), zrUtil.bind(this.getRawData, this)
+        );
 
         this.updateSelectedMap(this._createSelectableList());
 

src/chart/radar/RadarSeries.js

@@ -21,6 +21,7 @@ import SeriesModel from '../../model/Series';
 import createListSimply from '../helper/createListSimply';
 import * as zrUtil from 'zrender/src/core/util';
 import {encodeHTML} from '../../util/format';
+import LegendVisualProvider from '../../visual/LegendVisualProvider';
 
 var RadarSeries = SeriesModel.extend({
 
@@ -35,9 +36,10 @@ var RadarSeries = SeriesModel.extend({
 
         // Enable legend selection for each data item
         // Use a function instead of direct access because data reference may changed
-        this.legendDataProvider = function () {
-            return this.getRawData();
-        };
+        this.legendVisualProvider = new LegendVisualProvider(
+            zrUtil.bind(this.getData, this), zrUtil.bind(this.getRawData, this)
+        );
+
     },
 
     getInitialData: function (option, ecModel) {

src/chart/themeRiver/ThemeRiverSeries.js

@@ -24,6 +24,7 @@ import List from '../../data/List';
 import * as zrUtil from 'zrender/src/core/util';
 import {groupData} from '../../util/model';
 import {encodeHTML} from '../../util/format';
+import LegendVisualProvider from '../../visual/LegendVisualProvider';
 
 var DATA_NAME_INDEX = 2;
 
@@ -49,9 +50,9 @@ var ThemeRiverSeries = SeriesModel.extend({
         // Put this function here is for the sake of consistency of code style.
         // Enable legend selection for each data item
         // Use a function instead of direct access because data reference may changed
-        this.legendDataProvider = function () {
-            return this.getRawData();
-        };
+        this.legendVisualProvider = new LegendVisualProvider(
+            zrUtil.bind(this.getData, this), zrUtil.bind(this.getRawData, this)
+        );
     },
 
     /**

src/component/legend/LegendModel.js

@@ -111,9 +111,9 @@ var LegendModel = echarts.extendComponentModel({
             availableNames.push(seriesName);
             var isPotential;
 
-            if (seriesModel.legendDataProvider) {
-                var data = seriesModel.legendDataProvider();
-                var names = data.mapArray(data.getName);
+            if (seriesModel.legendVisualProvider) {
+                var provider = seriesModel.legendVisualProvider;
+                var names = provider.getAllNames();
 
                 if (!ecModel.isSeriesFiltered(seriesModel)) {
                     availableNames = availableNames.concat(names);

src/component/legend/LegendView.js

@@ -175,7 +175,7 @@ export default echarts.extendComponentView({
                 return;
             }
 
-            // Series legend
+            // Legend to control series.
             if (seriesModel) {
                 var data = seriesModel.getData();
                 var color = data.getVisual('color');
@@ -211,22 +211,24 @@ export default echarts.extendComponentView({
                 legendDrawnMap.set(name, true);
             }
             else {
-                // Data legend of pie, funnel
+                // Legend to control data. In pie and funnel.
                 ecModel.eachRawSeries(function (seriesModel) {
+
                     // In case multiple series has same data name
                     if (legendDrawnMap.get(name)) {
                         return;
                     }
 
-                    if (seriesModel.legendDataProvider) {
-                        var data = seriesModel.legendDataProvider();
-                        var idx = data.indexOfName(name);
-                        if (idx < 0) {
+                    if (seriesModel.legendVisualProvider) {
+                        var provider = seriesModel.legendVisualProvider;
+                        if (!provider.containName(name)) {
                             return;
                         }
 
-                        var color = data.getItemVisual(idx, 'color');
-                        var borderColor = data.getItemVisual(idx, 'borderColor');
+                        var idx = provider.indexOfName(name);
+
+                        var color = provider.getItemVisual(idx, 'color');
+                        var borderColor = provider.getItemVisual(idx, 'borderColor');
 
                         var legendSymbolType = 'roundRect';
 

src/model/Series.js

@@ -62,11 +62,11 @@ var SeriesModel = ComponentModel.extend({
     defaultOption: null,
 
     /**
-     * Data provided for legend
-     * @type {Function}
+     * legend visual provider to the legend component
+     * @type {Object}
      */
     // PENDING
-    legendDataProvider: null,
+    legendVisualProvider: null,
 
     /**
      * Access path of color for visual

src/visual/LegendVisualProvider.js

+/*
+* 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.
+*/
+
+
+/**
+ * LegendVisualProvider is an bridge that pick encoded color from data and
+ * provide to the legend component.
+ * @param {Function} getDataWithEncodedVisual Function to get data after filtered. It stores all the encoding info
+ * @param {Function} getRawData Function to get raw data before filtered.
+ */
+function LegendVisualProvider(getDataWithEncodedVisual, getRawData) {
+    this.getAllNames = function () {
+        var rawData = getRawData();
+        // We find the name from the raw data. In case it's filtered by the legend component.
+        // Normally, the name can be found in rawData, but can't be found in filtered data will display as gray.
+        return rawData.mapArray(rawData.getName);
+    };
+
+    this.containName = function (name) {
+        var rawData = getRawData();
+        return rawData.indexOfName(name) >= 0;
+    };
+
+    this.indexOfName = function (name) {
+        // Only get data when necessary.
+        // Because LegendVisualProvider constructor may be new in the stage that data is not prepared yet.
+        // Invoking Series#getData immediately will throw an error.
+        var dataWithEncodedVisual = getDataWithEncodedVisual();
+        return dataWithEncodedVisual.indexOfName(name);
+    };
+
+    this.getItemVisual = function (dataIndex, key) {
+        // Get encoded visual properties from final filtered data.
+        var dataWithEncodedVisual = getDataWithEncodedVisual();
+        return dataWithEncodedVisual.getItemVisual(dataIndex, key);
+    };
+}
+
+export default LegendVisualProvider;
\ No newline at end of file

src/visual/dataColor.js

@@ -68,33 +68,20 @@ export default function (seriesType) {
                             dataAll.getName(rawIdx) || (rawIdx + ''), seriesModel.__paletteScope,
                             dataAll.count()
                         );
-                    // Legend may use the visual info in data before processed
-                    dataAll.setItemVisual(rawIdx, 'color', color);
-
                     // Data is not filtered
                     if (filteredIdx != null) {
                         data.setItemVisual(filteredIdx, 'color', color);
                     }
                 }
-                else {
-                    // Set data all color for legend
-                    dataAll.setItemVisual(rawIdx, 'color', singleDataColor);
-                }
 
                 if (!singleDataBorderColor) {
                     var borderColor = itemModel.get('itemStyle.borderColor');
-                    // Legend may use the visual info in data before processed
-                    dataAll.setItemVisual(rawIdx, 'borderColor', borderColor);
 
                     // Data is not filtered
                     if (filteredIdx != null) {
                         data.setItemVisual(filteredIdx, 'borderColor', borderColor);
                     }
                 }
-                else {
-                    // Set data all borderColor for legend
-                    dataAll.setItemVisual(rawIdx, 'borderColor', singleDataBorderColor);
-                }
             });
         }
     };

test/legend-visualMapColor.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>
+
+
+
+
+        <script>
+        require(['echarts'/*, 'map/js/china' */], function (echarts) {
+            var option;
+            option = {
+                "dataset": [
+                    {
+                    "source": [
+                        [
+                            "Mark3",
+                            "Mark3_desc",
+                            "Role4",
+                            "Role4_desc"
+                        ],
+                        [
+                            "01",
+                            "高档",
+                            6789,
+                            "6789.00"
+                        ],
+                        [
+                            "03",
+                            "中档",
+                            9546,
+                            "9546.00"
+                        ],
+                        [
+                            "04",
+                            "低档",
+                            16892,
+                            "16892.00"
+                        ]
+                    ]
+                    }
+                ],
+                "series": [
+                    {
+                        "type": "pie",
+                        "datasetIndex": 0,
+                        "name": "销售数量",
+                        "encode": {
+                            "value": "Role4",
+                            "itemName": "Mark3_desc"
+                        }
+                    }
+                ],
+                "visualMap": [
+                    {
+                        "show": false,
+                        "inRange": {
+                            "color": [
+                                "#6EB9FF",
+                                "#99DFA2",
+                                "#FDAD29"
+                            ]
+                        },
+                        "dataDefIndex": 0,
+                        "field": "FA_XS_MONTH.JGDC",
+                        "type": "piecewise",
+                        "categories": [
+                            "高档",
+                            "中档",
+                            "低档"
+                        ],
+                        "dimension": "Mark3_desc",
+                        "seriesIndex": 0
+                    }
+                ],
+                "legend": {
+                    "show": true
+                }
+            };
+
+            var chart = testHelper.create(echarts, 'main0', {
+                title: [
+                    'Legend use color from visualMap',
+                    'Test case from #10766'
+                ],
+                option: option
+            });
+        });
+        </script>
+
+
+        <script>
+        require(['echarts'/*, 'map/js/china' */], function (echarts) {
+            var data = [
+                {value:335, name:'直接访问'},
+                {value:310, name:'邮件营销'},
+                {value:274, name:'联盟广告'},
+                {value:235, name:'视频广告'},
+                {value:400, name:'搜索引擎'}
+            ].sort(function (a, b) { return a.value - b.value; });
+            var option = {
+                backgroundColor: '#2c343c',
+
+                legend: {
+                    textStyle: {
+                        color: '#fff'
+                    }
+                },
+                visualMap: {
+                    show: false,
+                    min: 200,
+                    max: 600,
+                    inRange: {
+                        colorLightness: [0, 1]
+                    }
+                },
+                series : [
+                    {
+                        name:'访问来源',
+                        type:'pie',
+                        radius : '55%',
+                        center: ['50%', '50%'],
+                        data: data,
+                        roseType: 'radius',
+                        label: {
+                            normal: {
+                                textStyle: {
+                                    color: 'rgba(255, 255, 255, 0.3)'
+                                }
+                            }
+                        },
+                        labelLine: {
+                            normal: {
+                                lineStyle: {
+                                    color: 'rgba(255, 255, 255, 0.3)'
+                                },
+                                smooth: 0.2,
+                                length: 10,
+                                length2: 20
+                            }
+                        },
+                        itemStyle: {
+                            normal: {
+                                color: '#c23531',
+                                shadowBlur: 200,
+                                shadowColor: 'rgba(0, 0, 0, 0.5)'
+                            }
+                        },
+
+                        animationType: 'scale',
+                        animationEasing: 'elasticOut',
+                        animationDelay: function (idx) {
+                            return Math.random() * 200;
+                        }
+                    }
+                ]
+            };
+
+            var chart = testHelper.create(echarts, 'main1', {
+                title: [
+                    'Legend use color from lightness visualMap.'
+                ],
+                option: option
+            });
+        });
+        </script>
+
+        <script>
+        require(['echarts'/*, 'map/js/china' */], function (echarts) {
+            var option = {
+                legend: {
+                },
+                series: {
+                    type: 'pie',
+                    itemStyle: {
+                        color: function (params) {
+                            var colorList = ['#ff3322', '#232211', '#aabbcc'];
+                            return colorList[params.dataIndex];
+                        }
+                    },
+                    data: [
+                        {name: 'First', value: 1222},
+                        {name: 'Second', value: 2333},
+                        {name: 'Third', value: 3444},
+                    ]
+                }
+            };
+
+            var chart = testHelper.create(echarts, 'main2', {
+                title: [
+                    'Legend use color from callback'
+                ],
+                option: option
+            });
+        });
+        </script>
+    </body>
+</html>
+

test/runTest/actions/__meta__.json

@@ -86,6 +86,7 @@
   "label-position": 1,
   "largeLine-tooltip": 1,
   "legend": 6,
+  "legend-visualMapColor": 2,
   "line": 1,
   "line-animation": 1,
   "map": 3,

test/runTest/actions/legend-visualMapColor.json

+[{"name":"Action 1","ops":[{"type":"mousemove","time":108,"x":248,"y":111},{"type":"mousemove","time":312,"x":288,"y":95},{"type":"mousemove","time":524,"x":323,"y":87},{"type":"mousemove","time":725,"x":325,"y":87},{"type":"mousedown","time":786,"x":325,"y":87},{"type":"mouseup","time":904,"x":325,"y":87},{"time":905,"delay":400,"type":"screenshot-auto"},{"type":"mousedown","time":1341,"x":325,"y":87},{"type":"mouseup","time":1423,"x":325,"y":87},{"time":1424,"delay":400,"type":"screenshot-auto"},{"type":"mousemove","time":1699,"x":325,"y":86},{"type":"mousemove","time":1899,"x":374,"y":84},{"type":"mousemove","time":2100,"x":382,"y":84},{"type":"mousedown","time":2155,"x":382,"y":84},{"type":"mouseup","time":2240,"x":382,"y":84},{"time":2241,"delay":400,"type":"screenshot-auto"},{"type":"mousemove","time":2483,"x":383,"y":85},{"type":"mousemove","time":2684,"x":431,"y":84},{"type":"mousemove","time":2890,"x":450,"y":86},{"type":"mousedown","time":3043,"x":450,"y":86},{"type":"mouseup","time":3133,"x":450,"y":86},{"time":3134,"delay":400,"type":"screenshot-auto"},{"type":"mousemove","time":3284,"x":449,"y":86},{"type":"mousemove","time":3484,"x":332,"y":88},{"type":"mousemove","time":3690,"x":327,"y":88},{"type":"mousedown","time":3914,"x":327,"y":88},{"type":"mouseup","time":4006,"x":327,"y":88},{"time":4007,"delay":400,"type":"screenshot-auto"},{"type":"mousedown","time":4524,"x":327,"y":88},{"type":"mouseup","time":4629,"x":327,"y":88},{"time":4630,"delay":400,"type":"screenshot-auto"},{"type":"mousemove","time":4686,"x":327,"y":88},{"type":"mousemove","time":4896,"x":370,"y":84},{"type":"mousemove","time":5110,"x":378,"y":83},{"type":"mousedown","time":5196,"x":378,"y":83},{"type":"mouseup","time":5278,"x":378,"y":83},{"time":5279,"delay":400,"type":"screenshot-auto"},{"type":"mousemove","time":5370,"x":382,"y":83},{"type":"mousemove","time":5570,"x":467,"y":93},{"type":"mousemove","time":5779,"x":471,"y":93},{"type":"mousedown","time":5797,"x":471,"y":93},{"type":"mouseup","time":5929,"x":471,"y":93},{"time":5930,"delay":400,"type":"screenshot-auto"}],"scrollY":0,"scrollX":0,"timestamp":1574957708591},{"name":"Action 2","ops":[{"type":"mousemove","time":204,"x":588,"y":236},{"type":"mousemove","time":411,"x":579,"y":218},{"type":"mousemove","time":628,"x":578,"y":215},{"type":"mousedown","time":662,"x":578,"y":215},{"type":"mouseup","time":761,"x":578,"y":215},{"time":762,"delay":400,"type":"screenshot-auto"},{"type":"mousemove","time":1238,"x":577,"y":215},{"type":"mousemove","time":1439,"x":493,"y":209},{"type":"mousemove","time":1648,"x":414,"y":206},{"type":"mousemove","time":1867,"x":412,"y":207},{"type":"mousedown","time":1932,"x":412,"y":207},{"type":"mouseup","time":2000,"x":412,"y":207},{"time":2001,"delay":400,"type":"screenshot-auto"},{"type":"mousemove","time":2357,"x":411,"y":207},{"type":"mousemove","time":2564,"x":347,"y":211},{"type":"mousemove","time":2783,"x":345,"y":211},{"type":"mousedown","time":2798,"x":345,"y":211},{"type":"mouseup","time":2896,"x":345,"y":211},{"time":2897,"delay":400,"type":"screenshot-auto"}],"scrollY":334,"scrollX":0,"timestamp":1574957722873}]
\ No newline at end of file