superset集成echarts

服务地址

服务可以登录 http://dnu8k5.natappfree.cc体验，账号：user，密码：user。
git 地址：https://github.com/Sherhang/incubator-superset/tree/zh/

前言

目前superset官方项目处于快速迭代中，版本的差异很大，目前发布的稳定版为0.36，所以改造主要基于0.36版本。另外，目前的master分支对元数据库结构已经做了改动，不能向前兼容。

目前superset的前端用d3和nvd3来做，很多图表不符合中国人的使用习惯，d3的部分图表性能很差，所以必须进行定制化。

集成echarts

echarts官方link，

superset使用最新版本0.36，echarts4.7.0。主要参考link。这份教程给出的柱状折线图还不能达到实用的需求，比如格式调整，样式调整，字段分组等功能都没有做，后面我会把能实用的教程补齐。

集成echarts柱状折线图 mix-line-bar

这个柱状折线图完成的功能不全，仅仅帮助大家理解superset图表从后端到前端的渲染流程

流程

集成echarts柱状折线图 mix-line-bar
superset和echarts版本
前端目录 superset-frontend
首先0.36版本是比较新的版本，代码结构相比 0.30以前的改动还是比较大的，主要是前端的代码结构变化比较大， superset 把前端的插件单独放在一个superset-ui的项目中；superset中的前端代码主要放在superset-frontend的目录中

主要修改的地方

1、 superset-frontend/src/visualizations/ 目录下

1-1 新增文件夹MixLineBar,
主要新加的文件目录

1-2 新建文件夹 images 放入新增图表的图片
图片在echarts 上可以下载
https://www.echartsjs.com/examples/zh/index.html

选择你要接入的图表，然后右键另存为 就可以下载下来了
然后放在 images 文件下，可以转化为png

1-3 新增文件 MixLineBarChartPlugin.js

import {
    t } from '@superset-ui/translation';
import {
    ChartMetadata, ChartPlugin } from '@superset-ui/chart';
import transformProps from './transformProps';
import thumbnail from './images/thumbnail.png';


const metadata = new ChartMetadata({
   
  name: t('Mix Line Bar'),
  description: '',
  credits: ['https://www.echartsjs.com/examples/en/editor.html?c=mix-line-bar'],
  thumbnail,
});

export default class MixLineBarChartPlugin extends ChartPlugin {
   
  constructor() {
   
    super({
   
      metadata,
      transformProps,
      loadChart: () => import('./ReactMixLineBar.js'), // 前端渲染逻辑
    });
  }
}

1-4 新增文件 ReactMixLineBar.js 注册

import reactify from '@superset-ui/chart/esm/components/reactify';
import Component from './MixLineBar';

export default reactify(Component);

1-5 新增文件 transformProps.js 前端后端数据转换

export default function transformProps(chartProps) {
   

    const {
   width, height, queryData, formData} = chartProps;
    // formData 前端页面的数据
    // queryData  后端返回的数据
    return {
   
        data: queryData.data,
        width,
        height,
        formData,
        legend: queryData.data.legend,
        x_data: queryData.data.x_data,
        series: queryData.data.data,
    };

}

1-6 新增文件 MixLineBar.js 前端渲染图表主要逻辑

import echarts from 'echarts';
import d3 from 'd3';
import PropTypes from 'prop-types';
import {
    CategoricalColorNamespace } from '@superset-ui/color';

// 数据类型检查
const propTypes = {
   
    data: PropTypes.object,
    width: PropTypes.number,
    height: PropTypes.number,
};

function MixLineBar(element, props) {
   

    const {
   
        width,
        height,
        data,
        formData,
        x_data,
        series,
        legend,
    } = props; // transformProps.js 返回的数据

    const fd = formData
    // 配置y轴显示信息
    const left_y_min = fd.leftYMIn
    const left_y_max = fd.leftYMax
    const left_y_interval = fd.leftYInterval
    const right_y_min = fd.rightYMin
    const right_y_max = fd.rightYMax
    const right_y_interval = fd.rightYInterval
    // y轴别名
    const y_axis_label = fd.yAxisLabel
    const y_axis_2_label = fd.yAxis2Label

    // 右边y轴 对应的 指标列
    const right_y_column = fd.rightYColumn
    // 为了适配颜色
    const colorFn = CategoricalColorNamespace.getScale(fd.colorScheme);
    var colors = []
    if (colorFn && colorFn.colors) {
   
        colors = colorFn.colors
    }
    const colors_len = colors.length

    // y轴配置格式
    var yAxis_1 = {
   
        type: 'value',
        name: 'Left_Y_Axis',
        axisLabel: {
   
            formatter: '{value}'
        }
    }

    var yAxis_2 = {
   
        type: 'value',
        name: 'Right_Y_Axis',
        axisLabel: {
   
            formatter: '{value}'
        }
    }

    if (left_y_min !== undefined) {
   
        yAxis_1['min'] = left_y_min
    }
    if (left_y_max