superset 引入 echarts

1. assets 目录下运行 npm i echarts --save, 安装 echarts 并将依赖项加入到 package.json 中;

2. 在 /superset/assets/src/visualizations/index.js 目录下找到你需要修改的图, 如果是在nvd3_vis.js 中的话最好是再新建一个 js 文件, 然后在 index.js 中引入;

3. 以这个EventFlow 这个图为例子:

      /superset/assets/src/visualizations/EventFlow.jsx

     

import React from 'react';
import ReactDOM from 'react-dom';
import Echarts from 'echarts';

function renderEventFlow(slice, json) {
    if(document.querySelector(`#${slice.containerId}`)) {
        document.querySelector(`#${slice.containerId}`).removeAttribute('_echarts_instance')
    }
    myChart = Echarts.init(document.getElementById(`${slice.containerId}`))

    const option = {
        xAxis: {
        type: 'category',
        data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun']
    },
    yAxis: {
        type: 'value'
    },
    series: [{
        data: [120, 200, 150, 80, 70, 110, 130],
        type: 'bar'
    }]
    }
    
    myChart.setOption(option)
    myChart.resize()
    
}

module.exports = renderEventFlow;

4. 重新编译就能看到原来的EventFlow 图表变成了 echarts 的柱图;

5. 参数 slice 包含了 slice 的信息及参数; json 就是根据你条件查询后服务端返回的结果, 将其处理成需要的格式后应用到 option 中对应位置(legend, axis, series) 后就可以啦.

注:  例子中有两点是必须的, 我踩过的, 

          1. 如果已经初始化过 echarts 实例, 刷新数据的时候要删除原来 DOM 上的_ echarts_instance 属性,否则不能更新;

          2. 最后要加上 chart.resize(), 这样才能在调整大小的时候重新渲染图的大小以自适应;