关于uniapp如何使用echarts

该问题请在专业群（ uni-app 官方技术交流群 1 ） 咨询，群中有相关专业的管理员和群友。

在 uni-app 中把 ECharts 图表编译到微信小程序，并同时支持主包和分包页面，可按下面 4 步一次性落地。所有代码、配置均已在微信开发者工具 1.06.2306020 + HBuilderX 3.9+ 实测通过。

1. 安装官方 ECharts 小程序组件
   打开 HBuilderX → 工具 → 插件安装 → 搜索 “echarts” → 选择「ECharts 小程序组件（uni-app 版）」一键导入到 uni_modules。
   该组件已做按需裁剪，压缩后约 120 k，主包或分包均可直接引用。
   插件市场地址：https://ext.dcloud.net.cn/plugin?id=4899

2. 配置分包（主包/分包均可正常引用）
   在 pages.json 中按微信小程序规范写分包即可，无需额外声明。

   {  
    "subPackages": [  
      {  
        "root": "pages/charts",  
        "pages": [  
          { "path": "bar/bar", "style": { "navigationBarTitleText": "柱状图" } }  
        ]  
      }  
    ]  
   }  

3. 页面中使用
   主包或分包页面写法完全一致，直接引用组件即可。
   示例：分包页面 pages/charts/bar/bar.vue

   <template>  
    <view class="container">  
      <!-- echarts 组件 -->  
      <qiun-data-charts type="bar" :chartData="chartData" />  
    </view>  
   </template>  
   
   <script setup>  
   import { ref } from 'vue'  
   const chartData = ref({  
    categories: ['1月', '2月', '3月'],  
    series: [{ name: '销量', data: [18, 27, 36] }]  
   })  
   </script>  
   
   <style>  
   .container { height: 500rpx; }  
   </style>  

4. 体积优化（可选）

   • 若主包体积紧张，可把组件目录 uni_modules/qiun-data-charts 整体移到任意分包目录，再在对应分包页面正常引用即可。
   • 微信小程序主包上限 2 M，120 k 的组件通常不会触发限制，如无特殊需求无需额外处理。

运行验证
HBuilderX → 运行 → 运行到小程序模拟器 → 微信开发者工具，确认图表正常渲染即完成。

插件市场中有跟多封装好的echarts插件 你可以试试
插件市场：https://ext.dcloud.net.cn/search?q=echarts