ChartBar 柱状图

用于展示数据的柱状图组件，支持横向和纵向显示，支持多个系列数据。

基础用法

基础的横向柱状图用法。

查看代码

<template>
  <MChartBar
    :series="[
      { name: '系列1', data: [100, 200, 300, 400, 500] }
    ]"
    :categories="['类别1', '类别2', '类别3', '类别4', '类别5']"
  />
</template>

<script setup>
import { MChartBar } from '@jqkgg/m-ui'
</script>

多个系列

支持显示多个系列的数据，每个系列对应一个柱子。

查看代码

<template>
  <MChartBar
    :series="[
      { name: '鉴定人次', data: [2131, 2131, 2131, 2131, 2131, 2131, 2131] },
      { name: '获证人次', data: [2324, 2324, 2324, 2324, 2324, 2324, 2324] }
    ]"
    :categories="['涪陵区', '渝中区', '大渡口区', '江北区', '沙坪坝区', '九龙坡区', '南岸区']"
  />
</template>

<script setup>
import { MChartBar } from '@jqkgg/m-ui'
</script>

纵向柱状图

通过 direction 属性设置为 vertical 来显示纵向柱状图。

查看代码

<template>
  <MChartBar
    :series="[
      { name: '系列1', data: [100, 200, 300, 400, 500] },
      { name: '系列2', data: [150, 250, 350, 450, 550] }
    ]"
    :categories="['类别1', '类别2', '类别3', '类别4', '类别5']"
    direction="vertical"
    :height="300"
  />
</template>

<script setup>
import { MChartBar } from '@jqkgg/m-ui'
</script>

自定义颜色

通过 colors 属性可以自定义柱子的颜色，支持透明度设置。

查看代码

<template>
  <MChartBar
    :series="[
      { name: '系列1', data: [100, 200, 300, 400, 500] },
      { name: '系列2', data: [150, 250, 350, 450, 550] },
      { name: '系列3', data: [80, 180, 280, 380, 480] }
    ]"
    :categories="['类别1', '类别2', '类别3', '类别4', '类别5']"
    :colors="[
      'rgba(66, 133, 244, 0.6)',
      'rgba(255, 193, 7, 0.8)',
      'rgba(76, 175, 80, 1)'
    ]"
  />
</template>

<script setup>
import { MChartBar } from '@jqkgg/m-ui'
</script>

系列自定义颜色

每个系列可以单独设置颜色，通过 series 中的 color 属性。

查看代码

<template>
  <MChartBar
    :series="[
      { name: '系列1', data: [100, 200, 300, 400, 500], color: 'rgba(255, 99, 132, 0.8)' },
      { name: '系列2', data: [150, 250, 350, 450, 550], color: 'rgba(54, 162, 235, 0.8)' }
    ]"
    :categories="['类别1', '类别2', '类别3', '类别4', '类别5']"
  />
</template>

<script setup>
import { MChartBar } from '@jqkgg/m-ui'
</script>

隐藏图例

通过 show-legend 属性可以隐藏图例。

查看代码

<template>
  <MChartBar
    :series="[
      { name: '系列1', data: [100, 200, 300, 400, 500] },
      { name: '系列2', data: [150, 250, 350, 450, 550] }
    ]"
    :categories="['类别1', '类别2', '类别3', '类别4', '类别5']"
    :show-legend="false"
  />
</template>

<script setup>
import { MChartBar } from '@jqkgg/m-ui'
</script>

自定义尺寸和间距

通过 height、width、bar-gap 和 bar-category-gap 属性可以自定义图表尺寸和柱子间距。

查看代码

<template>
  <MChartBar
    :series="[
      { name: '系列1', data: [100, 200, 300, 400, 500] },
      { name: '系列2', data: [150, 250, 350, 450, 550] }
    ]"
    :categories="['类别1', '类别2', '类别3', '类别4', '类别5']"
    :height="400"
    :bar-gap="15"
    :bar-category-gap="30"
  />
</template>

<script setup>
import { MChartBar } from '@jqkgg/m-ui'
</script>

堆叠柱状图

通过 stack 属性可以将多个系列堆叠在一起显示。具有相同 stack 值的系列会堆叠在同一个柱子上。

基础堆叠

所有系列使用相同的 stack 值，实现完全堆叠。

查看代码

<template>
  <MChartBar
    :series="[
      { name: '系列1', data: [100, 200, 300, 400, 500], stack: 'total' },
      { name: '系列2', data: [150, 250, 350, 450, 550], stack: 'total' },
      { name: '系列3', data: [80, 180, 280, 380, 480], stack: 'total' }
    ]"
    :categories="['类别1', '类别2', '类别3', '类别4', '类别5']"
    direction="vertical"
    :height="300"
  />
</template>

<script setup>
import { MChartBar } from '@jqkgg/m-ui'
</script>

分组堆叠

不同的 stack 值可以创建多个堆叠组，实现分组堆叠效果。

查看代码

<template>
  <MChartBar
    :series="[
      { name: '产品A', data: [120, 132, 101, 134, 90], stack: 'product' },
      { name: '产品B', data: [220, 182, 191, 234, 290], stack: 'product' },
      { name: '服务A', data: [150, 232, 201, 154, 190], stack: 'service' },
      { name: '服务B', data: [320, 332, 301, 334, 390], stack: 'service' }
    ]"
    :categories="['类别1', '类别2', '类别3', '类别4', '类别5']"
    direction="vertical"
    :height="300"
  />
