【鸿蒙征文】Uni ECharts 2.1 发布：正式支持鸿蒙，零成本迁移、全平台兼容、跨端开发零负担！

Uni ECharts 是适用于 uni-app 的 Apache ECharts 组件，无需繁琐的步骤即可轻松在 uni-app 平台上使用 echarts。

官网 & 文档：https://uni-echarts.xiaohe.ink

插件市场：https://ext.dcloud.net.cn/plugin?id=22035

Github：https://github.com/xiaohe0601/uni-echarts

🏝️ 背景

🎵 “本来应该从从容容游刃有余，现在是匆匆忙忙连滚带爬，睁眼说瞎话，你在哽咽什么啦，你在哭什么哭，没出息！”

每当听见同事阿尹在工位旁哼起这首歌，我都忍不住陷入沉思 —— 那一刻，我看到的不只是他在 emo，更像是无数开发者在鸿蒙适配路上的缩影。

是的，在过去一段时间里，由于 uni-app 不支持鸿蒙模拟器调试，而我又苦于没有鸿蒙手机，导致 Uni ECharts 并不能在鸿蒙系统上顺利运行。有鸿蒙需求的开发者们用起来就像是在赶末班车 “匆匆忙忙、连滚带爬”，我是夜不能寐、如鲠在喉。

如今 uni-app 终于支持鸿蒙模拟器调试，痛定思痛，我再也坐不住了！这一次，一定要让这件事情画上一个完美的句号。

于是，我们决定不再将就，团队成员一拍即合 —— 必须让 Uni ECharts 能够在鸿蒙系统运行，与主流生态全面接轨。更重要的是，无需改动一行代码，真正做到 “一次开发、多端运行”，开发者从此 “从从容容、游刃有余”，不再哽咽，大家都会 “有出息”！

上文中的 “团队成员” 目前指的是我自己 🙃，如果你对维护 Uni ECharts 感兴趣的话欢迎到 Github 提交 PR 👏，一起用爱发电！

在此，对已经或将来为 Uni ECharts 贡献代码的开发者朋友们由衷表示感谢！🙏

项目地址：https://github.com/xiaohe0601/uni-echarts

🎉 2.1 正式发布

现在，Uni ECharts 成功完成了对鸿蒙的适配，所以 2.1 版本正式发布啦！

安装及使用方法与其他端别无二致，那么就一起来回顾一下吧～

👉 前往 Uni ECharts 官网快速开始查看完整内容

前置条件：

echarts >= 5.3.0
vue >= 3.3.0（目前 uni-app 尚未适配 Vue 3.5，推荐使用 3.4.x 与 uni-app 保持一致）

安装

# pnpm  
pnpm add echarts uni-echarts  

# yarn  
yarn add echarts uni-echarts  

# npm  
npm install echarts uni-echarts

配置

由于 Uni ECharts 发布到 npm 上的包是未经编译的 vue 文件，为了避免 Vite 对 Uni ECharts 依赖预构建导致生成额外的 echarts 副本，当使用 npm 方式时需要手动配置 Vite 强制排除 uni-echarts 的预构建。

// vite.config.js[ts]  

import { defineConfig } from "vite";  

export default defineConfig({  
  // ...  
  optimizeDeps: {  
    exclude: [  
      "uni-echarts"  
    ]  
  }  
});

Vite 插件

自 2.0.0 开始，Uni ECharts 提供了 Vite 插件用于自动化处理一些繁琐、重复的工作，也为将来更多的高级功能提供了可能性。

// vite.config.js[ts]  

import { UniEcharts } from "uni-echarts/vite";  
import { defineConfig } from "vite";  

export default defineConfig({  
  // ...  
  plugins: [  
    UniEcharts()  
  ]  
});

自动导入（可选）

Uni ECharts 可以配合 @uni-helper/vite-plugin-uni-components 和 unplugin-auto-import 实现组件和 API 的自动按需导入。

# pnpm  
pnpm add -D @uni-helper/vite-plugin-uni-components unplugin-auto-import  

# yarn  
yarn add --dev @uni-helper/vite-plugin-uni-components unplugin-auto-import  

# npm  
npm install -D @uni-helper/vite-plugin-uni-components unplugin-auto-import

// vite.config.js[ts]  

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()  
      ]  
    }),  
    // 确保放在 `Uni()` 之前  
    UniComponents({  
      resolvers: [  
        UniEchartsResolver()  
      ]  
    }),  
    Uni()  
  ]  
});

如果使用 pnpm 管理依赖，请在项目根目录下的 .npmrc 文件中添加如下内容，参见 issue 389。

shamefully-hoist=true # or public-hoist-pattern[]=@vue*

如果使用 TypeScript 可以在 tsconfig.json 中添加如下内容为自动导入的组件提供类型提示（需要 IDE 支持）。

{  
  "compilerOptions": {  
    "types": [  
      // ...  
      "uni-echarts/global"  
    ]  
  }  
}

使用

<template>  
  <uni-echarts custom-class="chart" :option="option"></uni-echarts>  
</template>  

<script setup>  
import { PieChart } from "echarts/charts";  
import { DatasetComponent, LegendComponent, TooltipComponent } from "echarts/components";  
import * as echarts from "echarts/core";  
import { CanvasRenderer } from "echarts/renderers";  
import { ref } from "vue";  

echarts.use([  
  LegendComponent,  
  TooltipComponent,  
  DatasetComponent,  
  PieChart,  
  CanvasRenderer  
]);  

const option = ref({  
  legend: {  
    top: 10,  
    left: "center"  
  },  
  tooltip: {  
    trigger: "item",  
    textStyle: {  
      // #ifdef MP-WEIXIN  
      // 临时解决微信小程序 tooltip 文字阴影问题  
      textShadowBlur: 1  
      // #endif  
    }  
  },  
  series: [  
    {  
      type: "pie",  
      radius: ["30%", "52%"],  
      label: {  
        show: false,  
        position: "center"  
      },  
      itemStyle: {  
        borderWidth: 2,  
        borderColor: "#ffffff",  
        borderRadius: 10  
      },  
      emphasis: {  
        label: {  
          show: true,  
          fontSize: 20  
        }  
      }  
    }  
  ],  
  dataset: {  
    dimensions: ["来源", "数量"],  
    source: [  
      ["Search Engine", 1048],  
      ["Direct", 735],  
      ["Email", 580],  
      ["Union Ads", 484],  
      ["Video Ads", 300]  
    ]  
  }  
});  
</script>  

<style scoped>  
.chart {  
  height: 300px;  
}  
</style>