这篇文章标题中看似不相关的两个话题被我放在了一起讨论，主要是因为在项目的POC过程中，我选择了Vue + Echarts作为基础组件完成了一个驾驶舱的验证，后续被要求直接将该驾驶舱集成到 ELK 系统当中时，才想起 kiabana 是基于 angularJS 的。因为太懒，同时也想看看 angularJS 和 Vue 在一起混用会碰撞出什么样的火花，所以我并没有将原先的驾驶舱重构为 angularJS，而是直接进行了集成。。。

背景

虽然 kibana 本身提供了比较丰富的可视化组件和dashborad功能，但是总的来说，对比起其他比较流行的可视化框架，比如 echarts,highcharts 等，还是差强人意的。限制于组件的API，你很难在 kibana 上做各种个性化的展示和在组件之间进行关联互动。而对于 echarts或者highcharts本身而言，它又仅仅是一个基于图表的可视化框架，无法提供数据绑定，路由，组件间通信等高级功能，所以势必要和 Vue 等JS开发的框架一起，才能提供内容丰富、互动性强的dashboard功能。以下，是我将 echart 和 Vue 集成后，做的一个 dashboard：

该 dashboard 是可以动态关联的，比如散点图上的每一个点都是可以点击的，点击后，对应系统的状态会被调出并展示：

这里主要是用 Vue 将 echart 的画布组件化，并完成相应的数据绑定和加载功能，为每个点击事件实现响应。具体就不在这里详述。

这里要讨论的是如果将这样的一个 dashboard 应用集成到 kibana 上，做到如下效果：

思路

首先，Vue + echarts 必须通过 webpack 打包成一个单页的应用。然后，将这个单页应用做成一个 kibana 的 plugins，共享 kibana 的用户访问权限。