更新记录

0.0.2（2025-01-26） 下载此版本

• 移除组件默认width、height

0.0.1（2025-01-26） 下载此版本

uni-echarts 首次发布

平台兼容性

xiaohe0601 / github@xiaohe0601 / gitee@xiaohe0601

🎉 特性

• 🚀 快速上手，与 vue-echarts 近乎一致的使用体验

• 📱 多端兼容，支持H5、小程序、APP

• 📦 支持 easycom

• ☕ 支持 TypeScript

• 🍳 支持免费商用

🚁 安装

uni-echarts 提供了 npm 和 uni-modules 两种使用方式，任选其一即可

npm 方式

# pnpm
pnpm add echarts uni-echarts

# yarn
yarn add echarts uni-echarts

# npm
npm install echarts uni-echarts

uni-modules 方式

1. 使用 npm 安装 echarts

   # pnpm
   pnpm add echarts
   
   # yarn
   yarn add echarts
   
   # npm
   npm install echarts

2. 前往uni-app插件市场下载 uni-echarts

🛹 使用

简单示例

[!IMPORTANT] 由于小程序对于代码体积的要求非常严苛，所以我们鼓励手动从 echarts 中引入组件和图表，以减小打包体积。vue-echarts 团队构建了一个导入代码生成器，你只需要把 option 的代码粘贴进去，就可以得到精确的导入代码。

试一试 →

但如果你实在需要全量引入 echarts 从而无需手动引入模块，只需要在代码中添加：

import "echarts";

属性

事件

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

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

[!NOTE]

仅支持 .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

请参考支持的事件列表。前往 →

原生 DOM 事件

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

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

Provide / Inject

uni-echarts 为 option、 theme、init-options、update-options 和 loading-options 提供并导出了 provide 相关的 API，从而可以通过上下文的方式进行配置选项。

例如，可以通过如下方式来使用 provide API 为 theme 提供上下文配置：

import { provideEchartsTheme } from "uni-echarts/shared";

// 支持 字面量、ref、getter 等类型的值，组件内部通过 `toValue` 解析
provideEchartsTheme("dark");

另外，option 与其他选项略有不同，可以通过 option-key 选择控制某一个图表

<template>
  <!-- 注意，option-key 不是响应式，不支持动态修改 -->
  <uni-echarts option-key="chart1"></uni-echarts>

  <uni-echarts option-key="chart2"></uni-echarts>

  <uni-echarts></uni-echarts>
</template>

<script lang="ts" setup>
import { provideEchartsOption } from "uni-echarts/shared";

const option = ref({
  // ...
});

// 此时，option 仅会影响 option-key 相同的图表
provideEchartsOption("chart1", option);
</script>

方法

• setOption →

• getWidth →

• getHeight →

• getDom →

• getOption →

• resize →

• dispatchAction →

• convertToPixel →

• convertFromPixel →

• containPixel →

• showLoading →

• hideLoading →

• getDataURL →

• getConnectedDataURL →

• clear →

• dispose →

• toTempFilePath → （无需传 canvasId 或 canvas 参数）

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

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

<script lang="ts" setup>
import type { UniEchartsInst } from "uni-echarts/shared";

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

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

  chartEl.value.toTempFilePath();
}
</script>

静态方法

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

🍬 感谢

• vue-echarts

• lime-echart

• echarts-for-weixin

• mitt

🐶 讨论交流

• ❓：若有疑问或BUG反馈，可提交issues，也欢迎PR~
• 📫：xiaohe0601@outlook.com
• 🐧：暂未开通

🏆 开源协议

• MIT LICENSE

🚓 声明

The Apache Software Foundation Apache ECharts, ECharts, Apache, the Apache feather, and the Apache ECharts project logo are either registered trademarks or trademarks of the Apache Software Foundation.