零云®lyCharts v26

Appearance

Scatter 散点图 ​

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

平台差异说明 ​

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

普通 Vue、uvue 和 uni-app-x 图表均通过公共 ly-canvas 画布层初始化；微信小程序端由公共层启用 type="2d" 模式。

基本散点图 ​

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

vue
<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] 中添加多个对象，可以绘制多系列散点图。

vue
<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] 属性，可以绘制不同符号的散点图。

vue
<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 | Number100%-
height图表容器高度String | Number400-

Events ​

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

Option 属性 ​

属性名说明类型默认值
title标题配置Object-
title.text标题文本String-
legend图例配置Object-
legend.data图例数据Array-
legend.selected初始系列选中状态，false 时隐藏对应系列Object-
tooltip提示框配置Object-
tooltip.formatter提示框内容格式化，支持字符串模板；Vue 端也支持函数String | Function-
dataZoom数据窗口配置，按点序裁剪可视数据Array | Object-
xAxisx轴配置Object-
xAxis.typex轴类型Stringvalue
yAxisy轴配置Object-
yAxis.typey轴类型Stringvalue
series系列列表Array-
series[].type系列类型Stringscatter
series[].name系列名称String-
series[].data系列数据Array-
series[].symbol散点符号Stringcircle
series[].symbolSize符号大小Number10
series[].color系列颜色String-

Symbol 类型 ​

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

方法 ​

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

ECharts 运行时兼容 API ​

组件实例支持一组常用 ECharts 风格方法，适合通过 ref 调用：

方法名说明参数
setOption设置图表配置项；notMerge 为 true 时不合并旧配置option, notMerge
getOption获取当前规范化后的图表配置-
resize重新测量并绘制图表-
clear清空画布并重置当前交互状态-
dispose销毁当前图表实例状态，后续绘制调用将被忽略-
showLoading显示轻量加载态textOrOptions
hideLoading隐藏加载态并重绘当前配置-
getWidth获取当前画布宽度-
getHeight获取当前画布高度-
on监听图表事件eventName, handler
off移除图表事件监听eventName, handler?
dispatchAction触发支持的图表行为action
appendData向指定系列末尾追加数据
convertToPixel将数据坐标转换为像素坐标finder, value
convertFromPixel将像素坐标转换为数据坐标finder, value
containPixel判断像素点是否落在坐标系/系列附近finder, value

当前能力已在源码中实现，需等待后续发版后才会进入插件市场版本。

dispatchAction 当前支持 showTip、hideTip、legendToggleSelect、dataZoom、highlight、downplay、select、unselect、toggleSelect。散点图的 dataZoom 会按每个系列的数据点顺序裁剪可视窗口，不按数值 x 范围筛选，也不渲染滑块 UI；highlight / downplay 和选中类 action 只影响运行时视觉状态，不改写传入的 option 数据。

js
chartRef.value?.dispatchAction({ type: 'showTip', dataIndex: 2, seriesIndex: 0 })
chartRef.value?.dispatchAction({ type: 'legendToggleSelect', name: 'Group B' })
chartRef.value?.dispatchAction({ type: 'dataZoom', start: 20, end: 80 })
chartRef.value?.dispatchAction({ type: 'dataZoom', startValue: 2, endValue: 8 })
chartRef.value?.dispatchAction({ type: 'highlight', seriesIndex: 0, dataIndex: 2 })
chartRef.value?.dispatchAction({ type: 'downplay', seriesIndex: 0, dataIndex: 2 })
chartRef.value?.dispatchAction({ type: 'select', seriesIndex: 0, dataIndex: 2 })
chartRef.value?.dispatchAction({ type: 'toggleSelect', seriesIndex: 0, dataIndex: 2 })
chartRef.value?.dispatchAction({ type: 'unselect', seriesIndex: 0, dataIndex: 2 })
chartRef.value?.appendData({ seriesIndex: 0, data: [[9, 42], [10, 56]] })
chartRef.value?.dispatchAction({ type: 'hideTip' })

convertToPixel / convertFromPixel 当前仅支持主直角坐标系。散点图的 value 形如 [xValue, yValue]，使用最近一次绘制的连续坐标范围换算；containPixel 默认判断是否落在绘图区内，传入 seriesIndex 时会进一步判断是否靠近该系列散点。本批坐标转换 API 已在源码中实现，需等待后续发版后进入插件市场版本。

js
const pixel = chartRef.value?.convertToPixel({ xAxisIndex: 0, yAxisIndex: 0 }, [8, 42])
const data = chartRef.value?.convertFromPixel(null, pixel)
const inside = chartRef.value?.containPixel({ seriesIndex: 0 }, pixel)

legend / dataZoom / tooltip.formatter ​

legend.selected 可控制初始系列显隐，隐藏系列不会参与绘制、命中检测、提示框和坐标范围计算：

js
const option = {
  legend: {
    selected: {
      'Group A': true,
      'Group B': false
    }
  },
  series: [
    { name: 'Group A', type: 'scatter', data: [[170, 65], [182, 78], [175, 70]] },
    { name: 'Group B', type: 'scatter', data: [[160, 50], [168, 58], [180, 75]] }
  ]
}

tooltip.formatter 支持 {a} / {seriesName}、{b} / {name}、{c} / {value} 等字符串模板。Vue 组件支持函数 formatter；uvue 中函数 formatter 会安全退回默认提示框内容。

js
const option = {
  tooltip: {
    formatter: '{a} {b}: {c}'
  }
}

dataset / encode ​

散点图支持基础 dataset.source + series.encode 预处理，x 和 y 会映射成二维点数据：

js
const option = {
  dataset: {
    source: [
      ['height', 'weight', 'name'],
      [170, 65, 'A'],
      [182, 78, 'B']
    ]
  },
  series: [
    { type: 'scatter', encode: { x: 'height', y: 'weight' } }
  ]
}