superset的安装以及和echart整合

前提条件需要python3

1、创建虚拟环境

python3 -m venv env_superset

2、进入虚拟环境

source /data/env_superset/bin/activate

3、更新pip和setuptools

pip install --upgrade setuptools pip

4、安装superset

pip install superset

5、修改配置文件config.py

路径为/lib/python3.6/site-package/superset/config.py 修改其端口号。默认为8088此处我修改为8998

6、创建admin用户

fabmanager create-admin --app superset

7、初始化数据库

superset db upgrade

8、下载测试数据

superset load_examples

9、初始化superset，创建默认角色和权限

superset init

创建admin的用户名和密码。其他随便写就可以

10、启动superset服务，端口为8808，使用-p来绑定其它端口，-d表示开启debug

superset runserver -d &

11、退出虚拟机

deactivate

12、然后登录

http://172.16.37.84:8998/superset/welcome

-------------------------------------------------和kylin的对接------------------------------------------------------------

1.安装kylin

https://blog.csdn.net/lzlnd/article/details/85159065

2.安装kylinpy

在虚拟机安装先停掉superset。

然后pip install kylinpy

----------------------superseet整合echart二次开发添加图片---------------------------------------------------------

1.安装echart

npm install echarts

2.修改文件

1）修改superset\viz.py添加一下代码注意命名echarts_map

class echartsMap(BaseViz):

    """ echarts map viz """

    viz_type = 'echarts_map'
    verbose_name = _('echarts_map')
    is_timeseries = False

    def get_data(self, df):
        form_data = self.form_data
        df.sort_values(by=df.columns[0], inplace=True)
        print(df.values.tolist())
        ori_data = df.values.tolist()
        data = [{'name' : ori_data[i][0], 'value' : ori_data[i][1]} for i in range(len(ori_data))]
        data_name = [ori_data[i][0] for i in range(len(ori_data))]
        max_data = max([ori_data[i][1] for i in range(len(ori_data))])
        min_data = min([ori_data[i][1] for i in range(len(ori_data))])
        return [data, data_name, max_data, min_data]

2）修改superset\static\assets\src\visualizations\index.js也有可能是superset\static\assets\visualizations\main.js

在const vizMap参数中添加 echarts_map: require('./echarts_map.js'),

3）添加你的地图的js在目录uperset\static\assets\src\visualizations中文喝上边的件命名一定要viz_type的命名一样

注意。编译会报错。这个文件的格式要求比较严格。会有缩进问题

import echarts from 'echarts';

function echartsChinaMapVis(slice, payload) {
  const div = d3.select(slice.selector);
  const sliceId = 'echarts_slice_' + slice.formData.slice_id;
  const html = '<div id=' + sliceId + ' style="width:' + slice.width() + 'px;height:' + slice.height() + 'px;"></div>';
  div.html(html);

  const myChart = echarts.init(document.getElementById(sliceId));

  const gateData = payload.data;
  const dataValue = gateData[0];
  const dataName = gateData[1];
  const maxData = gateData[2];
  const minData = gateData[3];

  const option = {
    title: {
      subtext: '点击进入下一级，双击返回中国地图',
      x: 'center',
      bottom: '5%',
    },
    tooltip: {
      trigger: 'item',
      formatter: '{c}',
    },
    visualMap: {
      type: 'continuous',
      min: minData,
      max: maxData,
      right: '-15%',
      inRange: {
        color: ['#d0f4fc',
          '#a9dbf6',
          '#9cd3f4',
          '#93cdf3',
          '#83c2f0',
          '#6eb5ed',
          '#51a2e9'],
      },
    },
    series: [
      {
        type: 'map',
        map: 'china',
        selectedMode: 'single',
        roam: 'scale',
        data: dataValue,
        label: {
          normal: {
            show: true,
            textStyle: { color: '#b6a38a' },
          },
          emphasis: {
            show: true,
            textStyle: { color: '#ff6347' },
          },
        },
        itemStyle: {
          emphasis: {
            areaColor: '#2e4783',
            borderWidth: 0,
          },
        },
      },
    ],
  };
  myChart.setOption(option);
  myChart.on('mouseover', function (params) {
    const dataIndex = params.dataIndex;
    console.log(dataIndex);
  });
  myChart.on('click', function (chinaParam) {
    if (chinaParam.name === chinaParam.name && dataName.indexOf(chinaParam.name) > -1) {
      const option1 = myChart.getOption();
      option1.series[0].map = chinaParam.name;
      myChart.setOption(option1);
    }
  });
  myChart.on('dblclick', function () {
    if (myChart.getOption().series[0].map !== 'china') {
      const option1 = myChart.getOption();
      option1.series[0].map = 'china';
      myChart.setOption(option1);
    }
  });
}

module.exports = echartsChinaMapVis;

4）修改visTypes.js文件/superset/static/assets/javascripts/explore/stores/visTypes.js

echarts_map: {
    label: 'Country Map',
    controlPanelSections: [
      {
        label: 'Query',
        expanded: true,
        controlSetRows: [
          ['entity'],
          ['metric'],
        ],
      },
      {
        label: 'Options',
        controlSetRows: [
          ['select_country'],
          ['linear_color_scheme'],
        ],
      },
    ],
    controlOverrides: {
      entity: {
        label: 'ISO 3166-1 codes of region/province/department',
        description: "It's ISO 3166-1 of your region/province/department in your table. (see documentation for list of ISO 3166-1)",
      },
      metric: {
        label: 'Metric',
        description: 'Metric to display bottom title',
      },
      linear_color_scheme: {
        renderTrigger: false,
      },
    },
  },

3.编译superset

进入/superset/static/assets目录下。执行sh js_build.sh

注意可能会报错上边的echarts_map脚本的问题。照着修改就行

4.重新启动superset

5.访问superset会出现一个图标

superset的安装以及和echart整合

猜你喜欢