uniapp vue3 如何使用echarts图表库

在uniapp的vue3项目中如何正确引入和使用echarts图表库？我按照官方文档配置后总是报错，包括找不到模块或渲染失败的问题。具体遇到两个难点：1) 如何在uniapp的vue3环境中安装echarts依赖；2) 如何正确初始化echarts实例并绑定到页面元素上。有没有完整的配置示例或可行的解决方案？

2 回复

在uniapp vue3中使用echarts：

  1. 安装依赖：npm install echarts
  2. 引入：import * as echarts from 'echarts'
  3. 在onMounted中初始化：
const chart = echarts.init(document.getElementById('chart'));
chart.setOption({...});

注意：uniapp需使用webview或renderjs处理dom操作。


在 UniApp + Vue 3 中使用 ECharts 图表库，可以通过以下步骤实现：

1. 安装依赖

npm install echarts --save

2. 引入 ECharts

在需要使用图表的页面或组件中引入：

<template>
  <view>
    <canvas id="myChart" canvas-id="myChart" style="width: 100%; height: 400px;"></canvas>
  </view>
</template>

<script setup>
import { onMounted } from 'vue';
import * as echarts from 'echarts';

onMounted(() => {
  // 获取 Canvas 节点（UniApp 需使用 uni.createCanvasContext）
  const canvas = document.getElementById('myChart');
  const chart = echarts.init(canvas);
  
  // 配置图表选项
  const option = {
    title: { text: '示例图表' },
    tooltip: {},
    xAxis: { data: ['A', 'B', 'C'] },
    yAxis: {},
    series: [{ type: 'bar', data: [10, 20, 30] }]
  };
  
  // 渲染图表
  chart.setOption(option);
});
</script>

3. 注意事项

  • 平台兼容性：部分 ECharts 功能在微信小程序等平台可能受限，建议使用 echarts-for-weixin 适配版本。
  • 性能优化：大数据量时启用 large 模式或使用增量渲染。
  • 响应式：监听窗口变化并调用 chart.resize()。

替代方案（推荐）

使用专为 UniApp 优化的图表库（如 uCharts）可减少兼容性问题，但 ECharts 功能更全面。根据项目需求选择即可。

以上代码演示了基础柱状图，其他图表类型只需修改 option 配置。

回到顶部