1.0.5 • Published 6 months ago
@xchart/contour v1.0.5
Contour
等高线图组件，支持等高线图 area 和 line 模式
Feature
- 图表等高线图和区域图
- 图表宽高自适应
- 图形颜色范围 colors 支持传入
- 图表导出图片
- 图表导出数据
- 点击交互事件
- 图形 label 标注
TODO
- 交互事件 toolips
- 等高线图形 label 值标注
API
Contour(
opts: Options,
data: ChartData,
container: HTMLElement = document.body,
)Data
type Data = <{x:number;y:number;value:number}>[]Option
| 属性 | 描述 | 默认值 |
|---|---|---|
| type | 图表类型 | area |
| width | 图表宽度 | 640 |
| height | 图表高度 | 600 |
| xCoord | x 轴坐标 key | 'x' |
| yCoord | y 轴坐标 key | 'y' |
| zCoord | value 坐标 key | 'value' |
| blur | 平滑像素半径 | 4 |
| xAxesLabel | x 轴坐标标签 | xCoord |
| yAxesLabel | y 轴坐标标签 | yCoord |
| zAxesLabel | z 轴坐标标签 | zCoord |
| fontSize | 字体大小 | 12 |
| axesLabelFontSize | 坐标标签字体大小 | 14 |
| ticks | 图例刻度数 | 4 |
| stroke | 线条颜色 | '#ffffff00' |
| colors | 图例、等高图表颜色 | '#cdb4db','#ffc8dd','#ffafcc','#bde0fe','#a2d2ff' |
Data
type Data = <{x:number;y:number;value:number}>[]Usage
Installation
pnpm add @xchart/contour
# or
yarn add @xchart/contourimport Contour from '@xcahrt/contour';
const data = [
{ x: 0, y: 0, removal: 20 },
{ x: 1, y: 0, removal: 25 },
];
const contour = new Contour(
{
zCoord: 'removal',
colors: ['#ccd5ae', '#e9edc9', '#fefae0', '#faedcd', '#d4a373'],
width: 500,
height: 400,
},
data,
document.querySelector('#container'),
);Action
// 图表导出图片
contour.exportChart();
// 图表导出数据
contour.exportData();