使用开源Echarts为Splunk打造类似语法驱动的分析可视化 - naughty的个人页面 - 开源中国

安宇雨 - 随手采集
2018-10-18 14:49:02
随手采集
0000-未整理-等待研究

Splunk是业内领先的机器数据平台，有非常易用的用户界面的可视化的选项。Splunk的可视化图表是使用开源的highcharts构建的。但是Splunk内置的可视化选项不够灵活，不能动态的进行数据到图表的绑定。可喜的是，最新版本的Splunk提供了客户自定义图表的功能，利用该功能，我们可以打造一个类似Tableau或者ggplot的语法驱动的可视化工具。

代码在

主要逻辑代码代码是echarts_app/appserver/static/visualizations/echarts/src/visualization_source.js，不超过600行代码，大家有兴趣可以去看一下。

安装比较简单，拷贝echarts_app到SPLUNK_HOME/etc/apps目录下,

然后在 echarts_app/appserver/static/visualizations/echarts/ 在运行以下命令：

npm install
npm run build

当然，你需要在本机事先安装好Splunk的最近版本和npm，并设置SPLUNK_HOME的环境变量。

目录下自带了几个数据的样本，下面就详细说明一下如何使用：

数据绑定

先解释一下数据绑定，Splunk的SPL返回一个Table结构的数据表，利用该表我们可以把某一列数据绑定在某个可视化的选项上。

例如以下的SPL：

source="drinks.csv" 
| table country, wine_servings,  beer_servings, spirit_servings, total_litres_of_pure_alcohol 
| head 5

会返回这样的数据表

我们用上表中每一列的索引来进行绑定，这里country的索引是0，beer_servings的索引是2。

点击可视化选项Format，可以看到，凡是名字中包含Binding的选项，都可以进行数据的绑定。，绑定时，直接输入对应的逗号分割索引列表就好了，例如，要绑定第2和3列数据，输入1，2

单轴

饼图

SPL:

source="drinks.csv" 
| table country, wine_servings,  beer_servings, spirit_servings, total_litres_of_pure_alcohol 
| head 5

语法设置：

Coordinates -> Coordinates Type ＝ Single Axis
Single Axis -> Axis Binding = 0 (country)
Data Series -> Data Type = Pie
Data Series -> Data Color Binding = 1 (wine_servings)

单轴散点图

SPL:

source="drinks.csv" 
| table country, wine_servings,  beer_servings, spirit_servings, total_litres_of_pure_alcohol

语法设置：

Coordinates -> Coordinates Type ＝ Single Axis
Single Axis -> Axis Binding = 0 (country)
Data Series -> Data Type = Scatter
Data Series -> Data Color Binding = 1 (wine_servings)

X－Y 坐标系

柱状图

SPL

source="drinks.csv" 
| table country, wine_servings,  beer_servings, spirit_servings, total_litres_of_pure_alcohol 
| head 10

语法设置：

Coordinates -> Coordinates Type ＝ X-Y
X-Y Axis -> X-Axis Binding = 0 (country)
X-Y Axis -> X-Axis Type = Category
X-Y Axis -> Y-Axis Binding = 1,2 (wine_servings, beer_servings)
X-Y Axis -> Y-Axis Type = Value
Data Series -> Data Type = Bar

堆叠（Stack）模式只要利用echarts的工具箱，点击换为堆叠／换为平铺，直接可以切换

修改 Data Series -> Data Type = Bar 可获得折线（Line）图

同样可以切换为堆积模式

折线图和区域（Area）图本质是一样的，只需要选择 Data Series -> Show Area ＝ True／False

同样的可以切换为堆叠（stack）模式

对换X-Y轴的绑定可以得到Bar Chart
X-Y Axis -> X-Axis Binding = 1,2 (wine_servings, beer_servings)
X-Y Axis -> X-Axis Type = Value
X-Y Axis -> Y-Axis Binding = 0 (country)
X-Y Axis -> Y-Axis Type = Category

散点图

SPL

source="drinks.csv" 
| table country, wine_servings,  beer_servings, spirit_servings, total_litres_of_pure_alcohol

语法设置：
Coordinates -> Coordinates Type ＝ X-Y
X-Y Axis -> X-Axis Binding = 1 (wine_servings)
X-Y Axis -> X-Axis Type = Value
X-Y Axis -> Y-Axis Binding = 2 (beer_servings)
X-Y Axis -> Y-Axis Type = Value
Data Series -> Data Type = Scatter

增加对第四列的分析，绑定为颜色
Data Series -> Data Color Binding = 3 （spirit_servings）

增加对第四列的分析，绑定为数据点的大小
Data Series -> Data Size Binding = 4 （total_litres_of_pure_alcohol）

地图

等值线图 (Choropleth Map)
SPL

source="drinks.csv" 
| table country, wine_servings,  beer_servings, spirit_servings, total_litres_of_pure_alcohol

语法设置：
Coordinates -> Coordinates Type ＝ Geomap
Geomap -> Map Type = World
Geomap -> Geo Naming Binding = 0 (country)
Data Series -> Data Type = Map
Data Series -> Data Color Binding = 1 (wine_servings)

散点图

SPL:

source="police_killings.csv" | table latitude,longitude,p_income

语法设置：
Coordinates -> Coordinates Type ＝ Geomap
Geomap -> Map Type = World
Geomap -> Longitude and Latitude Binding = 1,0 (longitude,latitude)
Data Series -> Data Type = Scatter
Data Series -> Data Color Binding = 2 (p_income)

切换为美国地图 Geomap -> Map Type = USA