Skip to content

echarts-barx-stack

示例

vue
<template>
    <echarts-barx :data="data" height="200px" stack />
</template>

<script lang="ts" setup>
import { ref } from 'vue'
import { EchartsBarx } from 'v3-echarts'

const data = ref({
    axis: ['衬衫', '羊毛衫', '雪纺衫', '裤子', '高跟鞋', '袜子'],
    series: [
        {
            name: '2023 销量',
            data: [5, 20, 36, 10, 10, 20]
        },
        {
            name: '2024 销量',
            data: [10, 10, 5, 60, 30, 40]
        }
    ]
})
</script>

props

参数说明类型默认值
width容器高度string100%
height容器高度string100%
data数据源object-
color柱状图颜色array-
bar-width柱状图宽度number15
stack是否堆叠booleanfalse
radius圆角number0
single-color是否独立颜色booleanfalse
show-background是否显示背景booleanfalse
data-zoom是否显示可视区域booleanfalse
data-zoom-number可视区域显示数量number4
data-zoom-color可视区域工具颜色stringcolor[0]
carousel是否启用数据轮播booleanfalse
interval数据轮播间隔时间number5
smooth是否为曲线(需要 series.type 为 'line' 时生效)booleanfalse
areaGradient是否开启区域渐变(需要 series.type 为 'line' 时生效)booleanfalse
symbol图形(需要 series.type 为 'pictorial' 时生效)string-