repository·dev·Indexed 41 days ago
https://github.com/xiaohe0601/uni-echartsA Vue 3 component library that brings Apache ECharts capabilities to the uni-app ecosystem. It enables high-performance data visualization across Web, Mini-programs, and mobile apps with a developer experience similar to vue-echarts. Version 2.5.3 supports TypeScript, Easycom, and provides a comprehensive API for managing chart options, themes, and instance methods via Vue refs.
Uni ECharts is an Apache ECharts component specifically designed for uni-app environments. It is built for Vue 3 and provides a cross-platform experience across Web, Mini-programs, and Mobile Apps (APP).
Key features include:
Uni ECharts provides the following capabilities for uni-app developers:
easycom for automatic component registration in uni-app.vue-echarts and full TypeScript support.Due to limitations in the uni-app API, the following ECharts features are currently not supported:
toolbox.feature.saveAsImageseries-mapecharts-glseries-heatmap (Note: series-heatmap is supported in ECharts 6.0 and below, but not in 6.1+).If you need a custom ECharts build (e.g., from the ECharts Online Builder), you must convert the resulting echarts.min.js to ESM format because Vite only supports ESM modules.
Use the @uni-echarts/c2e CLI tool to perform this conversion:
pnpm dlx or npx.echarts.min.js and desired output file.static directory, as mini-programs cannot parse the export syntax in static files.Note: The converted ESM output does not currently support Tree-Shaking and requires a default import.
pnpm dlx @uni-echarts/c2e@latestnpx @uni-echarts/c2e@latestUni ECharts provides and exports provide APIs that allow you to configure option, theme, init-options, update-options, and loading-options using Vue's Dependency Injection pattern. This allows you to set configurations at a parent component level that will apply to all Uni ECharts components within that scope.
Supported configuration types include literals, refs, and getter functions, as they are parsed internally using Vue's toValue utility.
// Example of providing a theme
import { provideEchartsTheme } from "uni-echarts/shared";
provideEchartsTheme("dark");To use Uni ECharts as a uni-module, follow these steps:
echarts package using your preferred package manager:pnpm add echarts
# or
yarn add echarts
# or
npm install echartsNote: If you need a customized ECharts build, refer to the 'Customizing ECharts' section in the documentation.
pnpm add echartsYou can achieve automatic on-demand import of components and APIs by combining Uni ECharts with @uni-helper/vite-plugin-uni-components and unplugin-auto-import.
Steps:
vite.config.js using UniEchartsResolver.shamefully-hoist=true to your .npmrc.uni-echarts/global to your tsconfig.json types for IDE support.// vite.config.js
import Uni from "@dcloudio/vite-plugin-uni";
import UniComponents from "@uni-helper/vite-plugin-uni-components";
import { UniEchartsResolver } from "uni-echarts/resolver";
import AutoImport from "unplugin-auto-import/vite";
import { defineConfig } from "vite";
export default defineConfig({
plugins: [
AutoImport({
resolvers: [
UniEchartsResolver()
]
}),
UniComponents({
resolvers: [
UniEchartsResolver()
]
}),
Uni()
]
});Because mini-programs have strict code size limits, it is highly recommended to import only the necessary ECharts components and charts instead of the full library.
You can use an import code generator to get precise import statements by pasting your option code.
Options:
If you must use the full ECharts library, you can import it directly using:
import "echarts";import "echarts";Uni ECharts uses virtualHost to make custom nodes behave like Vue components in mini-programs. This causes standard class and style attributes to fail. You have three ways to resolve this:
mergeVirtualHostAttributes (Recommended)Add mergeVirtualHostAttributes: true to your manifest.json under the specific mini-program platform configuration (mp-weixin or mp-alipay). This allows standard class and style to work.
custom-class or custom-styleIf you don't want to change the manifest, use the provided props to apply styles:
custom-class: For CSS classes.custom-style: For inline styles (accepts string or object).Move your styles to a <style> block without the scoped attribute so they can be shared with the component.
// manifest.json
{
"mp-weixin": {
"mergeVirtualHostAttributes": true
},
"mp-alipay": {
"mergeVirtualHostAttributes": true
}
}
// Usage with custom-style
<uni-echarts custom-style="height: 300px" :option="option"></uni-echarts>
<uni-echarts :custom-style="{ height: '300px' }" :option="option"></uni-echarts>You can bind events to the uni-echarts component using Vue's v-on directive. The component supports three categories of events:
click, legendselectchanged, datazoom, finished, etc.zr:, such as zr:click, zr:mousedown, and zr:mousewheel.native:. Note that in uni-app, you should use tap instead of click for touch interactions.Important Note: Only the .once modifier is supported (and it is not supported on mini-programs) because other modifiers are tightly coupled to the DOM event mechanism.
Other internal events:
inited: Triggered when initialization is complete.showtip: Triggered when tooltip is shown.hidetip: Triggered when tooltip is hidden.<template>
<uni-echarts
:option="option"
@click="handleClick"
@finished.once="handleFinished"
@zr:click="handleZrClick"
@native:tap="handleNativeTap"
></uni-echarts>
</template>If Uni ECharts is helpful to your project, you can support the development team through several channels:
You can provide voluntary financial sponsorship via WeChat or Alipay. When making a payment, please use the following remark formats to ensure your support is recognized:
uni-echarts.[platform]@[id]: [message]uni-echarts.github@xiaohe0601: 这个插件真好用！uni-echarts.csdn@xiaohe0601: 这个插件真好用！uni-echarts.[id]: [message]uni-echarts.xiaohe0601: 这个插件真好用！