第16页，共152页。 显示 1,517 条结果 (0.064 秒)
图形宏开发技术基础：ECharts基本使用方法
1. ECharts简介 ECharts是一种前端图形组件，与highchart、d3js等类似，用于将数据转化成各种图形进行展示（详见：ECharts官网 https://echarts.apache.org/zh/）。如下图所示，在Smartbi中，可以使用Smartbi的数据集等资源作为数据来源，通过简单的配置，即可自动将数据以可视化图形的方式展现，使得数据变得更加直观、生动。 1.png 2.png 接下我们就来学习ECharts的基本使用方法，以及如何在Smartbi中，使用ECharts灵活绘制各种图形效果。 注意：学习此文档前，强烈建议先花费1小时，访问ECharts官网仪表盘区域地图如何设置只显示排名前5的数据标签
（本文档仅供参考） 说明：此扩展属性是在V11版本环境验证的。 问题说明 仪表盘的区域地图组件，想根据数据排名只展示前五个区域的标签，不是固定的，而是根据实际数据结果排序，地图数据标签再展示前五个区域标签省份名称即可，如何实现？ image2025-6-4_16-25-9.png 解决方案 可以先 … } }, { label: { show: true } }], map: 'CHINA', geoIndex: 'xxx' }] } 地图数据标签 标签排名 标签隐藏 标签前几第一课：Smartbi中配置ECharts属性
1 可视化配置 Smartbi针对ECharts图形，提供了可视化的配置界面，可支持用户在不了解option配置属性的情况下，依然能按自己的需求，制作出丰富的ECharts图形效果。 Smartbi中的图形可视化配置界面，同样是与ECharts图形结构是一一对应的，如下图所示。其本质是根据用户在可视化配置界面中的设置，构建出option配置对象，进而绘制出ECharts图形的。 14.png 2 扩展属性 ECharts的配置项非常丰富及灵活，无法通过Smartbi的可视化配置界面实现一一对应。因此Smartbi提供扩展属性的功能，当可视化配置界面无法配置出所需图形效果时，可以考虑使用扩展属性调整图形。 15.png第一课：Smartbi中配置ECharts属性
1 可视化配置 Smartbi针对ECharts图形，提供了可视化的配置界面，可支持用户在不了解option配置属性的情况下，依然能按自己的需求，制作出丰富的ECharts图形效果。 Smartbi中的图形可视化配置界面，同样是与ECharts图形结构是一一对应的，如下图所示。其本质是根据用户在可视化配置界面中的设置，构建出option配置对象，进而绘制出ECharts图形的。 14.png 2 扩展属性 ECharts的配置项非常丰富及灵活，无法通过Smartbi的可视化配置界面实现一一对应。因此Smartbi提供扩展属性的功能，当可视化配置界面无法配置出所需图形效果时，可以考虑使用扩展属性调整图形。 15.png导出 - 麒麟V10 导出电子表格echarts图形报错
（本文档仅供参考） 问题描述 在麒麟V10环境部署smartbi，导出带echarts图形的电子表格报错，如截图： image2023-7-10_16-5-7.png image2023-7-10_16-3-56.png 问题原因 这是因为导出的时候需要调用操作系统中的字体文件来生成对应的图形效果，但当前的操作系统无对应的中文字体，所以就会报错。 解决方案 通过安装字体并设置字体权限解决相关问题，安装字体后需要重启操作系统 1、查看中文字体 fc-list :lang=zh 2、安装字体 yum -y install fontconfig #安装字体库 yum -y install ttmkfdirEcharts图形-扩展属性：样式 - 分别对饼图扇区设置不同颜色且设置透明度
（本文档仅供参考） 问题 echarts扩展属性如何实现在饼图中分别给不同的扇区设置颜色且设置透明度？ 解决方案 可在图形中增加扩展属性，扩展属性如下： { "series": [{ "data": [{ "itemStyle": { // 多个扇区可设置多个itemStyle "color": "rgba(255, 0, 0, 0.2)" //rgba前三个值为rgb颜色值,最后一个为颜色透明度Echarts图形-扩展属性：仪表盘双y联合图中柱图被曲线面积图遮挡
（本文档仅供参考） 问题说明 如下图所示，仪表盘中双y联合图中，使用曲线面积图和柱图时，曲线面积图默认会覆盖在柱图上，影响柱图的展示，以及影响柱图上的跳转、筛选等功能。 image2024-2-6_19-15-27.png 解决方案 目前产品中没有直接的设置项可以进行层级的调整，不过可以通过扩展属性或者宏的方式来讲柱图置于曲线面积图之上。 1、通过扩展属性的方式实现 与Echarts图形-扩展属性：联合图柱图显示上方，面积图显示在下方一致， { "series": [{ "zlevel": 0 }, { "zlevel": 1 }] } 不过需要注意图形的层级应该与图形保持一致，如下图所示图形 - 电子表格Echarts图形中实现动态markline
(本文档仅供参考) 问题： Echarts图形中需要标识markline，但是markline标识的指标是由另一数据集中的指标动态计算而来的平均值，可以如何实现呢。 参考方案： 可以考虑通过宏代码获取到另一数据集的指标结果来加载markline： 1、将另一数据集字段拖拽到辅助sheet1中，可自行在数据集或excel中使用公式计算出平均值结果 image2024-10-26_9-27-39.png 2、参考如下宏代码获取指定单元格中的平均值结果：电子表格获取来自于不同sheet页中单元格中数据 https://wiki.smartbi.com.cn/pages/viewpage.action?smt_poidEcharts图形-扩展属性：样式 - 调整雷达图分类名称字体大小以及显示为正方形
（本文档仅供参考，此示例在V10.5.15上验证通过） 问题 仪表盘制作雷达图， 希望调整雷达图分类名称字体大小以及显示为正方形，如何实现？ image2025-5-20_16-29-57.png 解决方案 可参考添加如下扩展属性： 注：显示为正方形需要本身只有4个分类 option = { "radar": { "startAngle": 45, //起始角度 "axisName": { "fontSize": 15 //文字大小 } } } 电子表格可参考：Echarts图形-扩展属性：标签 - 雷达图画布小的时候标签显示不全 正方形雷达图 雷达图字体大小修改如何查看smartbi中的Echarts版本信息
（本文仅供参考） 问题说明： 日常在使用中需要确认Echarts版本信息，可以参考如下步骤去操作。 解决方案： 步骤： 1、打开smartbi首页，无需登录（是否登录不影响）。谷歌浏览器直接按F12,切换菜单到Console菜单。 image2021-10-20_16-30-56.png 2、登录页面下按F12后展示的页面如下。 image2021-10-20_16-31-54.png 3、在console控制台输入以下脚本 ： jsloader.resolve("thirdparty.echarts.min.echarts",true); //加密时加载完整版echarts
