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 build