# tui-charts-column 柱状图表
介绍
柱状图表,css版本
# 引入
# uni-app引入
第一种,手动引入(可全局引入)
import tuiChartsColumn from "@/components/thorui/tui-charts-column/tui-charts-column.vue"
export default {
components:{
tuiChartsColumn
}
}
第二种,开启easycom组件模式,如果不了解如何配置,可先查看 官网文档 (opens new window)。
# uni-app版本平台差异说明
App-Nvue | App-vue | H5 | 微信小程序 | 支付宝小程序 | 百度小程序 | 字节小程序 | QQ小程序 |
---|---|---|---|---|---|---|---|
升级中 | √ | √ | √ | √ | √ | √ | √ |
# 微信小程序引入(可在app.json中全局引入)
{
"usingComponents": {
"tui-charts-column": "/components/thorui/tui-charts-column/tui-charts-column"
}
}
# 代码演示
部分功能演示,具体可参考示例程序以及文档API。
基础使用
<!--uni-app-->
<tui-charts-column ref="tui_column_1" tooltip :xAxis="options1.xAxis" :dataset="options1.dataset" :max="options1.max" :splitNumber="options1.splitNumber" @click="columnClick"></tui-charts-column>
<!--微信小程序-->
<tui-charts-column id="tui_column_1" tooltip xAxis="{{options1.xAxis}}" dataset="{{options1.dataset}}" max="{{options1.max}}" splitNumber="{{options1.splitNumber}}" bindclick="columnClick"></tui-charts-column>
options1: {
xAxis: ['北京', '上海', '深圳', '广州', '杭州', '武汉'],
dataset: [{
name: '营业额',
color: '#5677fc',
source: [380, 210, 320, 480, 300, 200]
}],
max: 600,
splitNumber: 100
}
//uni-app调用方法绘制图表
onReady() {
this.$refs.tui_column_1.draw(this.options1.dataset)
}
//微信小程序调用方法绘制图表
onReady: function () {
this.selectComponent("#tui_column_1").draw(this.data.options1.dataset)
}
# Slots
名称 | 说明 |
---|---|
- | - |
# Props
参数 | 类型 | 说明 | 默认值 |
---|---|---|---|
legend | Object | 图例,说明 | {show: false,size: 24,color: '#333'} |
tooltip | Boolean | 提示信息 | false |
xAxis | Array | x轴数据,字符串数组 | [ ] |
currentIndex | Number | 默认选中x轴item项索引 | -1 |
columnBarWidth | [Number, String] | 柱状条宽度,单位rpx | 32 |
splitLine | Object | 分割线样式(不显示则将color颜色设置为transparent) | {color: "#e3e3e3",type: "dashed"} |
xAxisTick | Object | x轴刻度线(不显示则将color颜色设置为transparent) | {height: '12rpx',color: '#e3e3e3'} |
xAxisLine | Object | x轴线条(不显示则将color颜色设置为transparent) | {color: '#e3e3e3',itemPadding: '0 30rpx'} |
xAxisLabel | Object | x轴item项label样式 | {color: "#333",size: 24,height: 60} |
xAxisVal | Object | x轴item项value样式 | {show: false,color: "#333",size: 24,height: 60} |
yAxis | Array | y轴数据,如果不传则默认使用min,max值计算,Object格式:{value: 0,color: "#333"} | [ ] |
min | Number | y轴最小值 | 0 |
max | Number | y轴最大值 | 100 |
splitNumber | Number | y轴分段递增数值 | 20 |
yAxisLine | Object | y轴线条样式(不显示则将color颜色设置为transparent) | {color: '#e3e3e3',itemGap: 60} |
yAxisLabel | Object | y轴标签显示 | {show: true,color: "#333",size: 24} |
scrollable | Boolean | 是否可滚动 | false |
isStack | Boolean | 是否堆叠展示 | false |
clickEffect | Number | 柱状条点击效果:1-出现背景,2-高亮显示,其他变暗 3-无效果 | 1 |
columnCap | String | 柱状条的端点样式:round-向线条的每个末端添加圆形线帽, square-向线条的每个末端添加正方形线帽 | square |
# Events
事件名 | 说明 | 回调参数 |
---|---|---|
click | 点击柱状图item项时触发 | 返回该柱状条对应的数据对象 |
# Methods
事件名 | 说明 | 传入参数 |
---|---|---|
draw | 绘制图表 | dataset, xAxisValFormatter |
/*
dataset:柱状图表数据
xAxisValFormatter :格式化柱状条顶部value值(此处传值是为了做兼容处理)
*/
//uni-app调用方法绘制图表
onReady() {
this.$refs.tui_column_1.draw(this.options1.dataset)
}
//微信小程序调用方法绘制图表
onReady: function () {
this.selectComponent("#tui_column_1").draw(this.data.options1.dataset)
}
# 预览
请以移动端效果为准,touch事件目前尚未在PC端做兼容。
# 线上程序扫码预览
![]() | ![]() | ![]() |
---|---|---|
ThorUI组件库小程序码 | H5二维码 | ThorUI示例小程序码 |