更新记录

1.0.0（2025-08-18） 下载此版本

更新柱状图

平台兼容性

uni-app(4.07)

dui-bar-chart 移动端简单柱状图

组件名：dui-bar-chart

一个移动端简单好用的、好看的柱状图，支持负数

基本用法

<template>
    <div style="height: 350px">
        <dui-bar-chart :option="option"></dui-bar-chart>
    </div>
</template>

const option = {
    title: {
        text: '每周销量报表',
        // subText: '',
        textStyle: {
          //color: '#ff007f',
          //fontSize: 16,
          textAlign: 'center'
        },
        //  subTextStyle: {
        //      color: '#7d7d7d',
        //      fontSize: 12,
        //      textAlign: 'left'
        //  }
    },
    tooltip: {
        show: true,               //是否显示提示框组件
    },
    xAxis: {
        show: true,               //是否显示x轴
        data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun'] //x轴分类
    },
    yAxis: {
        show: true,               //是否显示y轴
    },
    series: [
    {
        name: '张同学',
        data: [25, 210, 88, 21, 310, 81, 100],
        type: 'bar'
    },
    {
        name: '李同学',
        data: [120, 150, 88, 210, 300, 200, 102],
        type: 'bar',
        lable:{
            show:true
        },
        // barStyle:{
        //  // color:"#444",
        // }
    },
    ]
};

注意

可不要用该组件展示太多数据哦，毕竟移动端