Tui Plus Vapor

Appearance

散点图演示 ​

散点图演示https://yundie.xyz/x-charts-demo/index.html?type=scatter

参考配置 ​

基础散点图 ​

html
<template>
  <view class="container">
    <t-xcharts
      ref="chart"
      :option="chartOption"
    ></t-xcharts>
  </view>
</template>

<script setup>
import { ref } from 'vue';

const chartOption = ref({
  type: 'scatter',
  animation: true,
  xAxis: {
    disableGrid: true
  },
  yAxis: {
    data: [{
      min: 0,
      max: 100
    }]
  },
  series: [{
    name: '数据点',
    data: [
      { x: 10, y: 20 },
      { x: 20, y: 35 },
      { x: 30, y: 45 },
      { x: 40, y: 25 },
      { x: 50, y: 55 },
      { x: 60, y: 40 },
      { x: 70, y: 60 }
    ],
    color: '#2979ff'
  }]
});
</script>

配置说明 ​

type ​

图表类型，设置为 'scatter' 表示散点图。

series ​

数据系列配置：

  • name: 系列名称
  • data: 数据数组，每个元素包含：
    • x: X轴坐标
    • y: Y轴坐标
  • color: 点的颜色

散点图用于展示两个变量之间的关系和分布。