组件

Attributes

参数	说明	类型	可选值	默认值
custom-class	自定义 class	any	-	-
custom-style	自定义 style	StyleValue	-	-
visible 2.4.1	是否可见（默认跟随所在页面的可见性，如果在隐藏状态下触发更新将会推迟到可见时再执行）	boolean	-	-
option	echarts setOption option	object	-	-
option-key	provide option key	string	-	-
theme	echarts init theme	string / object	-	-
init-options	echarts init opts	object	-	-
update-options	echarts setOption opts	object	-	-
group	echarts group	string	-	-
manual-update	是否手动更新 option	boolean	-	false
autoresize WEB	是否自动 resize	AutoResize	-	false
loading	是否显示加载动画效果	boolean	-	false
loading-options	echarts showLoading opts	object	-	-
canvas-type	canvas type	string	2d / legacy	2d
disable-scroll	触摸时是否禁用滚动	boolean	-	false
support-hover	PC 端是否支持 hover 行为	boolean	-	false
init-delay	初始化延迟时间（单位：ms）	number	-	30

相关类型定义

type AutoResize = boolean | {
  throttle?: number;
  onResize?: () => void;
};

Events

可以使用 Vue 的 v-on 指令绑定事件

<template>
  <uni-echarts
    :option="option"
    @click="handleClick"
    @finished.once="handleFinished"
    @zr:click="handleZrClick"
    @native:tap="handleNativeTap"
  ></uni-echarts>
</template>

提示

仅支持 .once 修饰符（并且小程序端不支持），因为其它修饰符都与 DOM 事件机制强耦合。

Uni ECharts 支持如下事件：

• highlight

• downplay

• selectchanged

• legendselectchanged

• legendselected

• legendunselected

• legendselectall

• legendinverseselect

• legendscroll

• datazoom

• datarangeselected

• timelinechanged

• timelineplaychanged

• restore

• dataviewchanged

• magictypechanged

• geoselectchanged

• geoselected

• geounselected

• axisareaselected

• brush

• brushEnd

• brushselected

• globalcursortaken

• rendered

• finished

• 鼠标事件

  • click
  • dblclick
  • mouseover
  • mouseout
  • mousemove
  • mousedown
  • mouseup
  • globalout
  • contextmenu

• ZRender 事件

  • zr:click
  • zr:mousedown
  • zr:mouseup
  • zr:mousewheel
  • zr:dblclick
  • zr:contextmenu

更多信息请参考 echarts events。

其他事件

名称	说明	参数
inited 0.1.2	初始化完成	-
showtip 0.1.2	显示 tooltip	-
hidetip 0.1.2	隐藏 tooltip	-

原生 DOM 事件

由于 Uni ECharts 默认将事件绑定到 echarts 实例，因此在使用原生 DOM 事件时需要做一些特殊处理， 你需要在事件名称前加上 native: 前缀来绑定原生 DOM 事件。

<template>
  <!-- 注意，uni-app 中的原生 DOM 点击事件应该使用 tap 而不是 click -->
  <uni-echarts @native:tap="handleNativeTap"></uni-echarts>
</template>

Slots

名称	说明
default	-

Exposes

• setOption
• getWidth
• getHeight
• getDom
• getOption
• resize
• dispatchAction
• convertToPixel
• convertFromPixel
• containPixel
• getDataURL
• getConnectedDataURL
• clear
• dispose
• toTempFilePath （无需传 canvasId 或 canvas 参数）

可以通过 ref 调用以上方法，例如：

<template>
  <uni-echarts ref="chartEl"></uni-echarts>
</template>

<script lang="ts" setup>
// ⬇️ npm 方式
import type { UniEchartsInst } from "uni-echarts/shared";
// ⬇️ uni-modules 方式
import type { UniEchartsInst } from "@/uni_modules/xiaohe-echarts";
import { shallowRef } from "vue";

const chartEl = shallowRef<UniEchartsInst | null>(null);

async function download() {
  if (chartEl.value == null) {
    return;
  }

  const { tempFilePath } = await chartEl.value.toTempFilePath();

  // ...
}
</script>

静态方法

静态方法请直接通过 echarts 本身 进行调用，例如：

import { use } from "echarts/core";

use([
  // ...
]);