Tui Plus Vapor

Appearance

柱状图演示 ​

柱状图演示https://yundie.xyz/x-charts-demo/index.html?type=column

参考配置 ​

基础柱状图 ​

html
<template>
  <view class="container">
    <t-xcharts
      ref="chart"
      :option="chartOption"
    ></t-xcharts>
  </view>
</template>

<script setup>
import { ref } from 'vue';

const chartOption = ref({
  type: 'column',
  animation: true,
  dataLabel: true,
  xAxis: {
    disableGrid: true
  },
  yAxis: {
    data: [{
      min: 0,
      max: 100
    }]
  },
  series: [{
    name: '销量',
    data: [15, 20, 45, 37, 43, 34, 50],
    color: '#2979ff'
  }],
  categories: ['周一', '周二', '周三', '周四', '周五', '周六', '周日']
});
</script>

多系列柱状图 ​

html
<template>
  <view class="container">
    <t-xcharts
      ref="chart"
      :option="chartOption"
    ></t-xcharts>
  </view>
</template>

<script setup>
import { ref } from 'vue';

const chartOption = ref({
  type: 'column',
  animation: true,
  dataLabel: true,
  xAxis: {
    disableGrid: true
  },
  yAxis: {
    data: [{
      min: 0,
      max: 100
    }]
  },
  series: [
    {
      name: '产品A',
      data: [15, 20, 45, 37, 43, 34, 50],
      color: '#2979ff'
    },
    {
      name: '产品B',
      data: [25, 30, 35, 27, 33, 44, 40],
      color: '#19be6b'
    }
  ],
  categories: ['周一', '周二', '周三', '周四', '周五', '周六', '周日']
});
</script>

堆叠柱状图 ​

html
<template>
  <view class="container">
    <t-xcharts
      ref="chart"
      :option="chartOption"
    ></t-xcharts>
  </view>
</template>

<script setup>
import { ref } from 'vue';

const chartOption = ref({
  type: 'column',
  animation: true,
  dataLabel: true,
  stack: true,
  xAxis: {
    disableGrid: true
  },
  yAxis: {
    data: [{
      min: 0,
      max: 100
    }]
  },
  series: [
    {
      name: '产品A',
      data: [15, 20, 45, 37, 43, 34, 50],
      color: '#2979ff'
    },
    {
      name: '产品B',
      data: [25, 30, 35, 27, 33, 44, 40],
      color: '#19be6b'
    }
  ],
  categories: ['周一', '周二', '周三', '周四', '周五', '周六', '周日']
});
</script>

配置说明 ​

type ​

图表类型，设置为 'column' 表示柱状图。

series ​

数据系列配置：

  • name: 系列名称
  • data: 数据数组
  • color: 柱子颜色

categories ​

X轴分类标签数组。

stack ​

是否堆叠，设置为 true 启用堆叠效果。

dataLabel ​

是否显示数据标签。

animation ​

是否启用动画效果。