ThorUI文档

# 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示例
ThorUI组件库小程序码 H5二维码 ThorUI示例小程序码

← tui-charts-bar 横向柱状图 →