Uni ECharts官网：一个专门为uni-app框架设计的ECharts图表组件

Uni ECharts是一款将Apache ECharts（Apache 软件基金会开源项目）适配到uni-app环境的组件库。它允许开发者在uni-app项目中使用 `ECharts` 的所有强大功能，轻松创建交互式图表和可视化报表。

Uni ECharts核心特点：

1、多端兼容性强：

– 跨平台支持：支持 Web (H5)、微信/支付宝/百度/头条等小程序、App (Android/iOS) 以及 字节跳动小程序 等多种运行环境。

– 统一开发体验：开发者只需编写一套代码，ECharts 图表即可在所有端口保持一致的显示效果，无需针对不同端口写多套代码。

2、性能与渲染优化：

– 底层基于 ZRender：ECharts 底层依赖轻量级 Canvas 类库 ZRender，支持 Canvas 和 SVG 双引擎渲染。

– 移动端适配：针对移动端性能进行了优化，支持高效的数据渲染和交互。

– 自适应布局：支持响应式设计，能够适应不同屏幕尺寸的设备。

3、丰富的图表类型：

– 多种图表：支持折线图、柱状图、散点图、饼图、K 线图、热力图、关系图、雷达图、仪表盘等多种图表类型。

– 高自定义：支持自定义图表样式、数据映射、动画效果和交互事件。

4、开源与社区：

– MIT 协议开源：项目基于 MIT 协议开源，允许免费商用，社区活跃。

– 基于 Vue 3：Uni ECharts 专为 Vue 3 设计，提供易用的组件化调用方式。

5、开发体验：

– Vue 组件化：提供了类似 `vue-echarts` 的使用体验，开发者可以通过组件属性轻松配置图表。

– 易于集成：提供 `easycom` 支持，能够自动引入组件，简化引用过程。

Uni ECharts平台兼容性对比：

Uni ECharts安装与集成指南：

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

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

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

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)
}

进入Uni ECharts官网入口