</template>

<script setup>
import { MChartBar } from '@jqkgg/m-ui'
</script>

滚动展示

当数据量较大时，组件支持自动滚动展示。鼠标悬浮时暂停滚动，移开后恢复滚动。

查看代码

<template>
  <MChartBar
    :series="[
      { name: '系列1', data: [100, 200, 300, 400, 500, 600, 700, 800, 900, 1000, 1100, 1200, 1300, 1400, 1500] },
      { name: '系列2', data: [150, 250, 350, 450, 550, 650, 750, 850, 950, 1050, 1150, 1250, 1350, 1450, 1550] }
    ]"
    :categories="[
      '类别1', '类别2', '类别3', '类别4', '类别5', '类别6', '类别7', '类别8',
      '类别9', '类别10', '类别11', '类别12', '类别13', '类别14', '类别15'
    ]"
    :scroll-threshold="10"
    :scroll-speed="1"
    :scroll-interval="2000"
    :visible-count="8"
  />
</template>

<script setup>
import { MChartBar } from '@jqkgg/m-ui'
</script>

混合图表

通过 options 属性可以实现柱状图和折线图的混合展示。

查看代码

<template>
  <MChartBar :options="mixedChartOptions" />
</template>

<script setup>
import { ref } from 'vue'
import { MChartBar } from '@jqkgg/m-ui'

const mixedChartOptions = ref({
  tooltip: {
    trigger: 'axis',
    axisPointer: { type: 'cross' }
  },
  legend: {
    data: ['销售额', '毛利率']
  },
  xAxis: [
    {
      type: 'category',
      data: ['1月', '2月', '3月', '4月', '5月', '6月', '7月', '8月', '9月', '10月', '11月', '12月'],
      axisPointer: { type: 'shadow' }
    }
  ],
  yAxis: [
    {
      type: 'value',
      name: '销售额',
      axisLabel: { formatter: '{value} 万元' }
    },
    {
      type: 'value',
      name: '毛利率',
      axisLabel: { formatter: '{value} %' }
    }
  ],
  series: [
    {
      name: '销售额',
      type: 'bar',
      data: [2.0, 4.9, 7.0, 23.2, 25.6, 76.7, 135.6, 162.2, 32.6, 20.0, 6.4, 3.3]
    },
    {
      name: '毛利率',
      type: 'line',
      yAxisIndex: 1,
      data: [2.0, 2.2, 3.3, 4.5, 6.3, 10.2, 20.3, 23.4, 23.0, 16.5, 12.0, 6.2]
    }
  ]
})
</script>

完全自定义配置

通过 options 属性可以完全自定义 ECharts 配置项，传入后将以 options 为准，忽略其他属性。这允许你使用 ECharts 的所有功能。

查看代码

<template>
  <MChartBar
    :options="{
      xAxis: {
        type: 'category',
        data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun']
      },
      yAxis: {
        type: 'value'
      },
      series: [{
        data: [120, 200, 150, 80, 70, 110, 130],
        type: 'bar',
        itemStyle: {
          color: {
            type: 'linear',
            x: 0,
            y: 0,
            x2: 0,
            y2: 1,
            colorStops: [
              { offset: 0, color: '#83bff6' },
              { offset: 0.5, color: '#188df0' },
              { offset: 1, color: '#188df0' }
            ]
          }
        }
      }]
    }"
  />
</template>

<script setup>
import { MChartBar } from '@jqkgg/m-ui'
</script>

注意：使用 options 时，需要参考 ECharts 柱状图配置项文档 来配置所有选项。

API

Props

参数	说明	类型	可选值	默认值
series	系列数据，默认一个系列	ChartBarSeries[]	—	[{ name: '系列1', data: [100, 200, 300, 400, 500] }]
categories	类别数据	string[]	—	['类别1', '类别2', '类别3', '类别4', '类别5']
direction	方向，横向或纵向	ChartBarDirection	horizontal / vertical	horizontal
colors	颜色数组，默认三个颜色，作用于柱子	string[]	—	['rgba(66, 133, 244, 0.8)', 'rgba(255, 193, 7, 0.8)', 'rgba(76, 175, 80, 0.8)']
showLegend	是否显示图例	boolean	—	true
height	图表高度	number | string	—	'auto'
width	图表宽度	number | string	—	'100%'
barGap	同一类别柱子间距	number	—	10
barCategoryGap	柱子间距	number	—	20
scrollThreshold	启用滚动的数据量阈值，超过此数量自动启用滚动	number	—	10
scrollSpeed	滚动速度（每次滚动的数据项数量）	number	—	1
scrollInterval	滚动间隔（毫秒）	number	—	2000
enableScroll	是否启用滚动（undefined 表示自动判断）	boolean | undefined	—	undefined
visibleCount	每次显示的数据项数量	number	—	8
options	完全自定义的 ECharts 配置项，传入后将以 options 为准，忽略其他属性	object 注意：options 的类型定义请参考 ECharts 柱状图配置项文档	—	undefined

ChartBarSeries

参数	说明	类型	可选值	默认值
name	系列名称	string	—	—
data	系列数据数组	number[]	—	—
color	系列颜色（可选，会覆盖 colors 中的对应颜色）	string	—	—
stack	堆叠标识，相同 stack 值的系列会堆叠在一起	string	—	—