柱状图颜色不对应的BUG

[lvvlan]

<template>
  <ve-histogram :data="chartData" :settings="chartSettings"></ve-histogram>
</template>

<script>
  module.exports = {
    created: function () {
      this.chartData = {
        columns: ['日期', '成本', '利润', '占比', '其他'],
        rows: [
          { '成本': 1523, '日期': '1月1日', '利润': 1523, '占比': 1122, '其他': 100 },
          { '成本': 1223, '日期': '1月2日', '利润': 1523, '占比': 1012, '其他': 100 },
          { '成本': 2123, '日期': '1月3日', '利润': 1523, '占比': 1314, '其他': 100 },
          { '成本': 4123, '日期': '1月4日', '利润': 1523, '占比': 1111, '其他': 100 }
        ]
      }
      this.chartSettings = {
        metrics: ['成本', '利润', '占比', '其他'],
        dimension: ['日期']
      }
    }
  }
</script>

以上代码，成本、利润、占比、其他默认的颜色对应关系为：绿、蓝、红、黄
把metrics中的利润设为''的时候，对应的颜色应为：绿、红、黄，此时的显示是正确的
再把metrics中的占比设为''的时候，对应的颜色应为：绿、黄，而此时的展示是绿、红
实测修改任意2项及以上的metrics都会导致颜色不对应
而折线图却没有这个问题，修改折线图中任意的metrics都能对应正确的颜色

[xiguaxigua]

设置为 '' 是应用在什么场景下的呢？
测试了一下，如果是将 任意2项及以上的metrics 修改为非空都不会出现问题。

[lvvlan]

测试了下，如果是将metrics的值改为非空，颜色是可以正确对应，但图例(legend)会保留显示设置的非空项。
主要应用场景是，某些时候想把其中的某条柱子隐藏，并且对应的颜色也会隐去，柱子的隐藏不会打乱原有颜色的顺序。
将折线图中的metrics任意项设置为''，不会打乱原有的颜色顺序，主要想要的效果其实是跟折线图的这个操作统一的。

[xiguaxigua]

这个需求暂时没有太好的办法实现。

[lvvlan]

好吧，可是为什么折线图没问题呢？折线图和柱图的内部实现机制还是不一致的吗？

[xiguaxigua]

写了一个例子，看下是这种效果的吗？ https://jsfiddle.net/1Le0wps5/334/

[lvvlan]

https://jsfiddle.net/1Le0wps5/341/
稍微改了下，当修改2个的时候就会出现颜色不对应的问题

[xiguaxigua]

嗯，似乎没有太好的办法处理这个，不过有一个不太好的办法可以实现 https://jsfiddle.net/1Le0wps5/353/

[lvvlan]

类似的办法我之前也考虑过。我之前一直用的是折线图，用直接设置metrics为''并没出现颜色不对应这种问题，现在的场景是某种时刻下要切换到柱图，所以就浮现出了这个问题。
想问下这个问题会列入到后续更新计划中吗~

[xiguaxigua]

这个看上去是 echarts 本身的问题，不过下一个大版本更新的时候会考虑想办法做兼容。

[lvvlan]

好的~ 感谢解答~~