前端数据可视化UI组件【免费下载链接】v-charts基于 Vue2.0 和 ECharts 封装的图表组件项目地址https://gitcode.com/gh_mirrors/vc/v-charts点击查看免费下载v-charts 是基于 Vue2.0 与 ECharts 封装的图表组件库饼图ve-pie是其最常用的占比展示组件。本文以仓库 docs/pie.md 为核心系统讲解饼图的数据组织方式、全部settings配置项以及玫瑰图、限制条数、多圆饼图、数据格式化、半径偏移等实战场景并结合 饼图核心实现 与 公共渲染核心 的源码说明每个配置项背后的真实行为与默认值。读完本文你可以在自己的 Vue2 项目中直接接入饼图并针对业务需要完成从指标维度指定到多圆嵌套展示的完整定制。一、接入 v-charts 饼图组件1. 安装依赖v-charts 与 ECharts 是 peer 依赖关系需要一并安装详见 docs/install.mdnpm i v-charts echarts -S2. 引入组件完整引入详见 docs/start.mdimport Vue from vue import VCharts from v-charts Vue.use(VCharts)按需引入只引入饼图减小打包体积import Vue from vue import VePie from v-charts/lib/pie.common Vue.component(VePie.name, VePie)组件内部会自动引入 ECharts 的 pie 模块见 src/packages/pie/index.js无需手工注册。二、饼图的数据模型指标与维度v-charts 的数据由columns与rows两部分组成详见 docs/data.mdcolumns维度和指标的集合饼图属于单维度单指标图表默认第一个字段是维度第二个字段是指标rows数据的集合每一行是一个对象键为 columns 中的字段名。以下数据表示日期维度下访问用户这一指标在各日期上的取值chartData: { columns: [日期, 访问用户], rows: [ { 日期: 1/1, 访问用户: 1393 }, { 日期: 1/2, 访问用户: 3530 }, { 日期: 1/3, 访问用户: 2923 }, { 日期: 1/4, 访问用户: 1723 }, { 日期: 1/5, 访问用户: 3792 }, { 日期: 1/6, 访问用户: 4593 } ] }在源码中饼图处理函数pie会对columns、rows做解构并从settings中取出配置项见 src/packages/pie/main.js。其中两个最关键默认值来自列名本身dimension columns[0]默认第一列为维度metrics columns[1]默认第二列为指标。三、最简单的饼图示例将数据直接绑定给ve-pie即可生成一张饼图template ve-pie :datachartData/ve-pie /template script export default { data () { return { chartData: { columns: [日期, 访问用户], rows: [ { 日期: 1/1, 访问用户: 1393 }, { 日期: 1/2, 访问用户: 3530 }, { 日期: 1/3, 访问用户: 2923 }, { 日期: 1/4, 访问用户: 1723 }, { 日期: 1/5, 访问用户: 3792 }, { 日期: 1/6, 访问用户: 4593 } ] } } } } /script生成时源码会将每一行数据映射为 ECharts 的{ name: row[dimension], value: row[metrics] }结构见 src/packages/pie/main.js因此扇区名取自维度列扇区数值取自指标列。四、设置指标与维度dimension、metrics当数据中存在多个候选字段或维度/指标不在第一、第二列时可以通过settings显式指定template ve-pie :datachartData :settingschartSettings/ve-pie /template script export default { data () { this.chartSettings { dimension: 日期, metrics: 访问用户 } return { chartData: { columns: [日期, 访问用户], rows: [ { 日期: 1/1, 访问用户: 1393 }, { 日期: 1/2, 访问用户: 3530 }, { 日期: 1/3, 访问用户: 2923 }, { 日期: 1/4, 访问用户: 1723 }, { 日期: 1/5, 访问用户: 3792 }, { 日期: 1/6, 访问用户: 4593 } ] } } } } /script从源码可以看出这两个配置直接影响后续所有环节getPieSeries用row[dimension]作扇区名、row[metrics]作数值src/packages/pie/main.jsgetPieLegend按row[dimension]生成图例数据getPieTooltip则按row[metrics]累加总数并计算百分比src/packages/pie/main.js。五、南丁格尔玫瑰图roseType设置roseType即可让饼图以南丁格尔玫瑰图形态展示扇区半径随数值大小变化template ve-pie :datachartData :settingschartSettings/ve-pie /template script export default { data () { this.chartSettings { roseType: radius } return { chartData: { columns: [日期, 访问用户], rows: [ { 日期: 1/1, 访问用户: 1393 }, { 日期: 1/2, 访问用户: 3530 }, { 日期: 1/3, 访问用户: 2923 }, { 日期: 1/4, 访问用户: 1723 }, { 日期: 1/5, 访问用户: 3792 }, { 日期: 1/6, 访问用户: 4593 } ] } } } } /script配置取值与行为取值效果radius扇区半径与数值大小成正比视觉差异最明显area扇区面积与数值成正比适合数值跨度较大的场景不设置默认普通饼图各扇区半径一致在源码中roseType会被原样透传给 ECharts 的 series见 src/packages/pie/main.js因此完整的语义与 ECharts 的series-pie.roseType保持一致。一个值得注意的细节是当配合环图ve-ring使用时开启玫瑰图会把默认半径从[80, 100]切换为[20, 100]见 src/packages/pie/main.js避免内半径过大导致玫瑰扇区无法充分伸展。六、限制显示条数limitShowNum当分类过多时饼图会显得拥挤。设置limitShowNum可以让超出数量的扇区合并为一个其他扇区template ve-pie :datachartData :settingschartSettings/ve-pie /template script export default { data () { this.chartSettings { limitShowNum: 5 } return { chartData: { columns: [日期, 访问用户], rows: [ { 日期: 1/1, 访问用户: 1393 }, { 日期: 1/2, 访问用户: 3530 }, { 日期: 1/3, 访问用户: 2923 }, { 日期: 1/4, 访问用户: 1723 }, { 日期: 1/5, 访问用户: 3792 }, { 日期: 1/6, 访问用户: 4593 } ] } } } } /script源码中的完整处理流程如下src/packages/pie/main.js若设置了limitShowNum先对innerRows按指标值从大到小排序innerRows.sort((a, b) b[metrics] - a[metrics])src/packages/pie/main.js保证保留的是数值最大的前 N 项取前limitShowNum项作为扇区把其余项数值求和追加为{ name: 其他, value: sum }图例同步只保留前 N 项并追加其他见getPieLegendsrc/packages/pie/main.js提示框做了特别处理鼠标悬停在其他扇区上时会逐条列出被合并分类的名称、数值与各自占比src/packages/pie/main.js信息不丢失。七、多圆饼图levellevel支持二维数组可以让饼图呈现内饼 外环的多层结构。内层展示第一个子数组中维度值对应的数据外层展示第二个子数组对应的数据template ve-pie :datachartData :settingschartSettings/ve-pie /template script export default { data () { this.chartSettings { level: [ [1/1, 1/2, 1/3], [1/4, 1/5] ] } return { chartData: { columns: [日期, 访问用户], rows: [ { 日期: 1/1, 访问用户: 1393 }, { 日期: 1/2, 访问用户: 3530 }, { 日期: 1/3, 访问用户: 2923 }, { 日期: 1/4, 访问用户: 1723 }, { 日期: 1/5, 访问用户: 3792 }, { 日期: 1/6, 访问用户: 4593 } ] } } } } /script原文档备注docs/pie.md 表格下方level的值接受二维数组例如[[a, b], [c, d]]表示内层展示维度中a、b的指标加在一起组成的饼图外层为c、d的指标加在一起组成的环图。源码实现分为三步src/packages/pie/main.js分组遍历level用setArrayValue建立维度值 → 层级下标的映射levelTemp再把每一行数据按所属层级归入对应的rowsTemp数组半径计算centerWidth radius / rowsTempLength最内层index 为 0使用实心饼图半径其余外层使用[outerWidth, innerWidth]的环半径区间环与环之间通过radius / (2 * rowsTempLength)精确衔接src/packages/pie/main.js标签处理当存在多层且处于最内层时标签默认定位在扇区内部position: inner外层标签则在外侧避免内层空间不足src/packages/pie/main.js。八、数据格式化dataType 与 digit饼图的数值默认以普通数字显示通过dataType可以切换显示格式template ve-pie :datachartData :settingschartSettings/ve-pie /template script export default { data () { this.chartSettings { dataType: percent } return { chartData: { columns: [日期, 访问用户], rows: [ { 日期: 1/1, 访问用户: 1393 }, { 日期: 1/2, 访问用户: 3530 }, { 日期: 1/3, 访问用户: 2923 }, { 日期: 1/4, 访问用户: 1723 }, { 日期: 1/5, 访问用户: 3792 }, { 日期: 1/6, 访问用户: 4593 } ] } } } } /scriptdataType可选值取值显示效果normal千分位数字如1,393默认值KMB缩写格式如1.4K对应 numerify 的0,0a格式percent百分比格式如12.3%自定义 numerify 格式字符串直接透传给 numerify 解析回调函数形如function (v) { return v }按函数返回值显示这些格式均由工具函数getFormated统一处理src/utils.js内部将三种预设类型映射为 numerify 的格式串——normal→0,0、KMB→0,0a、percent→0,0.[00]%若传入函数则直接调用函数取值。因此除三种预设外还可以使用任意 numerify 格式字符串或自定义函数具体参考 docs/data.md 中的设置数据格式一节。digit用于控制dataType为percent时保留的小数位数默认值为 2。在源码中 digit 会参与getFormated的格式串拼装并在饼图标签与提示框的 formatter 中生效src/packages/pie/main.js。此外从源码看还存在一个未列入文档表格的内部配置percentShow开启后饼图标签会显示为名称: 数值(百分比%)的完整形式src/packages/pie/main.js适合需要直接在扇区上标注占比的场景。九、饼图半径与纵向偏移radius、offsetY饼图默认半径为100、圆心纵向偏移为200常量pieRadius与pieOffsetY见 src/packages/pie/main.js。通过radius与offsetY可调整扇区大小与圆心位置template ve-pie :datachartData :settingschartSettings/ve-pie /template script export default { data () { this.chartSettings { radius: 10, offsetY: 300 } return { chartData: { columns: [日期, 访问用户], rows: [ { 日期: 1/1, 访问用户: 1393 }, { 日期: 1/2, 访问用户: 3530 }, { 日期: 1/3, 访问用户: 2923 }, { 日期: 1/4, 访问用户: 1723 }, { 日期: 1/5, 访问用户: 3792 }, { 日期: 1/6, 访问用户: 4593 } ] } } } } /script行为说明radius饼图半径number源码中会作为centerWidth参与多圆分层计算且 series 的center固定为[50%, offsetY]src/packages/pie/main.jsoffsetY圆心纵向偏移量number默认 200增大该值可让饼图整体下移为顶部标题、图例留出空间。配合环图时radius可传数组形式[内半径, 外半径]如[10, 100]环图实现即复用pie函数并传入isRing truesrc/packages/ring/index.js。十、settings 配置项完整参考表下表完整继承自 docs/pie.md并补充了源码中的默认值与实现依据供实战时对照查阅配置项简介类型备注含源码确认的默认值dimension维度string默认columns[0]为维度metrics指标string默认columns[1]为指标dataType数据类型string可选值KMB、normal、percent默认normallegendLimitlegend 显示数量限制number默认 30legend 数量过多会导致饼图样式错误超过此值时隐藏 legend 可解决该问题selectedMode选中模式string可选值single、multiple默认 falsehoverAnimation是否开启 hover 在扇区上的放大动画效果boolean默认 trueradius饼图半径number默认 100环图场景下默认[80, 100]玫瑰环图默认[20, 100]offsetY纵向偏移量number默认 200digit设置数据类型为 percent 时保留的位数number默认 2roseType显示为南丁格尔玫瑰图string默认不展示可设置为radius、arealabel饼图图形上的文本标签object内容参考 EChartsseries-pie.labellabelLine标签的视觉引导线样式object内容参考 EChartsseries-pie.labelLineitemStyle图形样式object内容参考 EChartsseries-pie.itemStylelevel多圆饼图时设置array接受二维数组limitShowNum设置超过此数字时使用其他代替number此时数据会按照由大到小顺序显示上表中所有默认值均可在 src/packages/pie/main.js 的pie函数解构处找到对应代码例如legendLimit 30、hoverAnimation true、digit 2、offsetY pieOffsetY。十一、源码级原理从数据到 ECharts option 的流转理解饼图的底层工作方式有助于排查自定义问题。整条链路如下核心逻辑在 src/core.js触发data、settings等属性被深度监听变化后调用changeHandler内部为 debounce 后的dataHandler解析dataHandler取出data.columns与data.rows连同settings、extra包含tooltipVisible、legendVisible、颜色主题等一起传给图表专属的chartHandler生成chartHandler即饼图的pie函数返回{ series, legend, tooltip }三部分src/packages/pie/main.js合并optionsHandler将公共属性legendPosition、colors、ECHARTS_SETTINGS覆盖项、extend等合并进 options最终调用echarts.setOption渲染src/core.js。细节一图例与提示框均受公有属性开关控制。getPieLegend只在legendVisible为 true 时生成getPieTooltip只在tooltipVisible为 true 时生成src/packages/pie/main.js对应组件上的legend-visible、tooltip-visible属性见 docs/props.md。细节二legendLimit的隐藏机制。getPieLegend返回show: legend.length legendLimitsrc/packages/pie/main.js当分类数达到legendLimit时自动隐藏整个图例避免图例过长挤压饼图。仓库示例 examples/data/pie.js 展示了legendLimit: 2的用法。细节三legendName支持图例别名。源码中getPieLegend的 formatter 会按legendName映射替换显示名src/packages/pie/main.js例如可以把其他改写为业务语义更明确的名称示例见 examples/data/pie.js。十二、实战建议与常见问题1. 分类太多导致扇区过密优先使用limitShowNum聚合次要分类配合其他扇区保持图表可读性若仍需完整信息提示框会自动列出合并明细不影响数据完整性。2. 图例过长挤压饼图使用legendLimit限制图例数量超过阈值时图例自动隐藏。也可通过公有属性legend-visiblefalse彻底关闭图例。3. 需要突出占比时使用dataType: percent并在digit指定小数位需要直接在扇区上标注完整信息时可从源码确认的percentShow配置开启名称: 数值(百分比)标签。4. 多分类聚合与多层展示使用level二维数组把数据拆成内饼外环每层内部会自动累加数值内层标签自动置于扇区内侧无需手工计算坐标。5. 与公有属性联动饼图同样支持width、height、colors、events、extend、loading、data-empty等全部公有属性详见 docs/props.md例如通过:colors覆盖默认配色、通过extend直接注入自定义 series 配置。延伸阅读数据格式与指标维度详解docs/data.md组件安装与引入方式docs/install.md、docs/start.md公有属性与钩子函数docs/props.md饼图核心实现src/packages/pie/main.js环图复用饼图逻辑src/packages/ring/index.js饼图示例数据集examples/data/pie.js赞分享前端数据可视化UI组件【免费下载链接】v-charts基于 Vue2.0 和 ECharts 封装的图表组件项目地址https://gitcode.com/gh_mirrors/vc/v-charts点击查看免费下载相关推荐Vuetify v-pie 饼图/环形图组件实战指南安装、配置与深度定制Vuetify v pie 饼图/环形图组件实战指南安装、配置与深度定制 v pie 是 Vuetify Labs 中提供的饼图 / 环形图donut组件前端UI组件v-charts 图表切换实战基于 ve-chart 组件用一份数据动态切换折线图、柱状图与饼图v charts 图表切换实战基于 ve chart 组件用一份数据动态切换折线图、柱状图与饼图 v charts基于 Vue2.x 与 ECharts前端数据可视化UI组件Plotly.py 饼图(Pie Charts)完全指南Plotly.py 饼图 Pie Charts 完全指南 饼图 Pie Chart 是一种常见的统计图表通过将圆形分割成不同扇形来展示各部分在整体中的比例关系数据可视化数据分析创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考