echarts混搭图表设置visualMap导致柱状图背景渐变色失效

情景描述：

echarts: 4.9.0

在vue项目中同一个canvas中渲染地图和柱状图两个图表，其中地图颜色使用visualMap设置，当给柱状图柱条设置渐变背景色时发现没有效果。

原来的配置：（配置有所简化）

option: {
    xAxis: { type: 'value' },
    yAxis: { type: 'category', data: ['山东', '广东', '江苏', '河南', '浙江', '四川']},
    series: [
        {
            type: 'map',
            mapType: 'china',
            data: this.mapData
        }, {
            type: 'bar',
            data: this.barData,
            itemStyle: {
                normal: {
                  color: function(params) {
                    var colorList = [
                      ['#CBD0B2', '#CBD0B2'], ['#CBD0B2', '#FBFDF1'],
                      ['#79D9C5', '#DEFFF9'], ['#00A896', '#8AF3ED'],
                      ['#056B95', '#58C2EE'], ['#193969', '#599FE1']
                    ]
                    return new echarts.graphic.LinearGradient(
                      0, 0, 1, 0,
                      [
                        {
                          offset: 0,
                          color: colorList[params.dataIndex][0]
                        },
                        {
                          offset: 1,
                          color: colorList[params.dataIndex][1]
                        }
                      ]
                    )
                  }
                }
              }
        }
    ],
    visualMap: [{
        type: 'piecewise',
            pieces: [
              {
                min: 40000,
                label: '40000人以上',
                color: '#193969'
              },
              {
                min: 30000,
                max: 40000,
                label: '30000-40000人',
                color: '#056B95'
              },
              {
                min: 20000,
                max: 30000,
                label: '20000-30000人',
                color: '#00A896'
              },
              {
                min: 10000,
                max: 20000,
                label: '10000-20000人',
                color: '#79D9C5'
              },
              { min: 0, max: 10000, label: '0-10000人', color: '#F0F3BD' }
            ],
            itemWidth: 14,
            itemHeight: 14,
            itemGap: 5,
            textStyle: {
              color: '#fff',
              fontSize: 9
            }
    }]
}
           

柱条的渐变色并没有生效，反反复复对照着官网好几遍，试过去掉normal，注释掉map，查看echarts版本以及在网上搜罗各种，但是都没有找到答案，心态几近崩溃，因为你就是想不明白为什么原原本本从官网粘下来的代码就是不起效。带着疑问，做了另外一个页面的柱条渐变颜色，哎，起效了，于是在那一刻似乎明白了什么，回头把visualMap注释后，见证奇迹的时刻就这样发生了。

解决：

在visualMap里面加上seriesIndex: 0表示取map这个系列的数据。