三步为 Apache SkyWalking UI 添加自定义图表完整实战教程【免费下载链接】skywalkingAPM, Application Performance Monitoring System项目地址: https://gitcode.com/gh_mirrors/sky/skywalkingApache SkyWalking 的自定义图表就是改它的 UI 源码加一个 ECharts 图形组件并接上后端指标数据。它解决默认仪表盘覆盖不到的监控展示问题适合有基本前端基础的开发者和想二次开发监控面板的运维同学。默认仪表盘不够用时OAL 脚本加固定模板生成的官方仪表盘通用但不认你的业务。典型场景你要把支付成功率按渠道拆开画、给核心服务挂一张 SLO 达成率盘——官方文档 docs/en/ui/README.md 里的 Custom Dashboard 能加页面和控件但图形样式是固定的想加新渲染形式就得动 UI 源码。认识 SkyWalking UI 的前端构成UI 源码在skywalking-ui/子模块。技术栈是 Vue 3 加 TypeScript构建用 Vitedist-material/release-docs/licenses/ui-licenses/下能看到 vue、echarts、element-plus 的许可证这就是它的依赖底座。组件按业务域放在webapp/components/下。加一个图形标准动作是三步写 Vue 组件、把它挂进图形类型注册表、把指标数据转成 ECharts 的 option。理解机制另有两个入口UI 文档 docs/en/ui/README.md以及菜单初始化模板ui-initialized-templates/menu.yaml它决定左侧菜单结构。十分钟搭好 SkyWalking UI 开发环境克隆、装依赖、启动共三条命令git clone https://gitcode.com/gh_mirrors/sky/skywalking.git cd skywalking/skywalking-ui npm install用 Node 18 以上具体版本要求看该目录package.json的engines字段。三步做出第一个自定义图表第一步写组件。在webapp/components/下新建Donut.vue。核心逻辑挂载时echarts.init卸载时dispose数据变化时更新 option。templatediv refel stylewidth:100%;height:100%/div/template script setup langts import { ref, onMounted, onBeforeUnmount, watch } from vue import * as echarts from echarts const el refHTMLElement() const chart refecharts.ECharts() const props defineProps{ series: { name: string; value: number }[] }() onMounted(() (chart.value echarts.init(el.value!))) watch(() props.series, s chart.value?.setOption({ series: [{ type: pie, radius: [55%, 80%], data: s, label: { show: true } }] }), { deep: true }) onBeforeUnmount(() chart.value?.dispose()) /script第二步注册组件。打开图形类型注册表webapp/constants/下管理图表类型的模块把新组件登记进去key 与组件的对应关系是后续渲染的唯一依据。注册表的字段名以你所在版本的源码为准照抄邻近条目最稳。第三步做数据适配。在webapp/utils/下加一个转换函数// 把 TimeSeries 响应转成环形图数据 export const toDonut (ts: TimeSeries) ts.result.map(s ({ name: s.name, // 取每个序列最近一个点环形图展示当前占比 value: s.timestamps ? s.values[s.values.length - 1] : 0, }))注意事项注册 key 拼错时页面是静默空白不报错适配层隔离了后端结构TimeSeries返回字段变了只改这里组件不用动。本地启动与调试 SkyWalking UInpm run build:devVite 开发服务带热更新保存即刷新默认访问http://localhost:8080。调试手段按顺序用浏览器 DevTools 的 Network 面板确认 UI 发给 OAP 的 GraphQL 请求有数据返回先排除后端问题Vue DevTools看组件树里数据有没有真的传进来浏览器 Console查 ECharts 实例和注册表 key 是否对得上本地联调时 OAP 默认监听 12800 端口地址以 docs/en/setup/backend/configuration-vocabulary.md 的说明为准。构建 SkyWalking UI 生产版本并集成 OAP构建走仓库自带的 Maven 流程前端命令由frontend-maven-plugin见 apm-webapp/pom.xml代为执行不必手动跑 npmmvn clean package -DskipTests产物链路skywalking-ui构建出dist/→ 打进apm-webapp的skywalking-webapp.jar→ 由apm-dist/src/main/assembly/binary.xml装进发行包的webapp/目录。替换 OAP 机器上该目录的 jar 并重启新图表即生效。进阶玩法给 SLO 挂一个仪表盘换个方向给核心服务做 SLO 达成率仪表盘。ECharts 的gauge系列自带指针和阈值刻度数据复用既有指标查询接口不引入新 API。gauge: { min: 0, max: 100, detail: { formatter: {value}% }, // 阈值直接写死在 option不用加新接口 axisLine: { lineStyle: { width: 12, color: [[0.9, #f00], [1, #0a0]] } }, data: [{ value: slo }], }思路与前三步完全同构新组件 → 注册 → 取数。区别只在取数从 GraphQL 时间序列换成单值查询且阈值编码进option省一次后端改动。自定义图表常见报错速查图表不出现→ 注册表 key 与引用处拼写不一致 → 在 Console 里比对 key逐字核对。环形图全为 0 或 NaN→ 适配函数取的字段与TimeSeries实际结构不符 → 先打印原始响应再写取值逻辑。重新构建后页面没变化→ 没替换到正确的 jar → 确认webapp/下的skywalking-webapp.jar时间戳已更新再重启 OAP。延伸阅读自定义组件属于 SkyWalking UI 扩展改完必须重新构建才能生效与 Dashboard 的 JSON 配置是两个通道别混用。机制的完整说明在 docs/en/ui/README.md有 PR 想法就翻 CONTRIBUTING.md。先跑通本地环境再做一个最小图形组件就是 SkyWalking 前端开发的全部起点。【免费下载链接】skywalkingAPM, Application Performance Monitoring System项目地址: https://gitcode.com/gh_mirrors/sky/skywalking创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考 三步为 Apache SkyWalking UI 添加自定义图表：完整实战教程
三步为 Apache SkyWalking UI 添加自定义图表完整实战教程【免费下载链接】skywalkingAPM, Application Performance Monitoring System项目地址: https://gitcode.com/gh_mirrors/sky/skywalkingApache SkyWalking 的自定义图表就是改它的 UI 源码加一个 ECharts 图形组件并接上后端指标数据。它解决默认仪表盘覆盖不到的监控展示问题适合有基本前端基础的开发者和想二次开发监控面板的运维同学。默认仪表盘不够用时OAL 脚本加固定模板生成的官方仪表盘通用但不认你的业务。典型场景你要把支付成功率按渠道拆开画、给核心服务挂一张 SLO 达成率盘——官方文档 docs/en/ui/README.md 里的 Custom Dashboard 能加页面和控件但图形样式是固定的想加新渲染形式就得动 UI 源码。认识 SkyWalking UI 的前端构成UI 源码在skywalking-ui/子模块。技术栈是 Vue 3 加 TypeScript构建用 Vitedist-material/release-docs/licenses/ui-licenses/下能看到 vue、echarts、element-plus 的许可证这就是它的依赖底座。组件按业务域放在webapp/components/下。加一个图形标准动作是三步写 Vue 组件、把它挂进图形类型注册表、把指标数据转成 ECharts 的 option。理解机制另有两个入口UI 文档 docs/en/ui/README.md以及菜单初始化模板ui-initialized-templates/menu.yaml它决定左侧菜单结构。十分钟搭好 SkyWalking UI 开发环境克隆、装依赖、启动共三条命令git clone https://gitcode.com/gh_mirrors/sky/skywalking.git cd skywalking/skywalking-ui npm install用 Node 18 以上具体版本要求看该目录package.json的engines字段。三步做出第一个自定义图表第一步写组件。在webapp/components/下新建Donut.vue。核心逻辑挂载时echarts.init卸载时dispose数据变化时更新 option。templatediv refel stylewidth:100%;height:100%/div/template script setup langts import { ref, onMounted, onBeforeUnmount, watch } from vue import * as echarts from echarts const el refHTMLElement() const chart refecharts.ECharts() const props defineProps{ series: { name: string; value: number }[] }() onMounted(() (chart.value echarts.init(el.value!))) watch(() props.series, s chart.value?.setOption({ series: [{ type: pie, radius: [55%, 80%], data: s, label: { show: true } }] }), { deep: true }) onBeforeUnmount(() chart.value?.dispose()) /script第二步注册组件。打开图形类型注册表webapp/constants/下管理图表类型的模块把新组件登记进去key 与组件的对应关系是后续渲染的唯一依据。注册表的字段名以你所在版本的源码为准照抄邻近条目最稳。第三步做数据适配。在webapp/utils/下加一个转换函数// 把 TimeSeries 响应转成环形图数据 export const toDonut (ts: TimeSeries) ts.result.map(s ({ name: s.name, // 取每个序列最近一个点环形图展示当前占比 value: s.timestamps ? s.values[s.values.length - 1] : 0, }))注意事项注册 key 拼错时页面是静默空白不报错适配层隔离了后端结构TimeSeries返回字段变了只改这里组件不用动。本地启动与调试 SkyWalking UInpm run build:devVite 开发服务带热更新保存即刷新默认访问http://localhost:8080。调试手段按顺序用浏览器 DevTools 的 Network 面板确认 UI 发给 OAP 的 GraphQL 请求有数据返回先排除后端问题Vue DevTools看组件树里数据有没有真的传进来浏览器 Console查 ECharts 实例和注册表 key 是否对得上本地联调时 OAP 默认监听 12800 端口地址以 docs/en/setup/backend/configuration-vocabulary.md 的说明为准。构建 SkyWalking UI 生产版本并集成 OAP构建走仓库自带的 Maven 流程前端命令由frontend-maven-plugin见 apm-webapp/pom.xml代为执行不必手动跑 npmmvn clean package -DskipTests产物链路skywalking-ui构建出dist/→ 打进apm-webapp的skywalking-webapp.jar→ 由apm-dist/src/main/assembly/binary.xml装进发行包的webapp/目录。替换 OAP 机器上该目录的 jar 并重启新图表即生效。进阶玩法给 SLO 挂一个仪表盘换个方向给核心服务做 SLO 达成率仪表盘。ECharts 的gauge系列自带指针和阈值刻度数据复用既有指标查询接口不引入新 API。gauge: { min: 0, max: 100, detail: { formatter: {value}% }, // 阈值直接写死在 option不用加新接口 axisLine: { lineStyle: { width: 12, color: [[0.9, #f00], [1, #0a0]] } }, data: [{ value: slo }], }思路与前三步完全同构新组件 → 注册 → 取数。区别只在取数从 GraphQL 时间序列换成单值查询且阈值编码进option省一次后端改动。自定义图表常见报错速查图表不出现→ 注册表 key 与引用处拼写不一致 → 在 Console 里比对 key逐字核对。环形图全为 0 或 NaN→ 适配函数取的字段与TimeSeries实际结构不符 → 先打印原始响应再写取值逻辑。重新构建后页面没变化→ 没替换到正确的 jar → 确认webapp/下的skywalking-webapp.jar时间戳已更新再重启 OAP。延伸阅读自定义组件属于 SkyWalking UI 扩展改完必须重新构建才能生效与 Dashboard 的 JSON 配置是两个通道别混用。机制的完整说明在 docs/en/ui/README.md有 PR 想法就翻 CONTRIBUTING.md。先跑通本地环境再做一个最小图形组件就是 SkyWalking 前端开发的全部起点。【免费下载链接】skywalkingAPM, Application Performance Monitoring System项目地址: https://gitcode.com/gh_mirrors/sky/skywalking创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考