瀑布图

• 基于Echrets封装的瀑布图

/**
 * 瀑布图
 * @param {*} id 当前选中容器id
 * @param {*} resultData 依赖数据
 * @param {*} colors 颜色集合
 * @param {*} config 配置项
 * @param {*} chartMap 当前图表实例组合
 * @param {*} clear 清空画布
 */

  import { initWaterfallPlot } from '~'
  const chartMap = new Map();

    // 颜色集合 0红色 1绿色 2蓝色 3紫色 4玫红色 5黑色  6橘色
  const colors = ['#c45044', '#749e59', '#6188ae', '#655092', '#b8686f', '#141414', '#d49a58'];

  // mock服务端请求的数据
  // key用于渲染y轴展示 value是当前列需要渲染的像素信息
  // [3,48]表示使用颜色集合中下标为3(紫色)的颜色进行填充,48表示需要渲染的位置
  const resultData = {
    '2%':[[3,48],[0,49],[5,20]],
    '9%':[[3,0],[0,1],[2,2],[2,3],[1,4],[2,5],[2,6],[2,7],[2,8],[0,9],[2,10]],
    '7%':[[0,0],[1,30],[1,31],[1,32],[1,33]],
    '5%':[[1,37],[1,38],[1,39],[2,40],[1,41],[2,42]],
    '4%':[[1,1],[1,44],[1,45],[1,46],[1,47]],
    '8%':[[5,0],[1,1],[1,15],[1,16],[1,17],[1,18],[1,19],[1,20]],
    '6%':[[2,2],[1,3],[1,21],[1,22],[1,23],[1,24],[1,25]]
  }
  const config = {
    title:'S1(N=120)',
  }
  initWaterfallPlot({ resultData, config, id: 'waterfall', colors, chartMap })