tui-charts-scatter 散点图表 会员组件

介绍

散点图表，css版本

引入

uni-app引入

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

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

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

uni-app版本平台差异说明

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

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

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

代码演示

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

基础使用

<!--uni-app-->
<view class="tui-scatter--box">
  <view class="tui-title">Life Expectancy and GDP by Country</view>
  <tui-charts-scatter :legend="options1.legend" :xAxis="options1.xAxis" :xAxisLine="options1.xAxisLine" :yAxis="options1.yAxis" ref="scatter1"></tui-charts-scatter>
</view>

// data 数据 及 方法
export default {
 data() {
 	return {
 		options1: {
 			legend: {
 				show: true,
 				size: 24,
 				color: '#333'
 			},
 			xAxis: {
 				min: 0,
 				max: 70000,
 				splitNumber: 10000
 			},
 			xAxisLine: {
 				color: '#e3e3e3',
 				itemGap: 88
 			},
 			yAxis: {
 				min: 55,
 				max: 85,
 				splitNumber: 5
 			},
 			dataset: [{
 				name:'1990',
 				color: 'rgba(228,111,121,.9)',
 				width: 20,
 				source: [
 					[28604, 77, 'Australia'],
 					[31163, 77.4, 'Canada'],
 					[1516, 68, 'China'],
 					[13670, 74.7, 'Cuba'],
 					[28599, 75, 'Finland'],
 					[29476, 77.1, 'France'],
 					[31476, 75.4, 'Germany'],
 					[28666, 78.1, 'Iceland'],
 					[1777, 57.7, 'India'],
 					[29550, 79.1, 'Japan'],
 					[2076, 67.9, 'North Korea'],
 					[12087, 72, 'South Korea'],
 					[24021, 75.4, 'New Zealand'],
 					[43296, 76.8, 'Norway'],
 					[10088, 70.8, 'Poland'],
 					[19349, 69.6, 'Russia'],
 					[10670, 67.3, 'Turkey'],
 					[26424, 75.7, 'United Kingdom'],
 					[37062, 75.4, 'United States']
 				]
 			}, {
 				name:'2015',
 				color: 'rgba(114,209,224,.9)',
 				width: 24,
 				source: [
 					[44056, 81.8, 'Australia'],
 					[43294, 81.7, 'Canada'],
 					[13334, 76.9, 'China'],
 					[21291, 78.5, 'Cuba'],
 					[38923, 80.8, 'Finland'],
 					[37599, 81.9, 'France'],
 					[44053, 81.1, 'Germany'],
 					[42182, 82.8, 'Iceland'],
 					[5903, 66.8, 'India'],
 					[36162, 83.5, 'Japan'],
 					[1390, 71.4, 'North Korea'],
 					[34644, 80.7, 'South Korea'],
 					[34186, 80.6, 'New Zealand'],
 					[64304, 81.6, 'Norway'],
 					[24787, 77.3, 'Poland'],
 					[23038, 73.13, 'Russia'],
 					[19360, 76.5, 'Turkey'],
 					[38225, 81.4, 'United Kingdom'],
 					[53354, 79.1, 'United States']
 				]
 			}]
 		}
 	}
 },
 onReady() {
 	this.$refs.scatter1 && this.$refs.scatter1.draw(this.options1.dataset)
 },
 methods: {
 	
 }
}

.tui-scatter--box {
	width: 100%;
	display: flex;
	align-items: center;
	justify-content: center;
	flex-direction: column;
}
.tui-title{
	width: 100%;
	font-size: 28rpx;
	padding-bottom: 32rpx;
	text-align: center;
	font-weight: bold;
}

<!--微信小程序-->	
<view class="tui-scatter--box">
  <view class="tui-title">Life Expectancy and GDP by Country</view>
  <tui-charts-scatter legend="{{options1.legend}}" xAxis="{{options1.xAxis}}" xAxisLine="{{options1.xAxisLine}}" yAxis="{{options1.yAxis}}" id="scatter1"></tui-charts-scatter>
</view>

