uniapp-echarts @dcloudio/uni-echarts的使用方法

“在uniapp项目中如何使用@dcloudio/uni-echarts插件？我按照官方文档引入后图表无法正常显示，请问具体需要哪些配置步骤？是否需要在pages.json里特殊配置？另外，如何实现图表的点击事件和动态数据更新？求完整的示例代码。”

2 回复

安装依赖：npm install @dcloudio/uni-echarts echarts。在页面中引入组件，配置option，绑定数据即可使用。注意在H5端需手动引入echarts库。


在 UniApp 中使用 @dcloudio/uni-echarts 库可以方便地集成 ECharts 图表，适用于移动端和小程序环境。以下是基本使用方法：

1. 安装依赖

在项目根目录执行：

npm install echarts @dcloudio/uni-echarts

2. 引入组件

在 pages.json 中注册组件：

{
  "usingComponents": {
    "uni-echarts": "@dcloudio/uni-echarts/components/uni-echarts/uni-echarts"
  }
}

3. 页面使用

在 Vue 模板中添加组件：

<template>
  <view>
    <uni-echarts ref="chart" :option="option" canvasId="chart1"/>
  </view>
</template>

4. 配置图表

在脚本中定义图表配置：

<script>
export default {
  data() {
    return {
      option: {
        title: { text: '示例图表' },
        xAxis: {
          type: 'category',
          data: ['A', 'B', 'C']
        },
        yAxis: { type: 'value' },
        series: [{
          data: [10, 20, 30],
          type: 'bar'
        }]
      }
    }
  },
  onReady() {
    // 可在此通过 this.$refs.chart 调用实例方法
  }
}
</script>

5. 常用功能

  • 动态更新：修改 option 数据即可更新图表
  • 事件监听：通过 @click="onChartClick" 绑定点击事件
  • 自适应：组件默认支持屏幕旋转和尺寸变化

注意事项

  • 确保 canvasId 唯一
  • 小程序中需开启 canvas2d 以提升性能
  • 复杂图表建议使用 ECharts 官网的配置项

通过以上步骤即可快速在 UniApp 中集成交互式图表。

回到顶部