Scatter 散点图

散点图是一种用于显示两个变量之间关系的图表，每个点的位置由两个坐标值决定，用于观察数据之间的相关性或分布模式。

平台差异说明

App（vue）	App（nvue）	H5	小程序
√	√	√	√

基本散点图

通过在 [series] 中添加对象并设置数据，可以绘制基础散点图。

<template>
  <view>
    <ly-charts-scatter :option="chartOption" height="400"></ly-charts-scatter>
  </view>
</template>

<script setup>
  import { ref } from 'vue'
  
  const chartOption = ref({
        title: {
          text: '基本散点图',
          textStyle: {
            fontSize: 16,
            color: '#333'
          }
        },
        xAxis: {
          type: 'value'
        },
        yAxis: {
          type: 'value'
        },
        series: [
          {
            name: '销量',
            type: 'scatter',
            data: [
              [10.0, 8.04],
              [8.0, 6.95],
              [13.0, 7.58],
              [9.0, 8.81],
              [11.0, 8.33],
              [14.0, 9.96],
              [6.0, 7.24],
              [4.0, 4.26],
              [12.0, 10.84],
              [7.0, 4.82],
              [5.0, 5.68]
            ],
            symbolSize: 15
          }
        ]
      })
</script>

多系列散点图

通过在 [series] 中添加多个对象，可以绘制多系列散点图。

<template>
  <view>
    <ly-charts-scatter :option="chartOption" height="400"></ly-charts-scatter>
  </view>
</template>

<script setup>
  import { ref } from 'vue'
  
  const chartOption = ref({
    title: {
      text: '多系列散点图',
      textStyle: {
        fontSize: 16,
        color: '#333'
      }
    },
    legend: {
      data: ['系列1', '系列2']
    },
    xAxis: {
      type: 'value'
    },
    yAxis: {
      type: 'value'
    },
    series: [
      {
        name: '系列1',
        type: 'scatter',
        data: [
          [161, 51], [167, 59], [159, 49], [157, 63], [155, 53],
          [170, 59], [159, 47], [166, 69], [176, 66], [160, 75]
        ],
        symbolSize: 15
      },
      {
        name: '系列2',
        type: 'scatter',
        data: [
          [175, 75], [180, 80], [170, 70], [178, 82], [176, 78],
          [183, 85], [179, 81], [185, 88], [172, 72], [177, 79]
        ],
        symbolSize: 15
      }
    ]
  })
</script>

不同符号散点图

通过设置 [series] 中的 [symbol] 属性，可以绘制不同符号的散点图。

<template>
  <view>
    <ly-charts-scatter :option="chartOption" height="400"></ly-charts-scatter>
  </view>
</template>

<script setup>
  import { ref } from 'vue'
  
  const chartOption = ref({
    title: {
      text: '不同符号散点图',
      textStyle: {
        fontSize: 16,
        color: '#333'
      }
    },
    legend: {
      data: ['圆形', '方形', '三角形', '菱形']
    },
    xAxis: {
      type: 'value'
    },
    yAxis: {
      type: 'value'
    },
    series: [
      {
        name: '圆形',
        type: 'scatter',
        symbol: 'circle',
        symbolSize: 15,
        data: [
          [10.0, 8.04], [8.0, 6.95], [13.0, 7.58], [9.0, 8.81], [11.0, 8.33]
        ]
      },
      {
        name: '方形',
        type: 'scatter',
        symbol: 'rect',
        symbolSize: 15,
        data: [
          [14.0, 9.96], [6.0, 7.24], [4.0, 4.26], [12.0, 10.84], [7.0, 4.82]
        ]
      },
      {
        name: '三角形',
        type: 'scatter',
        symbol: 'triangle',
        symbolSize: 15,
        data: [
          [15.0, 6.5], [12.5, 7.2], [11.5, 6.8], [13.5, 8.1], [10.5, 5.9]
        ]
      },
      {
        name: '菱形',
        type: 'scatter',
        symbol: 'diamond',
        symbolSize: 15,
        data: [
          [9.5, 9.2], [7.5, 6.1], [14.5, 8.7], [8.5, 7.9], [11.5, 9.5]
        ]
      }
    ]
  })
</script>

Props

参数	说明	类型	默认值	可选值
option	图表配置项，格式与 ECharts 相似	Object	-	-
width	图表容器宽度	String | Number	100%	-
height	图表容器高度	String | Number	400	-

Events

事件名	说明	回调参数
click	点击数据点时触发	{ componentType, seriesType, seriesName, name, value, color, event }

Option 属性

属性名	说明	类型	默认值
title	标题配置	Object	-
title.text	标题文本	String	-
legend	图例配置	Object	-
legend.data	图例数据	Array	-
xAxis	x轴配置	Object	-
xAxis.type	x轴类型	String	value
yAxis	y轴配置	Object	-
yAxis.type	y轴类型	String	value
series	系列列表	Array	-
series[].type	系列类型	String	scatter
series[].name	系列名称	String	-
series[].data	系列数据	Array	-
series[].symbol	散点符号	String	circle
series[].symbolSize	符号大小	Number	10
series[].color	系列颜色	String	-

Symbol 类型

类型	说明
circle	圆形（默认）
rect	矩形
triangle	三角形
diamond	菱形

方法

方法名	说明	参数
setOption	设置图表配置项	option, notMerge
resize	重新调整图表大小	-