# tui-charts-scatter 散点图表

介绍

散点图表,css版本

# 引入

# uni-app引入

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

import tuiChartsScatter from "@/components/thorui/tui-charts-scatter/tui-charts-scatter"
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>

<!--微信小程序-->	
<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>
		
.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;
}
//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']
		]
	}]
}

//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)
}

# 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

事件名 说明 回调参数
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示例
ThorUI组件库小程序码 H5二维码 ThorUI示例小程序码