ThorUI文档

# tui-charts-area 面积图表 会员组件

介绍

面积图表，css版本

# 引入

# uni-app引入

第一种，手动引入（可全局引入）

import tuiChartsArea from "@/components/thorui/tui-charts-area/tui-charts-area.vue"
export default {
	components:{
		tuiChartsArea
	}
}

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

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

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

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

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

# 代码演示

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

基础使用
    <!--uni-app-->
<view class="tui-title">2021年上半年月份商品营业额（单位：w）</view>
<view class="tui-charts-box">
 <tui-charts-area ref="tui_area_1" tooltip :xAxis="options1.xAxis" :dataset="options1.dataset"
 	:max="options1.max" :splitNumber="options1.splitNumber" @click="dotClick"></tui-charts-area>
</view>

    // data 数据 及 方法
export default {
 data() {
 	return {
 		options1: {
 			xAxis: ['一月', '二月', '三月', '四月', '五月', '六月'],
 			dataset: [{
 				name: '营业额',
 				color: 'rgba(86, 119, 252, 0.6)',
 				source: [380, 210, 320, 160, 300, 200]
 			}],
 			max: 600,
 			splitNumber: 100
 		}
 	}
 },
 onReady() {
 	this.$refs.tui_area_1.draw(this.options1.dataset)
 },
 methods: {
 	dotClick(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 tuiChartsArea from './tui-charts-area/tui-charts-area.vue'
// const tui_area_1 = ref<InstanceType<typeof tuiChartsArea> | null>(null)
const tui_area_1:any = ref()

const state = reactive({
	options1: {
		xAxis: ['一月', '二月', '三月', '四月', '五月', '六月'],
		dataset: [{
			name: '营业额',
			color: 'rgba(86, 119, 252, 0.6)',
			source: [380, 210, 320, 160, 300, 200]
		}],
		max: 600,
		splitNumber: 100
	} 
})
const { options1 } = toRefs(state)

function dotClick(e:any){
	console.log(e)
}

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

    /* 样式 */
.tui-title {
	width: 100%;
	font-size: 28rpx;
	color: #888;
	padding: 30rpx 0;
	box-sizing: border-box;
	text-align: center;
}

.tui-charts-box {
	width: 100%;
	display: flex;
	justify-content: center;
}

    <!--微信小程序-->	
<view class="tui-title">2021年上半年月份商品营业额（单位：w）</view>
<view class="tui-charts-box">
 <tui-charts-area id="tui_area_1" tooltip xAxis="{{options1.xAxis}}" dataset="{{options1.dataset}}"
 	max="{{options1.max}}" splitNumber="{{options1.splitNumber}}" bindclick="dotClick"></tui-charts-area>
</view>	

    // data 数据 及 方法
Page({
  data: {
    options1: {
    	xAxis: ['一月', '二月', '三月', '四月', '五月', '六月'],
    	dataset: [{
    		name: '营业额',
    		color: 'rgba(86, 119, 252, 0.6)',
    		source: [380, 210, 320, 160, 300, 200]
    	}],
    	max: 600,
    	splitNumber: 100
    }
    
  },
  onReady: function () {
    let tui_area_1=this.selectComponent('#tui_area_1')
    tui_area_1 && tui_area_1.draw(this.data.options1.dataset)
  },
  dotClick(e) {
  	console.log(e)
  }
})

    /* 样式 */
.tui-title {
	width: 100%;
	font-size: 28rpx;
	color: #888;
	padding: 30rpx 0;
	box-sizing: border-box;
	text-align: center;
}

.tui-charts-box {
	width: 100%;
	display: flex;
	justify-content: center;
}

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

    TIP

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

    # Slots

    插槽名称 说明
    - -

    # Props

    属性名 类型 说明 默认值
    width Number, String 图表宽度，单位rpx 620
    legend Object 图例，说明 {show: false,size: 24,color: '#333'}
    tooltip Boolean 点击时是否显示提示信息 false
    xAxis Array x轴数据，字符串数组 [ ]
    currentIndex Number 默认选中x轴item项索引 -1
    splitLine Object 分割线样式（不显示则将color颜色设置为transparent） {color: "#e3e3e3",type: "dashed"}
    xAxisTick Object x轴刻度线（不显示则将color颜色设置为transparent） {height: '12rpx',color: '#e3e3e3'}
    xAxisLine Object x轴线条（不显示则将color颜色设置为transparent） {color: '#e3e3e3',itemGap: 120}
    xAxisLabel Object x轴item项label样式 {color: "#333",size: 24,height: 60}
    xAxisVal Object x轴item项value样式 {show: true,color: "#333",size: 24,height: 48}
    yAxisSplitLine Object 点击坐标点所显示的分割线 {color: "transparent",type: "dashed"}
    brokenDot Object 折线坐标点样式，width宽度单位rpx {width: 12,color: '#F8F8F8'}
    brokenLineHeight [Number, String] 折线高度/粗细，单位px 1
    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

    # Events

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

    事件名 说明 回调参数
    click 点击value对应的坐标点时触发 返回该坐标点对应的数据对象

    # Methods

    如何调用方法详见 进阶用法 介绍

    事件名 说明 传入参数
    draw 绘制图表 dataset, xAxisValFormatter
    /*
 dataset：面积图表数据
 xAxisValFormatter :格式化面积拐点value值
*/

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

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

    # 预览

    请以移动端效果为准，touch事件目前尚未在PC端做兼容。

    # 特别说明

    该组件为 会员组件，非开源内容，需开通会员才可获取使用。

    # 线上程序扫码预览

    ThorUI组件库 H5二维码 ThorUI示例
    ThorUI组件库小程序码 H5二维码 ThorUI示例小程序码
    Last Updated: 7/21/2023, 2:12:46 PM

    ← tui-charts-funnel 漏斗图表 →