# tui-charts-bar 横向柱状图表

介绍

横向柱状图表,css版本

# 引入

# uni-app引入

第一种,手动引入(可全局引入)

import tuiChartsBar from "@/components/thorui/tui-charts-bar/tui-charts-bar"
export default {
	components:{
		tuiChartsBar
	}
}

第二种,开启easycom组件模式,如果不了解如何配置,可先查看 官网文档 (opens new window)

# uni-app版本平台差异说明

App-Nvue App-vue H5 微信小程序 支付宝小程序 百度小程序 字节小程序 QQ小程序
升级中 升级中 升级中 升级中 升级中

# 微信小程序引入(可在app.json中全局引入)

{
  "usingComponents": {
    "tui-charts-bar": "/components/thorui/tui-charts-bar/tui-charts-bar"
  }
}

# 代码演示

部分功能演示,具体可参考示例程序以及文档API。

基础布局
<!--uni-app-->
<tui-charts-bar tooltip ref="tui_column_1" :max="options1.max" :splitNumber="options1.splitNumber" :yAxis="options1.yAxis"></tui-charts-bar>

<!--微信小程序-->	
<tui-charts-bar tooltip id="tui_column_1" max="{{options1.max}}" splitNumber="{{options1.splitNumber}}" yAxis="{{options1.yAxis}}"></tui-charts-bar>
		
options1: {
	yAxis: ['北京', '上海', '深圳', '广州', '杭州', '武汉'],
	dataset: [{
		name: '营业额',
		color: '#5677fc',
		source: [380, 210, 320, 480, 300, 200]
	}],
	max: 600,
	splitNumber: 100
}

//uni-app调用方法绘制图表
mounted() {
	this.$refs.tui_column_1.draw(this.options1.dataset)
}

//微信小程序调用方法绘制图表
onReady: function () {
  this.selectComponent("#tui_column_1").draw(this.data.options1.dataset)
}

# Slots

名称 说明
- -

# Props

参数 类型 说明 默认值
width [Number, String] 图表宽度,单位rpx 600
legend Object 图例,说明 {show: false,size: 24,color: '#333'}
tooltip Boolean 提示信息 false
xAxis Array x轴数据,如果不传则默认使用min,max值计算,Object格式:{value: 0,color: "#333"} [ ]
min Number x轴最小值 0
max Number x轴最大值 100
splitNumber Number x轴分段递增数值 20
splitLine Object 分割线样式(不显示则将color颜色设置为transparent) {color: "#e3e3e3",type: "dashed"}
xAxisLineColor String x轴线条颜色(不显示则将颜色设置为transparent) #e3e3e3
xAxisLabel Object x轴标签显示及样式 {show: true,color: "#333",size: 24}
yAxis Array y轴数据,字符串数组 [ ]
columnBarHeight [Number, String] 柱状条高度,单位rpx 32
yAxisTick Object y轴刻度线(不显示则将color颜色设置为transparent) {width: '12rpx',color: '#e3e3e3'}
yAxisLine Object y轴线条(不显示则将color颜色设置为transparent) {color: '#e3e3e3',itemPadding: '30rpx 0'}
yAxisLabel Object y轴item项label样式 {show: true,color: "#333",size: 24}
yAxisVal Object y轴item项value样式 {show: false,color: "#333",size: 24}
currentIndex Number 默认选中y轴item项索引 -1
isStack Boolean 是否堆叠展示 false
clickEffect Number 柱状条点击效果:1-出现背景,2-高亮显示,其他变暗 3-无效果 1
columnCap String 柱状条的端点样式:round-向线条的每个末端添加圆形线帽, square-向线条的每个末端添加正方形线帽 square

# Events

事件名 说明 回调参数
click 点击柱状图item项时触发 返回该柱状条对应的数据对象

# Methods

事件名 说明 传入参数
draw 绘制图表 dataset, yAxisValFormatter
/*
 dataset:柱状图表数据
 yAxisValFormatter :格式化柱状条顶部value值(此处传值是为了做兼容处理)
*/

//uni-app调用方法绘制图表
mounted() {
	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示例小程序码