Vue3折线图，柱状图，饼图，各种图表，适用于所有全平台

### 如何在 UniApp 中使用 ECharts 创建饼图 #### 准备工作 为了能够在 UniApp 项目中集成并使用 ECharts 实现饼图，需先完成如下准备工作： - 访问[ECharts 官网](https://echarts.apache.org/)在线构建所需图表功能模块，并下载压缩包。对于大多数场景而言，默认配置下的柱状图、折线图以及饼图已经可以满足需求[^1]。 - 下载后的文件应放置于项目的 `static` 文件夹内以便后续引用。 #### 注册全局组件 编辑 `main.js` 文件，在其中引入已准备好的 ECharts 组件，并将其注册为全局可用的组件： ```javascript import Vue from &#39;vue&#39;; // 假设 echarts.vue 是之前创建的一个封装了 e-charts 的 vue 组件 import echartsComponent from &#39;./components/echarts/echarts.vue&#39;; Vue.component(&#39;v-echart&#39;, echartsComponent); new Vue({ render: h => h(App), }).$mount(&#39;#app&#39;); ``` 注意这里假设的是名为 `echarts.vue` 的自定义组件被存放在指定路径下；实际操作时应当依据实际情况调整导入语句中的相对路径。 #### 页面开发实例 下面给出一段简单的 HTML 和 JavaScript 代码片段来展示如何在一个具体的页面里利用上述设置绘制一个基础版本的饼图： ```html <template> <view class="container"> <!-- 使用前面注册过的 v-echart 自定义标签 --> <v-echart ref="pieChart" :options="chartOptions"></v-echart> </view> </template> <script> export default { data() { return { chartOptions: { title: { text: "某站点用户访问来源", subtext: "", x: "center" }, tooltip: { trigger: "item", formatter: "{a} <br/>{b}: {c} ({d}%)" }, legend: { orient: "vertical", left: "left", data: ["直接访问", "邮件营销", "联盟广告"] }, series: [ { name: "访问来源", type: "pie", radius: "55%", center: ["50%", "60%"], data: [ { value: 335, name: "直接访问" }, { value: 310, name: "邮件营销" }, { value: 234, name: "联盟广告" } ], itemStyle: { emphasis: { shadowBlur: 10, shadowOffsetX: 0, shadowColor: "rgba(0, 0, 0, 0.5)" } } } ] } }; } }; </script> ``` 这段代码展示了怎样通过给定的数据集渲染出一张描述不同类别占比情况的饼形统计图形。同时设置了标题、提示框样式以及其他视觉效果选项以增强可读性和美观度。 #### 饼图显示项排列方式优化 如果希望进一步美化或改变默认布局，则可以通过修改 `series` 节点内的 `labelFormatter` 属性来进行个性化定制。此属性允许传入一个函数形式的参数，从而灵活控制每个扇区上所呈现的文字信息及其格式[^2]。 例如，想要让百分比数值保留两位小数位的话，可以在对应位置加入这样的处理逻辑： ```json { ... labelLine: true, label: { show: true, position: &#39;outside&#39;, formatter: function (params) { return `${params.name}\n${parseFloat(params.percent).toFixed(2)}%`; } } } ``` 这样就可以确保最终生成的图表不仅直观易懂而且更加贴近业务需求。