uniapp vue3 echarts 如何使用

在uniapp中使用vue3集成echarts时遇到问题，按照官方文档配置后图表无法正常显示。具体步骤是：通过npm安装了echarts和@vue/composition-api，在页面组件中引入并初始化图表，但页面只显示空白区域没有渲染出图表。控制台没有报错信息，请问正确的集成方式是什么？是否需要额外的polyfill或配置？求一个完整的实现示例。

2 回复

在uniapp的vue3项目中，先安装echarts和uni-echarts插件。然后在页面中引入并使用uni-echarts组件，配置好option即可显示图表。注意要适配小程序环境。


在 UniApp + Vue3 中使用 ECharts 的步骤如下：

  1. 安装 ECharts
    在项目根目录执行：

    npm install echarts --save

  2. 创建图表组件
    新建 components/echarts.vue：

    <template>
  <view class="chart-container">
    <canvas 
      :canvas-id="chartId" 
      :id="chartId" 
      class="chart"
    ></canvas>
  </view>
</template>

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

const props = defineProps({
  chartId: {
    type: String,
    default: 'chart'
  }
})

let chart = null

onMounted(() => {
  // 需使用nextTick确保Canvas已渲染
  setTimeout(initChart, 100)
})

const initChart = () => {
  // 获取Canvas节点（需使用uni.createCanvasContext）
  const query = uni.createSelectorQuery().in(this)
  query.select('#' + props.chartId)
    .fields({ node: true, size: true })
    .exec(res => {
      if (!res[0]) return
      
      const canvasNode = res[0].node
      chart = echarts.init(canvasNode)

      // 设置示例配置
      chart.setOption({
        xAxis: { type: 'category', data: ['A', 'B', 'C'] },
        yAxis: { type: 'value' },
        series: [{ data: [10, 20, 30], type: 'line' }]
      })
    })
}
</script>

<style scoped>
.chart-container {
  width: 100%;
  height: 300px;
}
.chart {
  width: 100%;
  height: 100%;
}
</style>

  3. 在页面中使用

    <template>
  <view>
    <echarts chart-id="myChart" />
  </view>
</template>

<script setup>
import echarts from '@/components/echarts.vue'
</script>

注意事项：

  • 需在 manifest.json 的 "app-plus" 节点添加：
    "usingComponents": true
  • 若遇到 Canvas 渲染问题，可尝试使用 echarts-for-weixin 适配版本
  • H5 端可直接使用标准 ECharts，小程序端需使用 Canvas 渲染

通过以上步骤即可在 UniApp Vue3 中正常使用 ECharts 图表。

回到顶部