v-charts ve-bar横向柱状图（条形图）踩坑-dataZoom

最近用v-charts做图表开发比较多，分享一个ve-bar踩坑案例，后续还会更新其他的踩坑记录。欢迎大家多指正。

在开发过程中，需要实现横向的条形图，使用了ve-bar组件。由于在开发过程中，考虑到可能需要一个dataZoom配置滑动条功能，所以在代码里加入了dataZoom的初始化配置，且show设为false，想着等数据显示后，我再调dataZoom的配置。于是，代码如下：(看着似乎没问题)

<template>
  <Card class="histogram-chart" :bordered="false">
    <ve-bar
      height="400px"
      :colors="['#317dfb', '#4ece17']"
      :data="chartData1"
      :dataZoom="dataZoom"
    ></ve-bar>
  </Card>
</template>

<script>
export default {
  data () {
    return {
      dataZoom: {
        type: 'slider', // 滑动条
        show: true, // 开启
        xAxisIndex: [0],
        // left: '93%', // 滑动条位置
        start: 0, // 初始化时，滑动条宽度开始标度
        end: 80, // 初始化时，滑动条宽度结束标度
        bottom: 0
      },
      chartData1: {
        columns: ['gpuType', 'val1', 'val2'],
        rows: [
          { gpuType: 'test1', val1: 3, val2: 1 },
          { gpuType: 'test2', val1: 1, val2: 2 },
          { gpuType: 'test3', val1: 3, val2: 3 },
          { gpuType: 'test4', val1: 2, val2: 1 },
          { gpuType: 'test5', val1: 4, val2: 1 }
        ]
      }
    }
  }
}
</script>

显示结果很诡异，test5对应的val1系列的数据怎么都出不来！本以为是后端给的数据有问题，后来用静态假数据试了一下，还是出不来。

最终，我用排除法把所有与data无关的属性的相关代码全部删除，发现，把dataZoom的属性传值删除，就没问题了。

此时我就很不理解，这是为什么，dataZoom属性本来就是v-charts封装后的，怎么无法传值？ 于是，我仍然给dataZoom传值，发现之所以val1系列数据不显示，是因为，虽然我dataZoom的show为false，但是其他的配置（比如end、start属性）依然生效。

根据这个踩坑经历，我吸取了2条经验教训： 1、开发过程必须逻辑顺序干干净净，不要有其他的属性做干扰，可以避免一些不必要的踩坑。 2、不要想当然，要深入理解一些属性的用途，我想当然地认为，dataZoom在纵向的柱状图中是用来x轴的滑动，那么在横向的条形图中就是用来y轴的滑动。但是，其实，并非如此。后来我重新仔细看了dataZoom属性如下：

效果如下

以上，共勉。欢迎多多指正！