1.0.0 • Published 4 years ago
@liyucan/scatter-heatmap v1.0.0
ScatterHeatmap 散点热力图
场景
用于计算点值在一定坐标区间内的落点情况以及落点密度。
安装
npm i @liyucan/color-picker
or
yarn add @liyucan/color-picker使用
import SvgColorPicker from '@liyucan/color-picker';
const instance: SvgColorPicker = new SvgColorPicker({
width: 320,
height: 320,
xAxis: [1000, 1800],
yAxis: [1000, 1800],
xGrad: 100,
yGrad: 100,
disableZoom: false,
disableTooltip: false,
data: [[1000, 1699], [1100, 1299 ], [1050, 1058 ], [1154, 1308 ], [1287, 1750 ], [1587, 1205 ], [1708, 1000 ], [1408, 1800 ], [1478, 1305 ], [1122, 1648]]
});
instance.mount('#app');options
| 选项 | 说明 | 类型 | 默认值 |
|---|---|---|---|
| width | 画布宽度,单位px | number | 320 |
| height | 画布高度,单位px | number | 320 |
| xAxis | x轴坐标值范围 | number, number | |
| yAxis | y轴坐标值范围 | number, number | |
| xGrad | x轴坐标值间隔 | number | |
| yGrad | y轴坐标值间隔 | number | |
| disableZoom | 关闭缩放功能 | boolean | false |
| disableTooltip | 关闭坐标提示工具 | boolean | false |
| padding | 内边距,单位px | number | 40 |
| data | 值数据 | number, number |
api
| 名称 | 说明 | 参数 | 默认值 |
|---|---|---|---|
| mount | 挂载示例 | string / HTMLElement | |
| update | 更新数据 | { xAxis?: number, number; yAxis?: number, number; xGrad?: number; yGrad?: number; data?: number, number;} |
开发
npm install or yarn install项目运行
npm run dev or yarn dev项目构建
npm run build or yarn build1.0.0
4 years ago