Uni ECharts - 基于 ECharts 开发的 uni-app 跨端图表解决方案，和 Vue ECharts 用法几乎一致

uni-app 虽然号称一套代码多端运行，但很多 web 库是无法跨端的，图表就是一大痛点。这个工具库就是解决这样的问题。

封面图底图来自免费商用图库 Pixabay。

uni-app 跨端图表解决方案

Uni ECharts 是一个专门为 uni-app 框架设计的 ECharts 图表组件，作者是来自成都的开发者 xiaohe0601，支持 TypeScript，核心目标是让开发者在多端环境中获得统一、高效的图表开发体验。

Uni ECharts 官网
Uni ECharts 官网

Uni ECharts 通过统一的 API 设计，实现了真正意义上的“一次编写，处处运行”，让开发者无需操心底层渲染差异，只需关注图表本身的配置与数据，在 Web、各平台小程序及 App 上获得一致的渲染效果。

为什么图表开发麻烦？

实际上在 JavaScript 中图表的生态很成熟了，有很成熟的解决方案支持着各种数据大屏应用，各类酷炫图表展示自然不再话下。但在要跨端的话，就没那么简单了。

为了高效，国内开发小程序，甚至是对性能要求不算高的 APP 开发，都会考虑用 uni-app。我也是 uni-app 多年的老开发者了，图表展示的兼容性往往让开发者头疼。最大的问题是 web 端使用的 js 库里的 DOM、window 这样的 API，在小程序和 APP 都是不支持的，canvas 也一样，以前我只能用臃肿并且繁琐的 renderjs 来解决，不同平台间的差异可能导致代码重复、调试困难，最终影响开发效率和用户体验。

图表预览
图表预览

实际上哪怕我们不需要跨端，比如只在 APP 开发图，表也优先用 Uni ECharts，因为使用真的很简单，几乎和 Vue ECharts 有一模一样的开发体验。

开发上手使用

平台兼容性对比：

平台类型支持程度关键特性
H5（Web）完全支持完整的 ECharts 功能，支持所有图表类型和交互
微信小程序完全支持基于 Canvas 渲染，性能优秀，支持触摸交互
支付宝小程序完全支持适配小程序 API，保证与微信小程序一致体验
百度小程序完全支持针对百度小程序环境进行专门适配
字节跳动小程序完全支持兼容字节跳动小程序特有 API 和限制
App（iOS/Android）完全支持原生渲染支持，高性能，流畅体验

安装与集成指南

Uni ECharts 支持 npm 和 uni-modules 两种方式安装，uni-app 项目的组件我一般都用 uni-modules，主要是支持 easycom 规范， 使用 uni-modules 方式什么都不用配置即可免导入直接使用组件，比较省心。

需要注意的是官方推荐使用 Vue 3.4.x，3.5 并未适配。

下面展示的是 uni-modules 方式，但 Uni ECharts 依赖 echarts，第一步还是要安装：

# 通过 npm 安装 echarts 核心库
npm install echarts --save

然后在 uni-app 插件市场下载 Uni ECharts，导入到 HbuilderX 中，会自动下载到 uni-app 项目的 uni-modules 目录

基本配置与使用

安装完成后，您可以在页面中使用 Uni ECharts 组件：

<template>
  <uni-echarts custom-class="chart-wrap" :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";
// 注意 API 也需手动导入
import { provideEcharts, provideEchartsTheme } from "@/uni_modules/xiaohe-echarts";

// 调用 provideEcharts 才能正常运行
provideEcharts(echarts);

// 可以通过 provide 修改图表 theme ，设置暗黑模式
provideEchartsTheme("dark");

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

const option = ref({
  legend: {
    top: 10,
    left: "center"
  },
  tooltip: {
    trigger: "item"
  },
  series: [
    {
      type: "pie",
      radius: ["25%", "50%"],
      label: {
        show: false,
        position: "center"
      },
      itemStyle: {
        borderWidth: 2,
        borderColor: "#ffffff",
        borderRadius: 12
      },
      emphasis: {
        label: {
          show: true,
          fontSize: 18
        }
      }
    }
  ],
  dataset: {
    dimensions: ["来源", "数量"],
    source: [
      ["Search Engine", 1048],
      ["Direct", 735],
      ["Email", 580],
      ["Union Ads", 484],
      ["Video Ads", 300]
    ]
  }
});
</script>

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

高级配置与优化

对于复杂场景，Uni ECharts 提供了丰富的配置选项：

// 响应式图表示例
const getAutoResizeOption = (chartData) => ({
  backgroundColor: '#ffffff',
  tooltip: {
    trigger: 'axis',
    formatter: function(params) {
      return `${params[0].name}<br/>数值：${params[0].value}`
    }
  },
  grid: {
    left: '3%',
    right: '4%',
    bottom: '3%',
    containLabel: true
  },
  // ... 更多其他配置
})

// 监听图表事件
const handleChartClick = (params) => {
  console.log('被点击：', params)
}

使用建议

适用场景广泛，包括但不限于：

  • 企业数据 dashboard 需要多端展示；
  • 移动端数据报表与可视化；
  • 跨平台小程序中的数据分析功能；
  • 教育、金融等行业的移动端图表需求。
图表预览
图表预览

免费开源和商用说明

Uni ECharts 是一个免费开源的 JavaScript 项目，基于 MIT 许可发布，Uni ECharts 依赖的 echarts 也是免费开源的，我们可以自由地下载来使用，作者也在官网明确表示可以商用。