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>

// data 数据 及 方法
export default {
 data() {
 	return {
 		options1: {
 			xAxis: ['北京', '上海', '深圳', '广州', '杭州', '武汉'],
 			dataset: [{
 				name: '营业额',
 				color: '#5677fc',
 				source: [380, 210, 320, 480, 300, 200]
 			}],
 			max: 600,
 			splitNumber: 100
 		}
 	}
 },
 //uni-app调用方法绘制图表
 onReady() {
 	//注：当数据变化时需要重新调用draw方法绘制
 	this.$refs.tui_column_1.draw(this.options1.dataset)
 },
 methods: {
 	columnClick(e) {
 		console.log(e)
 	}
 }
}

<script setup lang="ts">
//uni-app vue3 组合式API 使用方式
import { ref, reactive, toRefs } from 'vue'
import { onReady } from '@dcloudio/uni-app'
//引入确保路径正确
// import tuiChartsColumn from './tui-charts-line/tui-charts-column.vue'
// const tui_column_1 = ref<InstanceType<typeof tuiChartsColumn> | null>(null)
const tui_column_1:any = ref()

const state = reactive({
	options1: {
		xAxis: ['北京', '上海', '深圳', '广州', '杭州', '武汉'],
		dataset: [{
			name: '营业额',
			color: '#5677fc',
			source: [380, 210, 320, 480, 300, 200]
		}],
		max: 600,
		splitNumber: 100
	}
})
const { options1 } = toRefs(state)

// 注意：初始化调用方法，尽量放置 onReady 内执行，确保tui_column_1.value 有值
onReady(() => 
    /*
	  如果使用 ts 提示没有draw方法,可使用如下步骤解决：
	   1、将 tui_column_1 设为any 类型
	   2、获取ref实例结合ts的InstanceType，请看上方注释内容
	*/
	tui_column_1?.value.draw(state.options1.dataset)
})
</script>

<!--微信小程序-->	
<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>

// data 数据 及 方法
Page({
  data: {
    options1: {
    	xAxis: ['北京', '上海', '深圳', '广州', '杭州', '武汉'],
    	dataset: [{
    		name: '营业额',
    		color: '#5677fc',
    		source: [380, 210, 320, 480, 300, 200]
    	}],
    	max: 600,
    	splitNumber: 100
    }
  },
  //微信小程序调用方法绘制图表
  onReady: function () {
 	//注：当数据变化时需要重新调用draw方法绘制
    this.selectComponent("#tui_column_1").draw(this.data.options1.dataset)
  },
  columnClick(e) {
  	console.log(e)
  }
})

// Make sure to add code blocks to your code group

TIP

• 需等组件初始化完成后才能调用方法进行绘制
• 数据变化时需重新调用 draw 方法进行绘制才能生效

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
isMinus V2.1.0+	Boolean	是否支持负数显示，非堆叠展示时生效，且默认以0为分界线进行展示，需要设置最小值为小于数据项的负数	true

Events

注：uni-app端绑定事件使用@前缀，如@click；微信小程序原生使用bind前缀，如bindclick

事件名	说明	回调参数
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示例小程序码