superset二次開發之旅 - 集成echart圖表

04-17

實際上開始寫這篇的文章的初衷只是為了記錄填過的坑，而且還會需要記錄未來填過的坑...

本文主要是基於若干位前輩的基礎之上進行的，特別感謝茅十八和小懶等前輩。

Superset開發環境搭建
Superset二次開發

開發環境

如上訴援引的文章一樣，由於怎麼都搞不定Windows的開發環境，所以在Unbuntu16.06上用Pycharm搭建了一套Superset的二次開發環境，升級主版本的時候發現還是不怎麼方便，之後又在MAC OS上布置了一套環境，暫時沒發現問題。官方推薦的Python版本是2.7~3.5，但本著好奇害死貓的態度依然使用了3.6，暫時沒有發現什麼問題。

改造過程

重複的地方就不在贅述，直接就說幾個和 [superset二次開發-集成echarts圖表] 不同的地方吧。

1、在Pycharm環境中修改前端代碼的目錄不是在 superset/assets，而是在superset/static/assets，原因是因為我們需要把 superset/assets 中的內容拷貝至 superset/static/assets才能進行二次開發，原目錄中是一個軟鏈接。在MAC OS中開發的時候不需要這個步驟。

2、superset/static/assets/visulations/echarts_funnel.js 的代碼由於原作者做過一些修改但是沒有放上去。我做了統一的修改

import echarts from echarts;function echartsFunnelVis(slice, payload) { const div = d3.select(slice.selector); const sliceId = echarts_slice_ + slice.formData.slice_id; const html = <div id= + sliceId + stylex="width: + slice.width() + px;height: + slice.height() + px;"></div>; div.html(html); // reset const myChart = echarts.init(document.getElementById(sliceId)); // const fd = slice.formData; const json = payload.data; const dataName = []; // echarts需要的是兩個數組 let maxValue = 0; const dataValue = json; dataValue.forEach(function (item) { dataName.push(item.name); if (item.value > maxValue) { maxValue = item.value; } }); const option = { tooltip: { trigger: item, formatter: {a} <br/>{b} : {c}, }, legend: { data: dataName, }, calculable: true, series: [ { name: 漏斗圖, type: funnel, left: 10%, top: 60, // x2: 80, bottom: 60, width: 80%, // height: {totalHeight} - y - y2, min: 0, max: maxValue, minSize: 0%, maxSize: 100%, sort: descending, gap: 2, label: { normal: { show: true, position: inside, }, emphasis: { textStyle: { fontSize: 20, }, }, }, labelLine: { normal: { length: 10, lineStyle: { width: 1, type: solid, }, }, }, itemStyle: { normal: { borderColor: #fff, borderWidth: 1, }, }, data: dataValue, }, ],}; // 使用剛指定的配置項和數據顯示圖表。 myChart.setOption(option);}module.exports = echartsFunnelVis;

3、存放縮略圖的目錄位置，分別在目錄下放一張 echarts_funnel.png 的縮略圖

superset/static/assets/images/viz_thumbnails/
superset/static/assets/images/viz_thumbnails_large/

４、所有需要修改或添加的文件如下

superset/viz.py
superset/static/assets/visulations/main.js
superset/static/assets/visulations/echarts_funnel.js
superset/static/assets/javascripts/explore/stores/vistypes.js
superset/static/assets/package.json
superset/static/assets/images/viz_thumbnails/echarts_funnel.png
superset/static/assets/images/viz_thumbnails_large/echarts_funnel.png

５、在superset中導入echarts的方式：

superset/static/assets/package.json中添加如下代碼：

方法一：切換到目錄 superset/static/assets/，下運行如下命令行，build 和 dev 選其一就行，不需要修改 superset/templates/superset/basic.html 文件，npm把依賴自動打包

cd superset/assetsnpm install -d //生成依賴包目錄node_modules,下載依賴npm run build //執行webpack打包npm run dev //監聽頁面變動並自動打包

方法二（推薦）：

cd superset/assets./js_build.sh //使用安裝包內自帶的打包腳本，會進行語法檢查

至此問題全部解決。再次感謝茅十八和小懶兩位前輩領路。

下一步會嘗試集成更多的Echart組件