Fix #6932 (themeRiver legend color is incorrect)

b3485c4e · sushuang · 992b0a9f · b3485c4e · b3485c4e · b3485c4e
6 changed file
--- a/dist/echarts.js
+++ b/dist/echarts.js
--- a/dist/echarts.js.map
+++ b/dist/echarts.js.map
--- a/src/chart/themeRiver/ThemeRiverSeries.js
+++ b/src/chart/themeRiver/ThemeRiverSeries.js
@@ -30,7 +30,7 @@ var ThemeRiverSeries = SeriesModel.extend({
    init: function (option) {
        ThemeRiverSeries.superApply(this, 'init', arguments);

-        // Put this function here is for the sake of consistency of code
+        // 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 () {

--- a/src/chart/themeRiver/ThemeRiverView.js
+++ b/src/chart/themeRiver/ThemeRiverView.js
@@ -19,7 +19,6 @@ export default echarts.extendChartView({

    render: function (seriesModel, ecModel, api) {
        var data = seriesModel.getData();
-        var rawData = seriesModel.getRawData();

        if (!data.count()) {
            return;
@@ -69,7 +68,7 @@ export default echarts.extendChartView({
                points0.push([x, y0]);
                points1.push([x, y0 + y]);

-                color = rawData.getItemVisual(indices[j], 'color');
+                color = data.getItemVisual(indices[j], 'color');
            }

            var polygon;

--- a/src/chart/themeRiver/themeRiverVisual.js
+++ b/src/chart/themeRiver/themeRiverVisual.js
@@ -3,16 +3,30 @@
 * @author  Deqing Li(annong035@gmail.com)
 */

+import {createHashMap} from 'zrender/src/core/util';
+
 export default function (ecModel) {
    ecModel.eachSeriesByType('themeRiver', function (seriesModel) {
        var data = seriesModel.getData();
        var rawData = seriesModel.getRawData();
        var colorList = seriesModel.get('color');
+        var idxMap = createHashMap();
+
+        data.each(function (idx) {
+            idxMap.set(data.getRawIndex(idx), idx);
+        });

-        data.each(function (index) {
-            var name = data.getName(index);
+        rawData.each(function (rawIndex) {
+            var name = rawData.getName(rawIndex);
            var color = colorList[(seriesModel.nameMap.get(name) - 1) % colorList.length];
-            rawData.setItemVisual(index, 'color', color);
+
+            rawData.setItemVisual(rawIndex, 'color', color);
+
+            var idx = idxMap.get(rawIndex);
+
+            if (idx != null) {
+                data.setItemVisual(idx, 'color', color);
+            }
        });
    });
 }
\ No newline at end of file
--- a/test/themeRiver.html
+++ b/test/themeRiver.html
@@ -2,6 +2,7 @@
    <head>
        <meta charset="utf-8">
        <meta name="viewport" content="width=device-width, initial-scale=1" />
+        <!-- <script src="lib/esl.js"></script> -->
        <script src="lib/esl.js"></script>
        <script src="lib/config.js"></script>
        <script src="lib/jquery.min.js"></script>
@@ -19,10 +20,11 @@

            require([
                'echarts'
-                // 'echarts/chart/themeRiver',
-                // 'echarts/component/legend',
-                // 'echarts/component/singleAxis',
-                // 'echarts/component/tooltip',
+                // 'echarts/src/echarts',
+                // 'echarts/src/chart/themeRiver',
+                // 'echarts/src/component/legend',
+                // 'echarts/src/component/singleAxis',
+                // 'echarts/src/component/tooltip',
                ], function (echarts) {

                    var chart = echarts.init(document.getElementById('main'));