一款自定义的柱状图插件

vue3 插件

使用方法

安装依赖 npm install
启动服务 npm run dev/npm dev

数据格式

xName:横坐标
value: 值
data: [
{ id: 1, xName: '周一', value: 120 },
{ id: 2, xName: '周二', value: 60 }
...
]

使用方式

在main.js文件中

import colinUI from './plugin/index'
reateApp(App).use(colinUI).mount('#app')

在组件中使用

<colinBar :data="data"></colinBar>

| 配置项 | 类型 | 描述 | 注意 | | ------------- | ------- | --------------------------- | ---------------------------| | data | Array | 数据 格式参考 👆🏻 方数据格式 | | | isShowY | boolean | 是否显示纵坐标值 | | | isShowX | boolean | 是否显示横坐标值 | | | isShowValue | boolean | 是否显示每一项的值 | | | bgColor | String/16进制 | 是否显示每一项的值 | 若使用16进制，不使用v-bind，直接采用 bgColor='#000'的形式 |

注意

(1)后续还会有新功能的加入 -> 敬请期待...