第5页,共422页。 显示 4,213 条结果 (0.05 秒)
Echarts图形-扩展属性:饼图图例样式,以及图例和文字的位置修改
(此文档仅供参考) 问题 如何修改图例样式,以及图例和文字的位置 1.png 解决方案 可以使用扩展属性实现 { "legend": { "icon": "circle", //这个字段控制形状 类型包括 circle,rect,roundRect,triangle,diamond,pin,arrow,none "itemWidth": 10, "itemHeight": 10, "align": "left" //图例标记和文本的对齐。默认自动,可选:'auto'/'left'/'right' } }【饼图】取消数据标签引导线并且数据标签拼接数值
(仅供参考) 问题描述: 希望实现取消数据标签引导线并且数据标签实现拼接数值效果,当下效果如下图: image2023-1-29_10-50-41.png 解决方案 可以使用扩展属性实现 { "series": [{ "label": { "normal": { "formatter": "function(arg){return arg.name + ':'+arg.value.toFixed(1)}" } }, "labelLine"ECharts图形-标准环形图/南丁格尔玫瑰图
{html}<div style="border-bottom: 0.5px solid #dfe1e5;color:#2D5C8C;padding-bottom: 0.5px;font-size: 24px; height: 5px;"> </div>{html} 标准环形图和南丁格尔玫瑰图都是饼图的变形图。 标准环形图是饼图挖去中间一部分所构成的图形,每个色块表示各数据数量的比例。 南丁格尔玫瑰图是通过扇形的面积和半径显示数据的占比情况,面积和半径表示数据的占比大小。 优势:明确显示数据的比例情况。通常用来描述量、频率或百分比之间的相对关系。 数据要求: 1)一个或多个分类值,一个或多个指标值。 2)数据类别ECharts图形-标准环形图/南丁格尔玫瑰图
{html}<div style="border-bottom: 0.5px solid #dfe1e5;color:#2D5C8C;padding-bottom: 0.5px;font-size: 24px; height: 5px;"> </div>{html} 标准环形图和南丁格尔玫瑰图都是饼图的变形图。 标准环形图是饼图挖去中间一部分所构成的图形,每个色块表示各数据数量的比例。 南丁格尔玫瑰图是通过扇形的面积和半径显示数据的占比情况,面积和半径表示数据的占比大小。 优势:明确显示数据的比例情况。通常用来描述量、频率或百分比之间的相对关系。 数据要求: 1)一个或多个分类值,一个或多个指标值。 2)数据类别图表组件 ⬝ 旭日图
1 概述 旭日图是一种现代饼图,它超越传统的饼图和环图,能表达清晰的层级和归属关系,以父子层次结构来显示数据构成情况。 旭日图中,离源点越近表示级别越高,相邻两层中,是内层包含外层的关系。 2 业务场景 1、场景描述:分析2020年和2021年产品类别的销售量情况,如下图所示: xuru02.png 2、以产品内置Demo资源的“订单模型”作为数据来源。 3、操作步骤 在数据选择区中,勾选 订单年份 、 产品类别 和 销售量 字段,由系统自动分配到 维度 和 标记 > 角度 上;或拖拽 订单年份 和 产品类别 字段到 维度 ,销售量 字段到 标记 > 角度 。 xuru01.png 4、旭日图默认支持数据旭日图
概要说明 旭日图是一种现代饼图,它超越传统的饼图和环图,能表达清晰的层级和归属关系,以父子层次结构来显示数据构成情况。 旭日图中,离源点越近表示级别越高,相邻两层中,是内层包含外层的关系。 入口 图例 image2022-2-18_16-20-12.png 下图是常用的旭日图,可以 … 。 image2019-7-17 9:47:7.png 优势 1)在实际项目中使用旭日图,可以更细分溯源分析数据,真正了解数据的具体构成。旭日图不仅数据直观,而且图表好看。分层看数据很直观,逐层下钻看数据。它既能像饼图一样表现局部和整体的占比,又能像矩形树图一样表现层级关系。适合财务各种数据的年度分析。 2)旭日图默认支持Echarts图形-扩展属性:饼图内标签需要加文字和指标展示
(本文档仅供参考) 问题描述 如下图,想实现饼图后加文字以及指标展示效果。 image2022-10-7_22-17-10.png 解决方案 可使用如下扩展属性实现效果: { "series": [{ "label": { "normal": { "formatter": "{c}元\n占比{d}%" } } }] } image2022-10-7_22-18-16.png环形图
概要说明 环形图与饼图类似,但又有区别。环形图中间有一个“空洞”,是由两个大小不一的饼图叠在一起,挖去中间的部分所构成的环状图形。环中的每一段都表示一类数据。 含义 入口 图例 可显示多个样本各部分所占的相应比例。 image2022-2-16_11-26-51.png image2022-2-16_16-25-29.png 优势 ① 明确显示数据的比例情况。通常用来描述量、频率或百分比之间的相对关系。 ② 由于色块面积比较小,留白更多,有更多空间留给信息标注和图文排版,使用时更灵活轻巧。 配图建议: 颜色:1个维度; 角度:1个度量; 数据要求:一个维度Echarts图形-扩展属性:南丁格尔玫瑰图实现空心效果
(本文档仅供参考) 问题: 南丁格尔图底图是实心饼图,希望改成环形图,实现空心效果。 image2023-3-1_10-15-31.png 解决方案: 电子表格可以参考下方扩展属性实现: { "series": [{ "type": 'pie', "radius": ['20%', '75%'] //内外半径 }] } image2023-3-1_10-16-4.png 如果是仪表盘资源,可直接设置内外圆半径实现: image2023-3-1_10-17-50.png线图(柱图)设置显示部分图例
= [] for (let i = 0; i < 3; i++) { let item = datas[i] options.legend.data.push(item.name) } portlet.setChartOptions(options) } 如果的饼图可以看示例 … (本文档仅供参考) 问题说明 线图或柱图等组件如果设置图例只显示前几个图例? image2024-1-9_18-27-20.png 解决方案 可以写宏处理: image2024-1-9_18-28-24.png 把下面宏代码复制到代码区域: function main(page: IPage