// data 数据 及 方法
Page({
  data: {
    options1: {
    	legend: {
    		show: true,
    		size: 24,
    		color: '#333'
    	},
    	xAxis: {
    		min: 0,
    		max: 70000,
    		splitNumber: 10000
    	},
    	xAxisLine: {
    		color: '#e3e3e3',
    		itemGap: 88
    	},
    	yAxis: {
    		min: 55,
    		max: 85,
    		splitNumber: 5
    	},
    	dataset: [{
    		name:'1990',
    		color: 'rgba(228,111,121,.9)',
    		width: 20,
    		source: [
    			[28604, 77, 'Australia'],
    			[31163, 77.4, 'Canada'],
    			[1516, 68, 'China'],
    			[13670, 74.7, 'Cuba'],
    			[28599, 75, 'Finland'],
    			[29476, 77.1, 'France'],
    			[31476, 75.4, 'Germany'],
    			[28666, 78.1, 'Iceland'],
    			[1777, 57.7, 'India'],
    			[29550, 79.1, 'Japan'],
    			[2076, 67.9, 'North Korea'],
    			[12087, 72, 'South Korea'],
    			[24021, 75.4, 'New Zealand'],
    			[43296, 76.8, 'Norway'],
    			[10088, 70.8, 'Poland'],
    			[19349, 69.6, 'Russia'],
    			[10670, 67.3, 'Turkey'],
    			[26424, 75.7, 'United Kingdom'],
    			[37062, 75.4, 'United States']
    		]
    	}, {
    		name:'2015',
    		color: 'rgba(114,209,224,.9)',
    		width: 24,
    		source: [
    			[44056, 81.8, 'Australia'],
    			[43294, 81.7, 'Canada'],
    			[13334, 76.9, 'China'],
    			[21291, 78.5, 'Cuba'],
    			[38923, 80.8, 'Finland'],
    			[37599, 81.9, 'France'],
    			[44053, 81.1, 'Germany'],
    			[42182, 82.8, 'Iceland'],
    			[5903, 66.8, 'India'],
    			[36162, 83.5, 'Japan'],
    			[1390, 71.4, 'North Korea'],
    			[34644, 80.7, 'South Korea'],
    			[34186, 80.6, 'New Zealand'],
    			[64304, 81.6, 'Norway'],
    			[24787, 77.3, 'Poland'],
    			[23038, 73.13, 'Russia'],
    			[19360, 76.5, 'Turkey'],
    			[38225, 81.4, 'United Kingdom'],
    			[53354, 79.1, 'United States']
    		]
    	}]
    }
  },
  onReady: function () {
    let scatter1=this.selectComponent('#scatter1')
    scatter1 && scatter1.draw(this.data.options1.dataset)
  }
})

.tui-scatter--box {
	width: 100%;
	display: flex;
	align-items: center;
	justify-content: center;
	flex-direction: column;
}
.tui-title{
	width: 100%;
	font-size: 28rpx;
	padding-bottom: 32rpx;
	text-align: center;
	font-weight: bold;
}

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

TIP

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

Slots

插槽名称	说明
-	-

Props

注：对象中属性为约定属性，不可自行修改

属性名	类型	说明	默认值
legend	Object	图例，说明	{show: true,size: 24,color: '#333'}
tooltip	Boolean	点击时是否显示提示信息	true
xAxis	Object	x轴数值数据	{min: 0,max: 100,splitNumber: 20}
xAxisTick	Object	x轴刻度线	{height: '12rpx',color: '#e3e3e3'}
xAxisLine	Object	x轴线条	{color: '#e3e3e3',itemGap: 100}
xAxisLabel	Object	x轴item项label样式	{color: '#333',size: 24}
yAxis	Object	y轴数值数据	{min: 0,max: 100,splitNumber: 20}
yAxisLine	Object	y轴线条	{color: '#e3e3e3',itemGap: 80}
yAxisTick	Object	y轴刻度线	{width: '12rpx',color: '#e3e3e3'}
yAxisLabel	Object	y轴item项label样式	{color: '#333',size: 24}
splitLine	Object	x轴、y轴分割线样式	{color: '#e3e3e3',type: "dashed"}

//xAxis x轴数值数据属性说明（同yAxis）
{
	//最小值
	min: 0,
	//最大值
	max: 100,
	//分段数值，取值必须大于 0，并且可被(max - min)整除
	splitNumber: 20
}

//splitLine x轴、y轴分割线样式 属性说明
{
	//分割线颜色,不显示则将颜色设置为transparent
	color: "#e3e3e3",
	//线条展示类型，同 border-style，可选值 dashed、dotted、solid
	type: "dashed"
}

Events

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

事件名	说明	回调参数
click	点击图表圆点时触发	{datasetIndex:数据集合索引,sourceIndex: 数据项索引}

Methods

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

事件名	说明	传入参数
draw	绘制图表	dataset, xAxisValFormatter

/*
 dataset：漏斗图表数据
 xAxisValFormatter：x轴label格式化方法，需带返回值
*/

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

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

预览

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

特别说明

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

线上程序扫码预览

ThorUI组件库小程序码	H5二维码	ThorUI示例小程序码