1.0.3 • Published 2 years ago
@sensecare/waterfall-plot-chart v1.0.3
瀑布图
- 基于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 })
1.0.3
2 years ago