BarChart 柱状图

• 基础用法
• 标题倾斜
• 拖动缩放
• 多个类型的数据
• 水平柱状图
• 彩色柱状图
• 属性 Attributes

基础用法

<template>
  <div class="chart">
    <BarChart  
      :data="data"
      x-name="时间"
      y-name="人数"
    />
  </div>
</template>

<script>
export default {
  name: "BarBase",
  data() {
    return {
      data: [
        {
          name: "学生人数",
          data: [
            {
              label: "2018",
              value: 45
            },
            {
              label: "2019",
              value: 60
            }
          ]
        }
      ]
    };
  }
};
</script>

<style>
.chart {
  width: 100%;
  height: 300px;
}
</style>

显示代码

标题倾斜

当属数据量较多时, 横坐标的标题会可能因为挤压而显示不全。此时可设置label-rotate属性为true,让标题倾斜。

<template>
  <div class="chart">
    <bar-chart
      :data="data"
      label-rotate
     />
  </div>
</template>

<script>
export default {
  name: "BarLabelRotate",
  data() {
    return {
      data: [
        {
          name: "学生人数",
          data: [
            { label: '2010', value: 8 },
            { label: '2011', value: 10 },
            { label: '2012', value: 12 },
            { label: '2013', value: 7 },
            { label: '2014', value: 9 },
            { label: '2015', value: 16 },
            { label: '2016', value: 15 },
            { label: '2017', value: 18 },
            { label: '2018', value: 20 },
            { label: '2019', value: 5 },
            { label: '2020', value: 9 },
          ]
        }
      ]
    };
  }
};
</script>

<style>
.chart {
  width: 100%;
  height: 300px;
}
</style>

显示代码

拖动缩放

设置zoom属性为true, 显示拖动缩放工具栏。还可以传入zoom-range属性, 设置默认显示范围。

<template>
<div>
  <div class="chart">
    <bar-chart
      :data="data"
      label-rotate
      zoom
     />
  </div>
  
  <div class="chart">
    <bar-chart
      :data="data"
      label-rotate
      zoom
      :zoom-range="[20, 80]"
    />
  </div>
</div>
</template>

<script>
export default {
  name: "BarLabelRotate",
  data() {
    return {
      data: [
        {
          name: "学生人数",
          data: [
            { label: '2010', value: 8 },
            { label: '2011', value: 10 },
            { label: '2012', value: 12 },
            { label: '2013', value: 7 },
            { label: '2014', value: 9 },
            { label: '2015', value: 16 },
            { label: '2016', value: 15 },
            { label: '2017', value: 18 },
            { label: '2018', value: 20 },
            { label: '2019', value: 5 },
            { label: '2020', value: 9 },
          ]
        }
      ]
    };
  }
};
</script>

<style scoped>
.chart {
  width: 100%;
  height: 300px;
}
</style>

显示代码

多个类型的数据

<template>
  <div class="chart">
    <bar-chart :data="data" />
  </div>
</template>

<script>
export default {
  name: "BarMultiData",
  data() {
    return {
      data: [
        {
          name: "教师人数",
          data: [
            { label: "2018", value: 190 },
            { label: "2019", value: 200 }
          ]
        },
        {
          name: "学生人数",
          data: [
            { label: "2018", value: 340 },
            { label: "2019", value: 173 }
          ]
        }
      ]
    };
  }
};
</script>

<style>
.chart {
  width: 100%;
  height: 300px;
}
</style>

显示代码

水平柱状图

设置horizontal为true, 显示水平柱状图。

<template>
  <div class="chart">
    <bar-chart
      :data="data"
      horizontal
      zoom
      y-name="年份"
      x-name="人数"
     />
  </div>
</template>

<script>
export default {
  name: "BarLabelRotate",
  data() {
    return {
      data: [
        {
          name: "学生人数",
          data: [
            { label: '2010', value: 8 },
            { label: '2011', value: 10 },
            { label: '2012', value: 12 },
            { label: '2013', value: 7 },
            { label: '2014', value: 9 },
            { label: '2015', value: 16 },
            { label: '2016', value: 15 },
            { label: '2017', value: 18 },
            { label: '2018', value: 20 },
            { label: '2019', value: 5 },
            { label: '2020', value: 9 },
          ]
        }
      ]
    };
  }
};
</script>

<style scoped>
.chart {
  width: 100%;
  height: 300px;
}
</style>

显示代码

彩色柱状图

设置rainbow属性为true, 可以使同一数据显示不同颜色的柱状图

<template>
  <div class="chart">
    <bar-chart
      :data="data"
      label-rotate
      rainbow
      x-name="年份"
      y-name="人数"
     />
  </div>
</template>

<script>
export default {
  name: "BarLabelRotate",
  data() {
    return {
      data: [
        {
          name: "学生人数",
          data: [
            { label: '2010', value: 8 },
            { label: '2011', value: 10 },
            { label: '2012', value: 12 },
            { label: '2013', value: 7 },
            { label: '2014', value: 9 },
            { label: '2015', value: 16 },
            { label: '2016', value: 15 },
            { label: '2017', value: 18 },
            { label: '2018', value: 20 },
            { label: '2019', value: 5 },
            { label: '2020', value: 9 },
          ]
        }
      ]
    };
  }
};
</script>

<style scoped>
.chart {
  width: 100%;
  height: 300px;
}
</style>

显示代码

属性 Attributes