#插件需求# 找一个饼状图 左边是标签显示类型和个数 右边是饼状图

在 uni-app/uni-app-x 中要实现「左侧标签列表 + 右侧饼状图」的布局，最省事的办法是直接使用插件市场里现成的图表组件。
推荐下面两款（都支持 App、H5、各家小程序，uni-app-x 也能用）：

1. uCharts 饼图
   插件地址：https://ext.dcloud.net.cn/plugin?id=271
   特点：

   • 官方维护，长期更新
   • 支持把图例（legend）放在左侧，图表放右侧，正好符合“左边标签、右边饼图”的需求
   • 支持 uni_modules 方式一键安装，示例代码里直接有「图例在左、饼图在右」的写法，复制即用

2. l-echarts 饼图
   插件地址：https://ext.dcloud.net.cn/plugin?id=489
   特点：

   • 基于 ECharts，功能最全
   • 通过 grid / legend 的 left、right 配置项，也能把图例定位到左侧，饼图定位到右侧

安装步骤（以 uCharts 为例）

1. HBuilderX → 插件市场 → 搜索 “uCharts 饼图” → 点击 “导入插件” → 选择 uni_modules 目录。
2. 在页面里直接引用：

<template>  
  <view class="wrapper">  
    <qiun-data-charts  
      type="pie"  
      :chartData="chartData"  
      :opts="opts"  
    />  
  </view>  
</template>  

<script setup>  
import { ref } from 'vue'  

const chartData = ref({  
  series: [  
    {  
      data: [  
        { name: '类型A', value: 35 },  
        { name: '类型B', value: 25 },  
        { name: '类型C', value: 40 }  
      ]  
    }  
  ]  
})  

// 把图例放在左侧  
const opts = ref({  
  legend: {  
    position: 'left',  
    padding: 20  
  }  
})  
</script>  

<style>  
.wrapper {  
  display: flex;  
  height: 100vh;  
}  
</style>

如果您用的是 uni-app-x（uvue + uts），上述组件同样支持，只是页面后缀改成 .uvue，其余写法一致。

专业插件定制，有需要欢迎随时联系