uniapp 小程序vue3如何使用echarts绘制图表

在uniapp的小程序项目中，使用vue3框架该如何集成echarts来绘制图表？我尝试直接引入echarts报错，是否需要特殊配置或引入特定的版本？希望能提供一个完整的实现示例，包括如何引入echarts、初始化图表以及处理小程序的兼容性问题。另外，在小程序中使用echarts是否会遇到性能问题，有什么优化建议？

2 回复

在uniapp小程序中使用vue3和echarts，需先安装echarts-for-wx-vue库。然后引入echarts组件，在setup中初始化图表实例，通过ref绑定canvas，调用setOption方法配置数据即可绘制图表。


在 UniApp 小程序中使用 Vue3 和 ECharts 绘制图表，可以通过以下步骤实现：

1. 安装 ECharts 依赖

在项目根目录下执行：

npm install echarts --save

2. 创建图表组件

在 Vue3 的 <script setup> 中引入 ECharts 并初始化：

<template>
  <view class="chart-container">
    <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 节点（小程序环境需使用 uni.createCanvasContext）
  const query = uni.createSelectorQuery().in(this)
  query.select('#myChart')
    .fields({ node: true, size: true })
    .exec((res) => {
      if (!res[0]) return
      
      const canvas = res[0].node
      const chart = echarts.init(canvas)
      
      // 设置图表配置
      const option = {
        title: { text: '示例图表' },
        tooltip: {},
        xAxis: {
          data: ['A', 'B', 'C', 'D', 'E']
        },
        yAxis: {},
        series: [{
          name: '销量',
          type: 'bar',
          data: [10, 20, 30, 40, 50]
        }]
      }
      
      chart.setOption(option)
    })
})
</script>

3. 小程序适配注意事项

  • 需在 manifest.json 的 mp-weixin 配置中启用 Canvas 2D：
"mp-weixin": {
  "setting": {
    "canvas": true
  }
}
  • 若使用 TypeScript，可能需要配置 ECharts 类型声明

4. 性能优化建议

  • 对于复杂图表，建议使用 echarts-for-weixin 小程序专用版本
  • 在页面卸载时调用 chart.dispose() 清理资源

通过以上步骤即可在 UniApp Vue3 项目中正常使用 ECharts 绘制图表。注意在小程序真机测试时确保 Canvas 组件正确渲染。

回到顶部